本文實例講述了JS實現彈性漂浮效果的廣告代碼。分享給大家供大家參考。具體如下：

這里介紹一款JS彈性漂浮廣告代碼，碰到網頁瀏覽器的邊緣就會順著彈力的方向自動漂浮下去，不停的在網頁上漂來漂去，漂浮廣告代碼是很早時候就有的代碼了，使用廣泛，而且做為廣告來說，好像效果還不錯，因為它在不停的動，讓人在視覺上感覺到有一種吸引力。其中的JS代碼你可以扣出來保存在一個單獨的JS文件中，使用時調用即可。

運行效果截圖如下：

在線演示地址如下：

具體代碼如下：

Js彈性漂浮廣告代碼visibility: visible;">

var xPos = 300;

var yPos = 200;

var step = 1;

var delay = 30;

var height = 0;

var Hoffset = 0;

var Woffset = 0;

var yon = 0;

var xon = 0;

var pause = true;

var interval;

img1.style.top = yPos;

function changePos()

{

width = document.body.clientWidth;

height = document.body.clientHeight;

Hoffset = img1.offsetHeight;

Woffset = img1.offsetWidth;

img1.style.left = xPos + document.body.scrollLeft;

img1.style.top = yPos + document.body.scrollTop;

if (yon)

{yPos = yPos + step;}

else

{yPos = yPos - step;}

if (yPos < 0)

{yon = 1;yPos = 0;}

if (yPos >= (height - Hoffset))

{yon = 0;yPos = (height - Hoffset);}

if (xon)

{xPos = xPos + step;}

else

{xPos = xPos - step;}

if (xPos < 0)

{xon = 1;xPos = 0;}

if (xPos >= (width - Woffset))

{xon = 0;xPos = (width - Woffset); }

}

function start()

{

img1.visibility = "visible";

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

}

function pause_resume()

{

if(pause)

{

clearInterval(interval);

pause = false;}

else

{

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

pause = true;

}

}

start();

希望本文所述對大家的javascript程序設計有所幫助。

總結

以上是生活随笔為你收集整理的html网页漂浮广告原理js,JS实现弹性漂浮效果的广告代码的全部內容，希望文章能夠幫你解決所遇到的問題。

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