原生js解决倒计时结束图片抖动之后移动消失的效果
标题看着复杂其实需求就是：一张图片在一段时间倒计时结束之后，先抖动一下然后向下移动消失。不明白什么意思的可以看下图解释：
直接来看布局代码，直接把布局以及css都写在一起了：
<style> #img{position:absolute;left:15px;top:80px;} #time{width:150px; opacity:100;} #djs{font-size:14px;color:#999} </style> <body> <input id="time" type="text" value="January 3,2018 20:00:00"/> <input id="btn" type="button" value="确定" /> <p id="djs">剩余0天0时0分0秒</p> <img id="img" width="180" src="img/pic2.jpg"/> </body>
分析：
想要实现上图的结果那么需要四个js效果组合实现：
第一是先要有一个倒计时，然后将具体倒计时间显示出来；
第二是图片需要抖动几下的；
第三就是图片抖动之后向一个方向移动固定像素；
第四就是让其慢慢消失（透明度降低）
来看js代码：
<script> window.onload=function(){ var oImg=document.getElementById("img"); var oTime=document.getElementById("time"); var oBtn=document.getElementById("btn"); var oDjs=document.getElementById("djs"); var timer=""; var moves=""; var cleary=""; var iNow = null; var iNew = null; var t=0; var len = 20; var num=0; //添加点击事件 oBtn.onclick=function(){ iNew=new Date(oTime.value); clearInterval( timer ); timer=setInterval(function(){ iNow = new Date(); t = Math.floor( ( iNew - iNow ) / 1000 ); if ( t > 0 ) {//这个时间差要么大于或者等于0，不可能为负值 str = Math.floor(t/86400)+'天'+Math.floor(t%86400/3600)+'时'+Math.floor(t%86400%3600/60)+'分'+t%60+'秒'; oDjs.innerHTML = str; }else if(t == 0){ str = Math.floor(t/86400)+'天'+Math.floor(t%86400/3600)+'时'+Math.floor(t%86400%3600/60)+'分'+t%60+'秒'; oDjs.innerHTML = str; shake(oImg,'left',function(){ moves = setInterval( function (){ doMove( oImg, 'top', 23, 500,function(){ cleary=setInterval(function(){ opacity(oImg,-0.1,0) },100) }); num ++; if ( num === len ) { clearInterval( timer ); } }, 100 ); }); }else{ clearInterval( timer ); } },1000) }; //抖动效果的代码封装 function shake(obj,attr,endFn){ var pos=parseFloat(getStyle(obj,attr)); var arr=[]; var num=0; var sha=null; //抖动频率de数组，一正一负[20,-20,18,-18...] for(var i=20;i>0;i-=2){ arr.push(i,-i) } arr.push(0); //启用定时器前先关闭定时器 clearInterval(obj.sha); obj.sha=setInterval(function(){ //让图片的left跟随数组里的值变化就会实现左右移动效果 obj.style[attr]=pos+arr[num]+"px"; num++; if(num===arr.length){ clearInterval(obj.sha); endFn && endFn(); } },50) } //元素向下移动（掉下来）的效果封装 function doMove ( obj, attr, dir, target, endFn ) { dir = parseInt(getStyle( obj, attr )) < target ? dir : -dir; clearInterval( obj.move ); obj.move = setInterval(function () { var speed = parseInt(getStyle( obj, attr )) + dir; // 步长 if ( speed > target && dir > 0 || speed < target && dir < 0 ) { speed = target; } obj.style[attr] = speed + 'px'; if ( speed == target ) { clearInterval( obj.move ); endFn && endFn(); } }, 30); } //透明度的封装 function opacity(obj,dir,target){ clearInterval( obj.clarity ); obj.clarity = setInterval(function () { var speed =parseFloat(getStyle( obj, "opacity" ))+ dir; if ( speed < target) { clearInterval( obj.clarity ); }else { obj.style.opacity=speed; } }, 30); } }; //兼容不同浏览器获取行间样式 function getStyle ( obj, attr ) { return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle( obj )[attr]; } </script>
以上便是这个效果的实现js代码，其实关于抖动然后向下移动以及降低透明的js效果，我已经简单封装了一下，主要为上面代码调用方便，也是为了多组效果的话调用方便，若是不想让其都在一个js里，可也以把这三组js效果专门写一个js文件然后就像引用外部js一样引用进来即可！
当然这里只是我的简单实现的方法，你也可以把代码复制下来试一试哦！当然一定要注意路径！
好了，今天就到这里！有问题欢迎修改指正！
