原生js實現圖片抖動效果
阿新 • • 發佈：2017-12-24
int clear 停止 動效 null scrip log 定時 實現
今天來寫一個關於圖片抖動的效果，需求是：點擊圖片，讓其抖動幾下停止（類似於蘋果手機填錯密碼之後會抖一下的效果），其實想要實現這個效果，原理就是，點擊之後，讓其左移動下然後右移動一下（每移動一下減幾像素知道減到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");
這樣就實現了點擊一下圖片，圖片將會抖動幾下慢慢停下了。抖動原理其實就是元素的自動左右移動，所以一定要用到setInterval。可以試一下哦！
好了，今天就這樣了！
原生js實現圖片抖動效果