浮动的广告

最新推荐文章于 2021-12-03 23:45:51 发布

紫露love

最新推荐文章于 2021-12-03 23:45:51 发布

阅读量733

点赞数

分类专栏： JavaScript

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/javazilu/article/details/70239937

版权

JavaScript 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script>
//浮动广告的初始值
var left ; //x轴的值
var top ; //y轴的值

var step=1; //移动的距离
var delay=10; //移动的时间间隔

var xin = true,yin = true; //xin为真，则向右移动，否则向左移动 yin为真，则向下移动，否则向上移动

function move(){
    left = parseInt(Layer1.style.left);
top = parseInt(Layer1.style.top);
    var L=T=0;    //L为左边界，T为上边界
var R = (document.body.offsetWidth)-(document.getElementByIdx_x("Layer1").offsetWidth);   //层移动的右边界
var B = (document.body.offsetHeight)-(document.getElementByIdx_x("Layer1").offsetHeight);
//层移动的下边界
left=left+step*(xin?1:-1);   //判断水平方向
if(left<L){xin=true;left=L;}   //到达边界后的处理
if(left>R){xin=false;left=R;}
top=top+step*(yin?1:-1);
if(top<T){yin=true;top=T;}
if(top>B){yin=false;top =B;}
document.getElementByIdx_x("Layer1").style.left = left;
document.getElementByIdx_x("Layer1").style.top = top;
setTimeout("move()",delay)    //隔delay时间段调用一次
}
function hiddendiv(){    //关闭漂浮的广告
Layer1.style.display="none";
}
</script>

</head>

<body onLoad="move()">
<div id="Layer1" style="position:absolute;
width:150px;
height:200px;
z-index:1;
background-image: url(1.jpg);
left: 68px;
top: 30px;">
<div id="Layer2" style="position:absolute;
left:115px;
top:171px;
width:22px;
height:19px;
z-index:2;
background-color: #FFFFFF;" onClick="hiddendiv()"></div>
</div>

<p><img src="taobao-con.jpg" width="956" height="533" /><img src="taobao-con.jpg" width="956" height="533" /><img src="taobao-con.jpg" width="956" height="533" /> </p>
</body>
</html>

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
浮动的广告

http://www.w3.org/1999/xhtml"><meta http-equiv="Content-Type" content="text/html;charset=gb2312" />无标题文档//浮动广告的初始值var left ; //x轴的值var top ; //y轴的值var step=1; //移动的距离var delay=10;
复制链接

扫一扫

专栏目录

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。