JQuery plugin to implement an elastic motion complete example

The example of this paper tells the method of achieving elastic motion in jQuery plug-in. Share to everyone for reference, specifically:

    www.jb51.net jQuery elastic movement    // JavaScript document (Function {$ .fn.movetx = function (json) {var i = 0; for (i = 0; i   # Zgz {Width: 80px; Height: 80px; Background-Color: # f00; Position: absolute; left: 0px; Top: 20px; color: #fff; padding: 10px;} # {width: 1px; height: 500px; Background-color: # 000; Position: Absolute; Left: 500px; Top: 0px;}   <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})
  })
})
     
More about jQuery related content, readers, interested, can view this station: “jQuery Switching effects and skill summary “JQuery selector usage summary”

I hope this article will help you jQuery program design.

© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment