使用JS實現圖片的飄浮運動
阿新 • • 發佈：2018-11-02
首先貼上準備飄浮的圖片鎮樓：PUBG
下面準備讓這張圖片在螢幕裡面進行飄浮運動，先貼上HTML和CSS程式碼和執行圖：
<html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /*懸浮框 */ #float { position: absolute; z-index: 1; } /*圖片大小*/ #floatImg { width: 250px; height: 150px; } </style> </head> <body> <div id="float"><img id="floatImg" alt="圖片未找到" src="img/pubg.jpg"></div> </body> </html>
介紹一下我的思路，設定6個全域性變數，分別記錄圖片在X軸、Y軸上的移動距離、方向以及速度，接著進行圖片的位置改變方法，在方法中， 我們首先得到螢幕的大小和照片的大小，設定圖片的起始位置，接著進行位置的移動，移動過後再判斷圖片是否遇到四周牆壁，如果遇到，使其移動方向進行改變，並且移動距離根據其位置的不同設定其為0或者最大移動數(螢幕大小-圖片大小)，最後設定一個定時器使其相隔50毫秒進行一次方法執行。這樣，飄浮的圖片效果就做出來了。
下面附上JS程式碼進行參考學習：
//定義全域性變數 var moveX = 0; //X軸方向上移動的距離 var moveY = 0; //Y軸方向上移動的距離 var stepX = 5; //圖片X軸移動的速度 var stepY = 6; //圖片Y軸移動的速度 var directionX = 0; //設定圖片在X軸方向上的移動方向 0:向右 1:向左 var directionY = 0; //設定圖片在Y軸方向上的移動方向 0:向下 1:向上 function changePos() { var img = document.getElementById("float"); //獲得圖片所在層的ID var height = document.documentElement.clientHeight; //瀏覽器的高度 var width = document.documentElement.clientWidth; //瀏覽器的寬度 var imgHeight = document.getElementById("floatImg").height; //飄浮圖片的高度 var imgWidth = document.getElementById("floatImg").width; //瓢浮圖片的寬度 //設定飄浮圖片距離瀏覽器左側位置 img.style.left = parseInt(moveX + document.documentElement.scrollLeft) + "px"; //設定飄浮圖片距離瀏覽器右側位置 img.style.top = parseInt(moveY + document.documentElement.scrollTop) + "px"; //設定圖片在Y軸上的移動規律 if(directionY == 0) { //飄浮圖片在Y軸方向上向下移動 moveY += stepY; } else { //飄浮圖片在Y軸方向上向上移動 moveY -= stepY; } if(moveY < 0) { //如果飄浮圖片飄浮到頂端的時候，設定圖片在Y軸方向上向下移動 directionY = 0; moveY = 0; } if(moveY > (height - imgHeight)) { //如果飄浮圖片飄浮到瀏覽器底端的時候，設定圖片在Y軸方向上向上移動 directionY = 1; moveY = (height - imgHeight); } //設定圖片在X軸上的移動規律 if(directionX == 0) { moveX += stepX; } else { moveX -= stepX; } if(moveX < 0) { //如果飄浮圖片飄浮到瀏覽器左側的時候，設定圖片在X軸方向上向右移動 directionX = 0; moveX = 0; } if(moveX > (width - imgWidth)) { //如果飄浮圖片飄浮到瀏覽器右側的時候，設定圖片在X軸方向上向左移動 directionX = 1; moveX = (width - imgWidth); } } setInterval("changePos()", 50);