您的位置：首页 > Web前端 > JavaScript

使用Javascript实现广告鱼的效果

2010-03-26 22:43 676 查看

实现代码如下：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>广告鱼</title>
<mce:script type="text/javascript"><!--
var isRight=true,isDown=true;  //先设定默认为向右和向下移动
init = function()
{
var timeThread = window.setInterval("move()",10);  // 每10秒调用“move()”方法，并将其赋给一个(线程)变量
document.getElementById("div1").onmouseover = function(){window.clearInterval(timeThread)}; //当鼠标在上时停止这个线程(使用匿名方法)
document.getElementById("div1").onmouseout = function(){timeThread = window.setInterval("move()",10)}; //当鼠标离开时，再每10秒调用“move()”方法，并将其赋给一个(线程)变量
}
move = function()
{
var div1 = document.getElementById("div1");
var minX=minY=0;   //设定最小的X轴和最小的Y轴都为0px
var maxX=document.body.clientWidth-div1.offsetWidth;  //设定层在X轴可移动的最大宽度：浏览器的宽度-层的宽度
var maxY=document.body.clientHeight-div1.offsetHeight;//设定层在Y轴可移动的最大高度：浏览器的高度-层的高度
if(div1.offsetLeft+1>maxX){isRight=false;}  //如果层移动到了最右边的边界位置时，则修改X轴的状态为不能向右了
if(div1.offsetLeft-1<minX){isRight=true;}   //如果层移动到了最左边的边界位置时，则修改X轴的状态为不能向左了
div1.style.left=div1.offsetLeft+1*(isRight==true?1:-1);  //先判断层在X轴的方向是向左(或是右)，再执行+1(或-1)
document.getElementById("img1").src=(isRight==true?"fish1.gif":"fish2.gif");   //鱼头向左或向右
if(div1.offsetTop+1>maxY){isDown=false;} //如果层移动到了最底边的边界位置时，则修改Y轴的状态为不能向下了
if(div1.offsetTop-1<minY){isDown=true;}     //如果层移动到了最顶边的边界位置时，则修改Y轴的状态为不能向上了
div1.style.top=div1.offsetTop+1*(isDown==true?1:-1);  //先判断层在Y轴的方向是向下(或是上)，再执行+1(或-1)
}
window.onload=init;  //页面初始化时绑定(调用)"init()"方法
// --></mce:script>
</head>
<body>
<div id="div1" style="position:absolute" mce_style="position:absolute" >  <!--该广告层一定要先设定为绝对定位-->
<a href="http://571.jjii.net" mce_href="http://571.jjii.net"><img id="img1" style="border:none" mce_style="border:none" src="fish1.gif" mce_src="fish1.gif" /></a>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航