日韩精品成人无码专区免费-国产99久久久久久免费看-国产精品丝袜久久久久久不卡-国产精品无码一区二区三区

如何實現(xiàn)圖片抖動效果

發(fā)布時間:2025-04-16 點擊:49
需求:點擊圖片時,圖片會左右抖動,也可以上下抖動。
具體代碼如下:
(推薦教程:css教程)
html:
<img src="./img/19.jpg" alt="" id="img1">css:
img { position: absolute; top: 200px; left: 300px;}js:
<script src="domove.js"></script><script> window.onload = function(){ var img1 = document.getelementbyid('img1'); img1.onclick = function(){ // 先獲得img1的原來left值,在此基礎(chǔ)上進行抖動;parseint()是把300px的單位去掉只留數(shù)字 var pos = parseint(getstyle(img1,'left')); var arr = [];//20,-20,18,-18,16,-16,...存放抖動的頻率 var timer = null;//開啟定時器 var num = 0;//一般只要有數(shù)組,那么必定有數(shù)字跟著變化;數(shù)組的第0個,第1個... for(var i =20;i>0;i-=2){//左右抖動的幅度第一次為20px,然后減2 arr.push(i,-i); } arr.push(0); // alert(arr);//測試一下 // 有抖動的頻率之后,要開啟定時器讓它進行抖動 clearinterval(timer);//開啟定時器之前要先把定時器關(guān)閉,防止連續(xù)多次點擊 timer = setinterval(function(){ img1.style.left = pos arr[num] 'px';//原來的位置pos,加上數(shù)組中每一個數(shù)字 num ; if(num === arr.length){//如果數(shù)字等于數(shù)組的長度(就是全部抖完了),關(guān)閉定時器 clearinterval(timer); } },50); } }</script>說明:
1、要先引入我們原來封裝好的動畫函數(shù)domove.js,getstyle()函數(shù)就是這個函數(shù)里面的函數(shù);
2、parseint( )是把300px的單位去掉只留數(shù)字300;
3、上下抖動,只要把left改為top就可以。

如題為何訪問不了麻煩幫忙解決
網(wǎng)站上線后一直沒收錄怎么辦
域名有備案號在接入的時候總提示沒有備案號
云虛擬主機過期會怎樣
華煜網(wǎng)站無法訪問-虛擬主機/數(shù)據(jù)庫問題
在seo中,鏈接誘餌已經(jīng)成為一種方式了
快遞暫行條例獲通過 冒領(lǐng)、私自開拆屬于非法行為罰款5萬起
域名可以自己注冊嗎