1

画面上で div がカーソルをたどるセットアップがあります (現在は 2 つの div ですが、これはコンテンツ管理されるため、すぐに数十個になる予定です)。理想的には、各 div が異なる速度でカーソルをたどります (最大速度は 50 です)。 .
jsfiddle: http://jsfiddle.net/neal_fletcher/nEKgN/
jQuery:

$( document ).ready(function() {
var mouseX = 0, mouseY = 0;
$(window).mousemove(function(e){
   mouseX = Math.min(e.pageX);
   mouseY = Math.min(e.pageY);
});

var follower = $(".stuck");
var xp = 0, yp = 0;
var loop = setInterval(function(){
    // higher is slower
    xp += (mouseX - xp) / 30;
    yp += (mouseY - yp) / 30;
    follower.css({left:xp, top:yp});

}, 30);
});

$( document ).ready(function() {
var mouseX = 0, mouseY = 0;
$(window).mousemove(function(e){
   mouseX = Math.min(e.pageX);
   mouseY = Math.min(e.pageY);
});

var follower = $(".stuck-2");
var xp = 0, yp = 0;
var loop = setInterval(function(){
    // higher is slower
    xp += (mouseX - xp) / 20;
    yp += (mouseY - yp) / 20;
    follower.css({left:xp, top:yp});

}, 30);
});

上記の例では、各 div に異なるクラス (または ID) を与えて、それぞれに異なる速度を設定する必要がありましたが、私が言うように、これはコンテンツ管理になるため、これは不可能です。理想的には、すべての div が同じクラスになり、すべての div の速度がランダム化されます。最大速度は 50 です。これが可能かどうかわかりませんか? どんな提案でも大歓迎です！

4

1 に答える 1

4

.eachフォロワーを繰り返し処理し、それぞれに「ジャンプ」値を割り当てるために使用します。

$(document).ready(function () {
    var mouseX = 0,
        mouseY = 0;
    $(window).mousemove(function (e) {
        mouseX = Math.min(e.pageX);
        mouseY = Math.min(e.pageY);
    });

    var followers = $(".stuck");

    followers.each(function () {
        var follower = $(this),
            jump = 1 + (Math.random() * 50),
            xp = 0,
            yp = 0;

        var loop = setInterval(function () {
            // higher is slower
            xp += (mouseX - xp) / jump;
            yp += (mouseY - yp) / jump;
            follower.css({
                left: xp,
                top: yp
            });
        }, 30);
    });

});

ここにデモンストレーションがあります: http://jsfiddle.net/Nxdm7/

于 2013-08-14T20:56:42.573 に答える