日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔！

生活随笔

當前位置： 首頁 > 编程资源 > 编程问答 >内容正文

编程问答

js实现图片移动

發布時間：2023/12/18 编程问答 24 豆豆
生活随笔 收集整理的這篇文章主要介紹了 js实现图片移动 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

圖片在指定范圍內移動

圖片在指定范圍內移動，配上合適和圖片和背景，就可以完成好看的動態頁面。


其實就是一張貓行走的動圖，再配上黃色的背景色。

<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>

將動態圖鏡像反轉可以使用GIF Movie Gear這款軟件，打開文件后，動畫－旋轉－水平翻轉
準備好所需的素材，接下來開始寫方法。

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方法的調用，圖片開始往右移動5px，然后更新imgleft的值，再次調用方法，圖片的left += 5px。

當圖片移動到最右邊時，使移動距離變號，變成-5，這個時候就變成了left -= 5，圖片開始從右往左移動，然后利用權重，將圖片顯示到上方。

總結

以上是生活随笔為你收集整理的js实现图片移动的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。