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