使用jQuery实现类似光标轨迹的效果

bfhwhh0e  于 5个月前  发布在  jQuery
关注(0)|答案(1)|浏览(55)

我想动画一个绝对位置的图像与权利:xxxPX,让我们说。文动画正在进行中,我可以添加一个“跟踪”的效果,就像一个Windows光标跟踪效果。
我可以在jQuery中实现这种跟踪效果吗?

wlsrxk51

wlsrxk511#

这应该是可行的:

var box = $('#box'),
    // Create some clones (these make up the trail)
    clones = $.map(Array(10), function(item, i){
        return box.clone().css('opacity', 1 / (i + 1)).hide().insertAfter(box);
    });

box.animate({
    top: 100,
    left: 200
}, {
    duration: 1000,
    step: function(now, fx) {

        // On each step, set a timeout for each clone,
        // making it move to the required position.

        var prop = fx.prop;

        $.each(clones, function(i, clone){
            clone = $(clone).show();
            setTimeout(function(){
                clone.css(prop, now);
            }, 50 * i);
        });

    }
});

字符串
Demo:http://jsbin.com/ifobe3

相关问题