jQuery插件之-----弹性运动

浏览数：28 / 时间：2015年06月09日

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>弹性运动</title>

<script type="text/javascript" src="images/jquery-1.11.1.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>