CSS code:
<style type= "Text/css" > #div1 {width:200px; height:200px; background-color:orange; border:solid 5px #f0f0f0; Position:absolute; left:600px; top:200px;} </style>
JS Code:
<script type= "Text/javascript" >window.onload=function () {var Odiv=document.getelementbyid (' Div1 '); Odiv.onclick=function () {Shake (Odiv, ' left '); }}//Package Jitter method function Shake (obj,attr) {var arr=[]; var timer=null; var num=0; var pos=parseint (GetStyle (obj,attr)); The frequency of jitter is achieved by the array for (Var i=20;i>0;i-=2) {Arr.push (i,-i); } arr.push (0); Set timer to implement Jitter Clearinterval (timer); Timer=setinterval (function () {obj.style[attr]=pos+arr[num]+ ' px '; num++; if (num==arr.length) {clearinterval (timer); }},20)}//gets the Element property method function GetStyle (obj,attr) {return Obj.currentstyle?obj.currentstyle[attr]:getcomputedstyle (obj , null) [attr];} </script>
Html:
<body><div id= "Div1" ></div></body>
JavaScript hint Jitter Implementation method