javascript页面浮动

最新推荐文章于 2022-08-24 21:41:38 发布

原创最新推荐文章于 2022-08-24 21:41:38 发布 · 688 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #float #function #delay #border

javascript 专栏收录该内容

4 篇文章

订阅专栏

本文探讨了如何使用JavaScript实现动态浮动广告的功能，包括广告的动态定位、大小调整及与页面滚动的交互，旨在提升用户体验和网站的视觉吸引力。

<div style="z-index: 99; position: absolute; left: 439px; top: -210px; " id="float_AD" onmouseover="stop();" onmouseout="start();"><img border="0" src="./images/20120426-51.jpg"><img src="./images/gif-x.gif" onclick="hide();" style="CURSOR:hand;"></div>
<script>
var xPos = 80;
var yPos = 60;
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;
function hide(){
var div=document.getElementById("float_AD");
div.style.display="none";
div.onmouseout= function(){div.style.visibility = "hidden"; }
}
//img1.style.top = yPos;
function changePos()
{
width = document.body.clientWidth;
height = document.body.clientHeight;

var ad = document.getElementById("float_AD");
Hoffset = ad.offsetHeight;
Woffset = ad.offsetWidth;
ad.style.left = (xPos + document.body.scrollLeft)+"px";
ad.style.top = (yPos + document.body.scrollTop)+"px";

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()
{
var ad = document.getElementById("float_AD");

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

start();
function stop(){
var ad = document.getElementById("float_AD");

clearInterval(interval);
}
</script>