滚动广告条

滚动广告:

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

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.οnlοad= init;
  
/*窗口滚动就计算滚动值并赋新的样式*/
  
window.onscroll = move;
script>

你可能感兴趣的:(滚动广告条)