制作浮动广告，实现浮动高中在屏幕中来回走动

最新推荐文章于 2025-09-06 08:01:57 发布

lceBear

最新推荐文章于 2025-09-06 08:01:57 发布

阅读量171

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/danmao/p/3825162.html

本文介绍了使用JavaScript创建一个能够动态移动的网页广告，通过设置移动方向和距离，广告可以在页面上实现平滑的左右上下移动，同时通过定时器实现自动循环移动。文章详细解释了代码实现原理及关键步骤。

<script language="javascript" type="text/javascript">

var x=1;//1表示向右移动，0表示向左移动
var y=1;//1表示向下移动，0表示向上移动
function showDiv(){
  var adv = document.getElementById("floatDiv");
  if(x==1){
   adv.style.pixelLeft = adv.style.pixelLeft+3;
  }else{
   adv.style.pixelLeft = adv.style.pixelLeft-3;
  }
  //如果广告移动到了最右端
  if(document.documentElement.clientWidth-adv.style.pixelLeft<adv.style.pixelWidth){
   x=0;
  }
  //如果广告移动到了最左端
  else if(adv.style.pixelLeft<0){
   x=1;
  }


  if(y == 1){
   adv.style.pixelTop =adv.style.pixelTop+3;
  }else{
   adv.style.pixelTop =adv.style.pixelTop-3;
  }
  if(document.documentElement.clientHeight!=0){
   //如果广告移动到最底端
   if(document.documentElement.clientHeight-adv.style.pixelTop<adv.style.pixelHeight){
    y=0;
   }
   //如果广告移动到最顶端
   else if(adv.style.pixelTop<0){
    y=1;
   }
  }
}
var t = window.setInterval("showDiv()",20);
//广告停止移动
function stopAdv(){
  window.clearInterval(t);
}
//广告继续移动
function startAdv(){
  t = window.setInterval("showDiv()",20);
}
//隐藏广告
function closeDiv(){
  document.getElementById("floatDiv").style.display="none";
}
</script>

<body>

<div id="floatDiv" style="width:80px;height:72px; position:fixed; top:100px" onmouseover="stopAdv()" onmouseout="startAdv()">
    <img src="image/float.gif"/><br />
    <input type="button" value="关闭" onclick="closeDiv()"/>
    </div>

</body>

转载于:https://www.cnblogs.com/danmao/p/3825162.html

评论

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

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

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