Question

我在html和css的iPad mini后面有一个图像，而我正在尝试做的是当鼠标悬停在ipad mini上时，图像会随着鼠标左右滑动。

我已经聚集了一小段jQuery，但代码仅在我使用$(document).mousemove时才有效

HTML

<div class="ipad-mini">
</div><!--ipad-mini-->
<div class="ipad-mini-actuators ipad-move">
</div><!--ipad-mini-actuators-->

CSS

.ipad-mini{
    position:relative;
    float:left;
    background:url(http://i609.photobucket.com/albums/tt179/DiegoSanchez88/ipad-mini-small_zpsb53e2bd8.png) no-repeat;
    width: 220px;
    height:330px;
    overflow:hidden;
    z-index:2;
}
.ipad-mini-actuators{
    background:url(http://i609.photobucket.com/albums/tt179/DiegoSanchez88/actuators_zps8b1a7c1b.png) no-repeat center center;
    width: 200px;
    height:280px;
    top:20px;
    left:10px;
    position:relative;
    z-index:1;
}

的jQuery

$(document).mousemove(function(e){
    var mousePos = (e.pageX/$(window).width())*100;
    $('.ipad-move').css('backgroundPosition', mousePos+'% 0');
});

Answer 1

here is the code demo

$(document).on('mousemove','.ipad-mini',function(e){
    var mousePos = (e.pageX/$(window).width())*100;
    $('.ipad-move').css('backgroundPosition', mousePos+'% 0');
});

jQuery mousemove在div而不是page

1 个答案: