JavaScript漂浮广告代码

最新推荐文章于 2022-03-27 14:57:59 发布

最新推荐文章于 2022-03-27 14:57:59 发布 · 153 阅读

文章标签：

#java #工作

java 专栏收录该内容

134 篇文章

订阅专栏

本文详细介绍了如何使用HTML、CSS和JavaScript实现并优化浮动广告的功能，包括初始位置设定、移动控制、事件监听等关键步骤。

<html>
<head>
<title>漂浮广告</title>

</head>
<body>
<div id="tip" style="position:absolute">
<img src=234.jpg border="0" width="250" height="100">
</div>

<script>
var x = 50,y = 60
var xin = true, yin = true
var step = 1
var delay = 10
var obj=document.getelementbyid("tip")
function floattip() {
var l=t=0
var r= document.body.clientwidth-obj.offsetwidth
var b = document.body.clientheight-obj.offsetheight
obj.style.left = x + document.body.scrollleft
obj.style.top = y + document.body.scrolltop
x = x + step*(xin?1:-1)
if (x < l) { xin = true; x = l}
if (x > r){ xin = false; x = r}
y = y + step*(yin?1:-1)
if (y < t) { yin = true; y = t }
if (y > b) { yin = false; y = b }
}
var itl= setinterval("floattip()", delay)
obj.onmouseover=function(){clearinterval(itl)}
obj.onmouseout=function(){itl=setinterval("floattip()", delay)}
</script>

</body>
</html>

var x = 50,y = 60 //浮动层的初始位置，分别对应层的初始x坐标和y坐标
var xin = true, yin = true //判断层的x坐标和y坐标是否在在控制范围之内，xin为真是层向右移动，否则向左；yin为真是层向下移动，否则向上
var step = 1 //层移动的步长，值越大移动速度越快
var delay = 10 //层移动的时间间隔,单位为毫秒，值越小移动速度越快