今天来写一个关于图片抖动的效果,需求是:点击图片,让其抖动几下停止(类似于苹果手机填错密码之后会抖一下的效果),其实想要实现这个效果,原理就是,点击之后,让其左移动下然后右移动一下(每移动一下减几像素知道减到0),然后将其放入定时器内,让其慢慢自动停下来。来看代码布局:
<style> #img{position:absolute;left:30px;} </style> <body> <!--需求:点击图片,图片会抖动几下--> <img id="img" width="180" src="img/pic4.jpg"/> </body>
接下来就是js的实现:
<script> //兼容不同浏览器获取行间样式 function getStyle ( obj, attr ) { return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle( obj )[attr]; } window.onload=function(){ //第一步先追加多个div var oImg=document.getElementById("img"); //添加点击事件 oImg.onclick=function(){ //先获取图片自身所在的left值 var pos=parseFloat(getStyle(oImg,"left")); var arr=[]; var num=0; var timer=null; //抖动频率de数组,一正一负[20,-20,18,-18...] for(var i=20;i>0;i-=2){ arr.push(i,-i) } arr.push(0); //启用定时器前先关闭定时器 clearInterval(timer); timer=setInterval(function(){ //让图片的left跟随数组里的值变化就会实现左右移动效果 oImg.style.left=pos+arr[num]+"px"; num++; if(num===arr.length){ clearInterval(timer); } },50) }; }; </script>
这样就实现了点击一下图片,图片将会抖动几下慢慢停下了。抖动原理其实就是元素的自动左右移动,所以一定要用到setInterval。可以试一下哦!
好了,今天就这样了!