本文实例讲述了 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 选择器用法总结
来源: http://www.jb51.net/article/135086.htm