网页浮动广告源代码

最新推荐文章于 2025-05-02 13:54:35 发布

thomasking

最新推荐文章于 2025-05-02 13:54:35 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： border div

本文链接：https://blog.youkuaiyun.com/thomasking/article/details/2337156

JavaScript 专栏收录该内容

4 篇文章

订阅专栏

这段代码展示了如何使用JavaScript创建一个浮动广告。通过设置`div`元素的位置并利用定时器不断更新其坐标，使广告在页面中浮动。广告包含一个链接和图片，且能根据页面滚动进行位置调整。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

document.write("<div id='ad' style='height:80px;left:80px;position:absolute;top:80px;width:80px'><a href='广告链接地址' target='_blank'><img src='广告图片地址' border='0'></a></div>");

var xPos = 20;
var yPos = 20;
var step = 1;
var height = 0;
var Hoffset = 0;
var Woffset = 0;
var yon = 0;
var xon = 0;
var interval;

function mymove()
{
var width = document.documentElement.clientWidth;
var height = document.documentElement.clientHeight;
var scrollTop = document.documentElement.scrollTop;
var scrollLeft = document.documentElement.scrollLeft;
var Hoffset = ad.offsetHeight;
var Woffset = ad.offsetWidth;

ad.style.left = xPos + scrollLeft;
ad.style.top = yPos + 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);
}

interval = setTimeout("mymove();",30)
}

mymove();