2016-06-01 jitter

1. Click on the image to achieve jitter

    <script src= "Js/domoveandgetstyle.js" ></script> <script> window.onload=function () {            var img = document.getElementById ("img"); var arr=[];//20-20 18-18 ... 0 Var num=0;//operation Array, generally to use the subscript var timer=null;//cancellation timer with var postion=getstyle (IMG, ' left ');//Get            The current position of the IMG for (var i=20; i>0; i-=2) {Arr.push (i,-i); }//alert (arr)//20-20 18-18 ... 0 img.onclick=function () {//Click on the Picture trigger timer timer=setinterval (function () {Img.style.                    left=postion+arr[num]+ ' px ';                    num++;                    if (num==arr.length) {//If to the end of the array, clear the timer clearinterval (timer);            }},50); }} </script>
2. Domoveandgetstyle.js
/** * Created by Ckang on 2016/6/1.*/functionDomove (obj,attr,steplength,target,animationvelocity) {steplength= (GetStyle (obj,attr) <target?steplength:-steplength);//If obj is in a position smaller than the target position, the step takes a positive number, and the inverse takes a negative numberclearinterval (Obj.timer); Odiv.timer=setinterval (function(){        varSpeed =getstyle (obj,attr) +steplength;//Step Size        if(Speed>target && steplength>0 | | speed<target && steplength<0) { speed=Target; } Obj.style[attr]=speed+ ' px ';//move steplength px every animationvelocity seconds        if(Speed==target) {//Stop Movingclearinterval (Obj.timer); }},animationvelocity);}functionGetStyle (obj,attr) {//why parseint (), because Obj.currentstyle[attr] got the 30px-->30 get the value of the attribute of the element such as position information    returnparseint (Obj.currentstyle?Obj.currentstyle[attr]:getcomputedstyle (obj) [attr]);}
2016-06-01 jitter