网页 div(背景)随鼠标成动态效果
来源:互联网 发布:罗克韦尔plc编程 编辑:程序博客网 时间:2024/06/06 16:39
前端时间我做学校运动会专题时,想让上面的奖杯随着鼠标微动。因为我在其它网页做专题时看到过这种效果,感觉看起来,非常炫,于是,想在美工的基础上增加上这个效果。于是上网查了些实现方法,经过我的对比觉得下面这种是最简单,效果有不错的实现方法。今天想分享出来,希望对大家有帮助。
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');
1 0
- 网页 div(背景)随鼠标成动态效果
- DIV+CSS实现区域鼠标事件的动态效果
- Div鼠标移动效果
- 鼠标移动div效果:鼠标拖曳效果
- 背景乱码动态效果
- 随鼠标移动的图片动态效果
- CSS+DIV网页样式与布局——页面背景&图片效果
- DIV滚动 鼠标悬停效果
- js div随鼠标移动,css图片放大镜效果
- 原生js实现div随鼠标移动效果
- CSS+DIV实现鼠标经过背景变色
- div鼠标指向文字与背景变换
- CSS+DIV实现鼠标经过背景变色
- CSS+DIV实现鼠标经过背景变色
- CSS+DIV实现鼠标经过背景变色
- CSS+DIV实现鼠标经过背景变色
- 通过DIV+CSS实现 一块没有连接的区域实现鼠标事件的动态效果
- 鼠标滑过,效果,背景颜色
- Android安全与逆向之Java虚拟机和Dalvik虚拟机的区别
- Eclipse中离线安装ADT插件详细教程
- C++ P1576 最小花费
- 基于Qt的车载GPS监控系统(3)界面设计
- Android6.0动态权限处理
- 网页 div(背景)随鼠标成动态效果
- Scrollview滑动冲突
- LeetCode 390. Elimination Game
- HDU-5970-最大公约数(合肥CCPC J题)-数学推导+找规律
- Realm-Android
- Linux kernel debug技巧----开启DEBUG选项
- StringBuffer
- Unity UGUI与NGUI的比较,NGUI完胜UGUI
- 编写一个简易的 HTTP 服务器程序