生活随笔
收集整理的這篇文章主要介紹了
js实现图片移动
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
圖片在指定范圍內(nèi)移動(dòng)
圖片在指定范圍內(nèi)移動(dòng)，配上合適和圖片和背景，就可以完成好看的動(dòng)態(tài)頁面。
其實(shí)就是一張貓行走的動(dòng)圖，再配上黃色的背景色。
<body style
="background-color:rgba(255,216,0,1.00)"> <img src
="image/cat1.gif" id
="img1"> <img src
="image/cat.gif" id
="img">
</body
>
將動(dòng)態(tài)圖鏡像反轉(zhuǎn)可以使用GIF Movie Gear這款軟件，打開文件后，動(dòng)畫－旋轉(zhuǎn)－水平翻轉(zhuǎn)
準(zhǔn)備好所需的素材，接下來開始寫方法。
var w
;var img
;var img1
;var imgLeft
;var imgWidth
; var delta
=5 ;var delay
=30;window
.onload
= function(){w
= window
.innerWidth
;img
= document
.getElementById("img");img1
= document
.getElementById("img1");imgLeft
= img
.offsetLeft
;imgWidth
= img
.width
;move();};function
move(){if(imgLeft
<0||imgLeft
+imgWidth
>w
){delta
=-delta
;}img
.style
.left
= imgLeft
+delta
+"px";img1
.style
.left
= imgLeft
+delta
+"px";if(delta
==-5){$
("#img1").css("z-index","100")}else{$
("#img1").css("z-index","0")}imgLeft
= img
.offsetLeft
;setTimeout(move
,delay
);}
首先聲明好所需的變量，在這里我以頁面的寬度為邊界，而offsetLeft則是返回元素的水平偏移位置。
一開始imgLeft值為0，然后隨著setTimeout方法的調(diào)用，圖片開始往右移動(dòng)5px，然后更新imgleft的值，再次調(diào)用方法，圖片的left += 5px。
當(dāng)圖片移動(dòng)到最右邊時(shí)，使移動(dòng)距離變號(hào)，變成-5，這個(gè)時(shí)候就變成了left -= 5，圖片開始從右往左移動(dòng)，然后利用權(quán)重，將圖片顯示到上方。
總結(jié)
以上是生活随笔為你收集整理的js实现图片移动的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。
