<!doctype html> <html> <head> <meta charset="utf-8"> <title> jQuery弹性运动</title> <script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script> // JavaScript Document (function($){ $.fn.moveTx=function(json) { var i=0; for(i=0;i<this.length;i++)//重要 { startMove(this[i],json); } function getStyle(obj, attr) { if(obj.currentStyle) { return obj.currentStyle[attr]; } else { return getComputedStyle(obj, false)[attr]; } } var iSpeed=0; var iTget=0; function startMove(obj,json) { clearInterval(obj.timer); obj.timer=setInterval(function (){ for(var attr=0 in json) { iSpeed+=(json[attr]-parseInt(getStyle(obj, attr)))/5; iSpeed*=0.7; iTget+=iSpeed; if(Math.abs(iSpeed)<1 && Math.abs(iTget-json[attr])<1) { clearInterval(obj.timer); obj.style[attr]=json[attr]+'px'; } else { obj.style[attr]=iTget+'px'; } } }, 30); } }})(jQuery) $(function(){ var oDiv=$('#zgz') oDiv.click(function(){ $(this).moveTx({left:500}) }) }) </script> <style> #zgz{ width:80px; height:80px; background-color:#f00;position:absolute; left:0px; top:20px; color:#fff; padding:10px;} #xt{ width:1px; height:500px; background-color:#000; position:absolute; left:500px; top:0px;} </style> </head> <body> <div>弹性运动</div> <div></div> </body> </html>
运行效果：
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》