网页 div(背景)随鼠标成动态效果
2016-11-05 19:42
218 查看
前端时间我做学校运动会专题时,想让上面的奖杯随着鼠标微动。因为我在其它网页做专题时看到过这种效果,感觉看起来,非常炫,于是,想在美工的基础上增加上这个效果。于是上网查了些实现方法,经过我的对比觉得下面这种是最简单,效果有不错的实现方法。今天想分享出来,希望对大家有帮助。
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');
相关文章推荐
- 鼠标选择动态改变网页背景颜色的JS代码
- 在博客添加网页背景动画效果,跟随鼠标移动的线条
- CSS+DIV网页样式与布局——页面背景&图片效果
- 点击弹出窗口网页背景变暗且不可点的效果(一):div实现
- 通过DIV+CSS实现 一块没有连接的区域实现鼠标事件的动态效果
- 为网页背景添加一个跟随鼠标的动态变幻线条
- jQuery实现响应鼠标背景变化的动态菜单效果代码
- CSS3感应鼠标的div背景闪烁动画效果
- 鼠标选择动态改变网页背景颜色的JS代码
- jQuery实现响应鼠标背景变化的动态菜单效果代码
- 网页动态背景——随鼠标变换的动态线条
- 为网页背景添加一个跟随鼠标变幻的动态线条
- 使用css设置网页元素的动态效果(如鼠标经过)
- 通过DIV+CSS实现 一块没有连接的区域实现鼠标事件的动态效果
- DIV+CSS实现区域鼠标事件的动态效果
- (简单的弹出div 覆盖背景)改善用户体验之alert提示效果 http://www.blueidea.com/tech/web/2006/4185.asp
- div背景半透明,覆盖整个可视区域的遮罩层效果
- JS+CSS实现鼠标滑过时动态翻滚的导航条效果
- JS onmousemove鼠标移动坐标接龙DIV效果实例
- JS onmousemove鼠标移动坐标接龙DIV效果实例