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

最新推荐文章于 2020-07-13 13:00:41 发布

wind瑞

最新推荐文章于 2020-07-13 13:00:41 发布

阅读量987

点赞数

分类专栏： javascript 文章标签： javascript border function

本文链接：https://blog.csdn.net/windrui/article/details/6516513

版权

6 篇文章 0 订阅

订阅专栏

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>浮动广告</title>
<script type="text/javascript">
var x = 1,y = 1,movex = 0,movey = 0;
function movead()
{
var divObj = 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;
else if(movex<=0)
x = 1;
if(movey+divObj.offsetHeight>=document.body.clientHeight)
y = -1;
else if(movey <=0)
y = 1;
}
var timeid;
function over()
{
clearInterval(timeid);
}
function out()
{
fly();
}
function fly()
{
timeid = setInterval("movead()",10);
}
window.onload = function()
{
fly();
}
function closead()
{
var divObj = document.getElementById("adid");
divObj.style.display = "none";
over();
}
</script>
</head>
<body>
<input type="button" value="手动广告" onclick="movead()" /><br />
<div id="adid" style="position:absolute; top:0px; left:0px" onmouseover="over()" onmouseout="out()"><a href="http://www.sss.com.cn" target="_blank"><img src="2.jpg" height="100px" width="150px" /></a><br/>
<a href="javascript:void(0)" onclick="closead()">关闭</a></div>
<img src="1.jpg" height="600" width="700" border="2" />
</body>
</html>

关注

专栏目录