jQuery插件實現彈性運動完整示例

2019-11-19 13:32:00

字體：大中小

來源：轉載

供稿：網友

本文實例講述了jQuery插件實現彈性運動的方法。分享給大家供大家參考，具體如下：

<!doctype html><html><head><meta charset="utf-8"><title>www.49028c.com 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>

運行效果：