网页 div(背景)随鼠标成动态效果

前端时间我做学校运动会专题时，想让上面的奖杯随着鼠标微动。因为我在其它网页做专题时看到过这种效果，感觉看起来，非常炫，于是，想在美工的基础上增加上这个效果。于是上网查了些实现方法，经过我的对比觉得下面这种是最简单，效果有不错的实现方法。今天想分享出来，希望对大家有帮助。

html的代码：

```
<div class="head_cup">
<img src="img/cup.png" alt="" width="800" height="240" />
</div>

css的代码：

.head_cup {
/*top: 12%;*/
position:absolute;
top:200px;
left:120px;
z-index: 999;

}

javascript代码：

<script type="text/javascript">          
    $('.head_cup').mousemove(function(e) {
            var x = (e.pageX * -1 / 2), y = (e.pageY * -1 / 2);
              $(this).css('left', (x /30+120)+ 'px ' );

               $(this).css('top', (x /60+200)+ 'px ' );
       });

</script>

这里大致意思是，给你想监听的要改变div的范围，加个javascript的函数，这个监听的是鼠标移动函数mousemove，利用jquery的pageX、pageY的这两个函数，记录下它的改变。

再通过，以下的代码，使x的随着鼠标三十分之一的改变来让div移动，但要加上原有的top值，不然会鼠标一进监听区域，会出现div会闪现的bug。

$(this).css('left', (x /30+120)+ 'px ' );

举一反三，也可以让其的背景随着鼠标的移动而移动，只不过这里改变的是background-position的xy的改变就行。还有什么不懂的可以在评论区留下你的问题。

$(this).css('background-position', x + 'px ' + y + 'px');