3

その親指の上にマウスを移動しながら親指にカーソルを合わせたときに作成される画像を移動する必要があります。これどうやってするの？私はこのような機能を持っています(それは働いています):

var body = $('body'),
slike = $('.oglas_slika');


function image_hover(url){
    var image = '<img class="oglas_slika_velika"  src="' + url  +'">';
    return image;
}

slike.hover(
    function(e){
        body.append( image_hover( $(this).data('url') ) );
        $(".oglas_slika_velika")
            .css("top", (e.pageY) + "px")
            .css("left", (e.pageX) + "px")
            .fadeIn("slow");
    },
    function(){
        body.find('.oglas_slika_velika').remove();
    }
);

私はこれを試しましたが、ちらつきがあります (マウスを動かしている間、ページ上のランダムな場所に画像が表示されます):

var body = $('body'),
slike = $('.oglas_slika');

function image_hover(url){
    var image = '<img class="oglas_slika_velika"  src="' + url  +'">';
    return image;
}

slike.hover(
    function(){
        body.append( image_hover( $(this).data('url') ) );
        $(this).on('mousemove', function(e){
            $(".oglas_slika_velika")
            .css("top", (e.pageY) + "px")
            .css("left", (e.pageX) + "px")
            .fadeIn("slow");
            return false;
        });
    },
    function(){
        body.find('.oglas_slika_velika').remove();
    }
);
4

2 に答える 2

3

jsFiddle Demo

ちらつきは、作成された要素によってホバーのマウスアウト セクションが呼び出された結果です。これは画像要素を削除しています。要素が削除されると、hover の mouseover セクションが呼び出され、fadeIn の呼び出しと共に画像が再作成されます。プロセスでアニメーション キューが過負荷になり、最終的にはエラー ( ) がスローされ、Uncaught RangeError: Maximum call stack size exceeded非常に一貫性のない結果が発生します。

これを解決するには、マウスオーバー領域がオブジェクトのどこにあるかを追跡する必要があります。

var sp = {};
sp.top = slike.position().top;
sp.left = slike.position().left;
sp.right = sp.left + slike.width();
sp.bottom = sp.top + slike.height();

また、画像サイズを追跡します。

var w;
var h;

一度追加すると満たされる可能性があります

body.append( image_hover( ) );
w = $(".oglas_slika_velika").width();
h = $(".oglas_slika_velika").height();

次に、作成された画像とカーソルの間の衝突をチェックして、マウス カーソルがホバー領域から本当にマウスアウトしていることを確認します。

if( e.pageY + h > sp.bottom || e.pageY - h < sp.top){
 body.find('.oglas_slika_velika').remove();
}else{
 if( e.pageX + w > sp.right || e.pageX - w < sp.left ){
  body.find('.oglas_slika_velika').remove();
 }
}

これには少し手間がかかりますが、はるかに正確で、エラーが発生しにくくなります。これにより、画像がオフセットにプッシュされるのではなく、マウスを直接追跡できるようになります。

マウスの場所に画像を直接配置することが重要でない場合は、@Luigi De Rosa の回答が非常にうまく機能し、労力が少なくて済みます。

于 2013-05-09T21:37:34.007 に答える
0

このように10pxの「マージン」を追加してみてください

.css("top", (e.pageY)+10 + "px")
.css("left", (e.pageX)+10 + "px")

問題は、マウスを右下に移動すると、マウスが .oglas_slika_velika に移動し、.oglas_slika がトリガーされることです (つまり、削除機能)。

それがあなたにとって意味があることを願っています

jsFiddle はこちら: http://jsfiddle.net/bzGTQ/

于 2013-05-09T20:58:44.773 に答える