滚动广告条

滚动广告：

如何实现广告图片在固定位置不动？

1，使用固定位

2，使用计算然后通过滚动事件来每时每刻的给图片新的top和left值

总体的思想就是，先计算初始的图片距离窗口边框的距离，在计算窗口滚动时的滚动距离，然后将两个值相加，并通过滚动事件将总和的值赋给图片的样式style，这样就可以让图片一直保持在我们的窗口视野的固定位置

（还要注意浏览器的兼容问题，IE是标准浏览器，Google是特殊浏览器）

<div id="close" onClick="adv_close()"><img src="images/close.jpg"></div>

//这就是需要悬浮的图片
<div id="float"><img src="images/advpic.jpg"></div>
<div id="main"><img src="images/contentpic.jpg"></div>
</body>
<script>
   /*获得容器对象*/
   var tv_float = document.getElementById("float")
   /*左边边距*/
   var adv_left ;
   /*上边边距*/
   var adv_top ;

   function init(){
      /*判断是那种浏览器，是标准（IE）还是谷歌*/
      if(tv_float.currentStyle){
         /*标准*/
         adv_top = parseInt(tv_float.currentStyle.top)
         adv_left = parseInt(tv_float.currentStyle.left)
      }else{

        //这里的调用时document开头的
         adv_top = parseInt(document.defaultView.getComputedStyle(tv_float,null).top)
         adv_left =parseInt(document.defaultView.getComputedStyle(tv_float,null).left)
      }
   }
   function move(){
      /*计算窗口滚动的距离*/
      var advNewTop = parseInt(document.documentElement.scrollTop||document.body.scrollTop)
      var advNewLeft= parseInt(document.documentElement.scrollLeft||document.body.scrollLeft)

      /*将初始值和滚动值相加并赋给图片样式*/
      /*赋样式*/
      tv_float.style.top=(adv_top+advNewTop)+"px"
      tv_float.style.left=(adv_left+advNewLeft)+"px"
   }
   /*窗口加载完毕就计算初始值*/
   window.onload= init;
   /*窗口滚动就计算滚动值并赋新的样式*/
   window.onscroll = move;
</script>

猜你喜欢