首先，設置一個將要飄動的窗口，html代碼如下:

利用js控制span標簽在瀏覽器內移動

var?xPos?=?0;var?yPos?=?0;?var?step?=?1;var?delay?=?10;var?height?=?0;

var?Hoffset?=?0;var?Woffset?=?0;?var?yon?=?0;var?xon?=?0;?var?xon?=?0;?var?interval;

var?img?=?document.getElementById('img');

img.style.top?=?0;

function?changePos(){

width?=??document.documentElement.clientWidth||document.body.clientWidth;

height?=?document.documentElement.clientHeight||document.body.clientHeight;

Hoffset?=?img.offsetHeight;

Woffset?=?img.offsetWidth;

if?(yon)?{

yPos?=?yPos?+?step;

}else?{

yPos?=?yPos?-?step;

}

if?(yPos?

yon?=?1;

yPos?=?0;

}

if?(yPos?>=?(height?-?Hoffset))?{

yon?=?0;

yPos?=?(height?-?Hoffset);

}

if?(xon)?{

xPos?=?xPos?+?step;

}else?{

xPos?=?xPos?-?step;

}

if?(xPos?

xon?=?1;

xPos?=?0;

}

if?(xPos?>=?(width?-?Woffset))?{

xon?=?0;

xPos?=?(width?-?Woffset);

}

img.style.left?=?xPos?+?document.body.scrollLeft+"px";

img.style.top?=?yPos?+?document.body.scrollTop?+"px";

}

function?start()?{

img.visibility?=?'visible';

interval?=?setInterval('changePos()',?delay);

}

function?mystop(){

clearInterval(interval)

}

start()

總結

以上是生活随笔為你收集整理的网页设计图片向上浮动_利用js实现图片在浏览器中飘动（浮动窗口自由移动）效果...的全部內容，希望文章能夠幫你解決所遇到的問題。

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