任务视频V2.0

任务视频V1.0

知识点

获取样式属性值

在CSS中可以使用样式为每个元素设置位置，同样，在HTML DOM的style对象中也有对应的元素定位属性。在style对象中的Positioning属性如表。                       

1.内联样式：在JavaScript中，使用“HTML元素.style.样式属性”的方式只能获取内联样式的属性值，无法获取内部样式表或外部样式表中的属性值；

2.IE浏览器：使用currentStyle可以获取样式属性的值，

3.chrome、fireFox:使用getComputedStyle()方法，这个方法接受两个参数，需要获取样式的元素和诸如hover之类的伪元素（如果不需要，也可以为null），

页面事件

通过这两个属性获取滚动条在窗口中滚动的距离，语法为：

        document.documentElement.scrollTop;

        document.documentElement.scrollLeft;

这两句代码分别可以获取滚动条距离口顶端和左侧滚动的距离，在网上也有许多代码使用document.body.scrollTop的方式来获取滚动条滚动的距离。由于Web的标准会使scrollTop失效，因此document.body.scrollTop永远等于0，所以不建议使用document.body.scrollTop这种方式。

教学课件V2.0

教学课件V1.0

随鼠标滚动的广告图片

任务描述

• 在页面中有一个图片和一个关闭按钮。

• 当滚动条向下或向右移动时，图片和关闭按钮随滚动条移动，相对于浏览器的位置固定。

• 单击关闭按钮，页面中的图片和关闭按钮不显示。

  
  

任务分析

1. 把广告图片放在一个div中，并且div总是显示在页面的上方

2. 使用getElementById()方法获取层对象，并且获取层在页面上的初始位置

3. 根据鼠标滚动事件，获取滚动条滚动的距离

4. 随着滚动条的移动改变层在页面上的位置

任务实现

<scripttype="text/javascript">

var adverTop; //层距页面顶端距离

var adverLeft;

var adverObject; //层对象

function inix(){

  adverObject=document.getElementById("adver"); //获得层对象

  if(adverObject.currentStyle){

  adverTop=parseInt(adverObject.currentStyle.top);

  adverLeft=parseInt(adverObject.currentStyle.left);

}

else{

        adverTop=parseInt(document.defaultView.getComputedStyle(adverObject，null).top);

  adverLeft=parseInt(document.defaultView.getComputedStyle(adverObject，null).left);

        }

}

function move(){

adverObject.style.top=adverTop+parseInt(document.documentElement.scrollTop)+"px";

adverObject.style.left=adverLeft+parseInt(document.documentElement.scrollLeft)+"px";

} 

window.onload=inix;

window.onscroll=move;

</script>

在页面中有一个图片和一个关闭按钮。当滚动条向下或向右移动时，图片和关闭按钮随滚动条移动，相对于浏览器的位置固定。单击关闭按钮，页面中的图片和关闭按钮不显示。

参考答案