Question

嗯，经过一天的研究，我无法做我想做的事^^

我想要这个：http://themenectar.com/demo/salient-promo/

滚动一下，你会发现4张照片，当你徘徊其中一张照片时，它会按比例放大并顺畅跟踪你的指针。当你离开画面时，它会回到第一个状态。

我的问题是如何做到这一点？

我试过了：

$('.img-anim').mousemove(function(e){
        mouseX = e.pageX;
        mouseY = e.pageY;

        traX = (e.pageX * -1 / 20);
        traY = (e.pageY * -1 / 20);
        console.log(traX);
        $(".img-anim").css({
            '-webkit-transform': 'translate3d(' + traX + 'px,' + traY + 'px, 0) scale(1.2)',
            '-moz-transform': 'translate3d(' + traX + 'px,' + traY + 'px, 0) scale(1.2)',
            '-ms-transform': 'translate3d(' + traX + 'px,' + traY + 'px, 0) scale(1.2)',
            '-o-transform': 'translate3d(' + traX + 'px,' + traY + 'px, 0) scale(1.2)',
            'transform': 'translate3d(' + traX + 'px,' + traY + 'px, 0) scale(1.2)'
        });
      });

但它不起作用，因为我的图片不是全屏，这只是我的代码中的4张图片。此外，当您将其中一个悬停时，将对所有这些进行翻译，当您离开悬停时，图片将保持最后状态，并且不会再次返回。

所以，如果有人听到我的话，我会非常感激能得到一些帮助！

祝你好运

像这个例子一样变换Mousemove

0 个答案: