今天来写一个关于图片抖动的效果，需求是：点击图片，让其抖动几下停止（类似于苹果手机填错密码之后会抖一下的效果），其实想要实现这个效果，原理就是，点击之后，让其左移动下然后右移动一下（每移动一下减几像素知道减到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。可以试一下哦！
好了，今天就这样了！
时间： 2024-10-11 15:50:02