Javascript应用--浮动的广告图片

最新推荐文章于 2019-08-02 16:21:30 发布

最新推荐文章于 2019-08-02 16:21:30 发布 · 193 阅读

文章标签：

本文介绍了一个使用HTML和JavaScript实现的浮动广告案例。该广告能在网页上自动移动，并且可以通过鼠标悬停停止移动，点击按钮手动移动或者关闭广告。代码详细展示了如何通过设置定时器和监听事件来控制广告元素的位置。

Code:

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>浮动广告</title>
<scripttype="text/javascript">
varx=1,y=1,movex=0,movey=0;
functionmovead()
{
vardivObj=document.getElementById("adid");
movexmovex=movex+x*5;
moveymovey=movey+y*5;
divObj.style.top=movey;
divObj.style.left=movex;
if(movex+divObj.offsetWidth>=document.body.clientWidth)
x=-1;
elseif(movex<=0)
x=1;
if(movey+divObj.offsetHeight>=document.body.clientHeight)
y=-1;
elseif(movey<=0)
y=1;
}
vartimeid;
functionover()
{
clearInterval(timeid);
}
functionout()
{
fly();
}
functionfly()
{
timeid=setInterval("movead()",10);
}
window.onload=function()
{
fly();
}
functionclosead()
{
vardivObj=document.getElementById("adid");
divObj.style.display="none";
over();
}
</script>
</head>
<body>
<inputtype="button"value="手动广告"onclick="movead()"/><br/>
<divid="adid"style="position:absolute;top:0px;left:0px"onmouseover="over()"onmouseout="out()"><ahref="http://www.sss.com.cn"target="_blank"><imgsrc="2.jpg"height="100px"width="150px"/></a><br/>
<ahref="javascript:void(0)"onclick="closead()">关闭</a></div>
<imgsrc="1.jpg"height="600"width="700"border="2"/>
</body>
</html>