码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2014-07-06 17:42:41      阅读:159      评论:0      收藏:0      [点我收藏+]

标签:style   java   width   os   art   cti   

<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>
 <!--当position:absolute广告只会在绝对的位置上移动,当滚动条滚动到下面去的时候广告就看不到了,如果position:fixed广告会在相对的位置上移动,不管滚动条滚动到哪个地方都可以看到广告移动-->
 <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>

制作浮动广告,实现浮动高中在屏幕中来回走动,布布扣,bubuko.com

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

标签:style   java   width   os   art   cti   

原文地址:http://www.cnblogs.com/danmao/p/3825162.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!