jQuery实现的鼠标响应缓冲动画效果示例
更新时间:2018年02月13日 12:22:05 作者:lexie
这篇文章主要介绍了jQuery实现的鼠标响应缓冲动画效果,涉及jQuery事件响应、数值运算及页面元素动态操作相关技巧,需要的朋友可以参考下
本文实例讲述了jQuery实现的鼠标响应缓冲动画效果。分享给大家供大家参考,具体如下:
先来看看运行效果:
具体代码如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>js动画-缓冲动画</title> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.js"></script> <style> * { margin: 0; padding: 0; font-family:"微软雅黑" } #box{ height:100px; width:100px; background-color:#0099CC; margin-top:200px; position:relative; /*速速、缓冲变化*/ left:-100px; } span{ display:block; color:blue; width:25px; height:100px; background-color:#FFFF99; position:absolute; left:100px; } </style> </head> <body> <div id="box"> <span>移动</span> </div> <script> window.onload=function(){ var div1=document.getElementById("box"); div1.onmouseover=function(){ startMove(0); } div1.onmouseout=function(){ startMove(-100); } } var timer=null; function startMove(itarget){ clearInterval(timer); var div1=document.getElementById("box"); timer=setInterval(function(){ var speed=(itarget-div1.offsetLeft)/20; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(div1.offsetLeft==itarget){ clearInterval(timer); }else{ div1.style.left=div1.offsetLeft+speed+"px"; } },30) } </script> </body> </html>
更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
相关文章
jquery text(),val(),html()方法区别总结
jquery text(),val(),html()方法区别总结。需要的朋友可以过来参考下,希望对大家有所帮助2013-11-11Jquery Easyui搜索框组件SearchBox使用详解(19)
这篇文章主要为大家详细介绍了Jquery Easyui搜索框组件SearchBox的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2016-12-12jquery.validate.js 多个相同name的处理方式
本文通过代码给大家介绍了jquery.validate.js 多个相同name的处理方式,非常不错,具有参考借鉴价值,需要的朋友参考下吧2017-07-07dul无法加载bootstrap实现unload table/user恢复
这篇文章主要介绍了dul无法加载bootstrap实现unload table/user恢复的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下2016-09-09
最新评论