js實現圖片浮動的效果
阿新 • • 發佈：2019-02-19
利用js中的window物件，實現的一個圖片浮動的效果
思路：首先要有一個div來供圖片使用，這個div將成為我們控制圖片的區域，它在網頁中的起始座標為（0，0）；
其次，我們要設定圖片在座標軸上的執行速度，即橫向（x）的執行速度和縱向（y）的執行速度；
最後我們著重來控制圖片即div的移動：
需要考慮到的是：1）圖片是否到達了邊界；
2）如果達到了邊界，則需要將其速度設定為反方向移動
<html> <head> <title>圖片浮動</title> <style> div{ position:absolute; } </style> </head> <body> <div id="img"> <img scr="圖片的地址" width=圖片的寬 height=圖片的高> </div> <script --------> //獲取圖片的物件 var document.getElementById("img"); //設定圖片的起始點座標 var x=0,y=0; //設定圖片的行進速度 var xSpeed=5; //橫座標的行進速度 var ySpeed=5; //縱座標的行進速度 //設定圖片的最大移動範圍 var w=document.body.clientWidth-圖片的寬度; //橫向移動的最大範圍 var h=document.body.clientHeight-圖片的高度; //縱向移動的最大範圍 function floatimg(){ //判斷圖片是否達到了邊界 //1、如果達到了,那我們就改變圖片的方向 if(x>w||x<0) xSpeed=-xSpeed; if(y>h||y<0) ySpeed=-ySpeed; //2、如果沒有達到，設定座標值為 起始座標+速度 x+=xSpeed; y+=ySpeed; //使圖片按規定座標移動 img.style.left=x+"px"; img.style.top=y+"px"; //設定圖片移動的時間間隔 setTimeout("floatimg()",1000); } floatimg(); </script> </body> </html>