JQuery模拟QQ聊天窗口抖动特效(图片抖动)

此代码仅供参考

---

代码说明

图片抖动代码，基于jquery插件实现的一款网页特效，当鼠标点击图片后，图片开始猛烈抖动，有点像震动的感觉，仿QQ聊天窗口抖动特效。

---

html代码

<style> #box {width:400px; height:436px;} </style> <script type="text/javascript"> function convertStyle(obj) { if(obj.length) { for (var i=0; i<obj.length; i++) { obj[i].style.left=obj[i].offsetLeft+'px'; obj[i].style.top=obj[i].offsetTop+'px'; } for (var i=0; i<obj.length; i++) { obj[i].style.position='absolute'; obj[i].style.margin=0; } } else { obj.style.left=obj.offsetLeft+'px'; obj.style.top=obj.offsetTop+'px'; obj.style.position='absolute'; obj.style.margin=0; } } function shake(obj) { var posData=[obj.offsetLeft,obj.offsetTop]; obj.onclick=function() { var i=0; clearInterval(timer); var timer=setInterval(function() { i++; obj.style.left=posData[0]+((i%2)>0?-2:2)+'px'; obj.style.top=posData[1]+((i%2)>0?-2:2)+'px'; if(i>=30) { clearInterval(timer); obj.style.left=posData[0]+'px'; obj.style.top=posData[1]+'px'; } }, 30); } } window.onload=function() { var oBox=document.getElementById('box'); convertStyle(oBox); shake(oBox); } </script> <!-- 抖动代码 开始 --> <div id='box'><img src="http://www.codefans.net/jscss/demoimg/201402/doudong.png" width='400' /></div> <!-- 抖动代码 结束 --> <div style="height:436px;"></div>

---

代码演示

---

---