本文实例讲述了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实现的鼠标响应缓冲动画效果示例
网站路径:https://www.cdcxhl.com/article0/jdopoo.html
成都网站建设公司_创新互联,为您提供软件开发、网站收录、网站设计、网站维护、微信公众号、手机网站建设
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联