当前第2页 返回上一页
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <script src= "doMove.js" ></script>
<script>
window.onload = function (){
var img1 = document.getElementById( 'img1' );
img1.onclick = function (){
var pos = parseInt(getStyle(img1, 'left' ));
var arr = [];
var timer = null ;
var num = 0;
for ( var i =20;i>0;i-=2){
arr.push(i,-i);
}
arr.push(0);
clearInterval(timer);
timer = setInterval( function (){
img1.style.left = pos + arr[num] + 'px' ;
num++;
if (num === arr.length){
clearInterval(timer);
}
},50);
}
}
</script>
|
说明:
1、要先引入我们原来封装好的动画函数doMove.js,getStyle()函数就是这个函数里面的函数;
2、parseInt( )是把300px的单位去掉只留数字300;
3、上下抖动,只要把left改为top就可以。
以上就是如何实现图片抖动效果的详细内容,更多文章请关注木庄网络博客!
返回前面的内容
相关阅读 >>
css unicode-bidi属性怎么用
如何去掉css字体的上下空白
css中列表样式是什么
css里图片和文字如何等高
网页中的图片格式应该如何选择
js与css的区别是什么
css如何实现文字外发光效果
css怎么设置4个边框颜色不同
html css js 区别是什么
浅谈css的background背景属性
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » 如何实现图片抖动效果