本文實例講述了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>
另外有需要云服務器可以了解下創新互聯scvps.cn,海內外云服務器15元起步,三天無理由+7*72小時售后在線,公司持有idc許可證,提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業上云的綜合解決方案,具有“安全穩定、簡單易用、服務可用性高、性價比高”等特點與優勢,專為企業上云打造定制,能夠滿足用戶豐富、多元化的應用場景需求。
新聞名稱:jQuery插件實現彈性運動完整示例-創新互聯
標題URL:http://vcdvsql.cn/article34/ddgdse.html
成都網站建設公司_創新互聯,為您提供品牌網站設計、企業建站、網站營銷、定制開發、面包屑導航、云服務器
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯