本文實例講述了jQuery插件實現彈性運動的方法。分享給大家供大家參考，具體如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>www.jb51.net jQuery彈性運動</title>
<script src="http://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 id="zgz">彈性運動</div>
<div id="xt"></div>
</body>
</html>
運行效果：
更多關于jQuery相關內容感興趣的讀者可查看本站專題：《jQuery切換特效與技巧總結》、《jQuery擴展技巧總結》、《jQuery常用插件及用法總結》、《jQuery拖拽特效與技巧總結》、《jQuery常見經典特效匯總》、《jQuery動畫與特效用法總結》及《jquery選擇器用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
