始终显示在最顶端的文本

【实例名称】

始终显示在最顶端的文本

【实例描述】

在很多网站上可以看到一些广告总是随着页面的滚动而滚动，同时又能只豆示在页面的最顶端其中的原理就是使用定时器不断改变div的位置。

【实例代码】

                       
<script language="JavaScript">
    function StaticDiv(theName,Top,Left) 
    {
        RealTop=parseInt(document.body.scrollTop);  //获取当前屏幕的X坐标
        TrueTop=Top+RealTop;                        
        document.all[theName].style.top=TrueTop;    //指定div的X坐标位置
        RealLeft=parseInt(document.body.scrollLeft);//获取当前屏幕的Y坐标
        TrueLeft=Left+RealLeft;
        document.all[theName].style.left=TrueLeft; //指定div的Y坐标位置
    }
    setInterval('StaticDiv("AlwaysDiv",0,0)',1);  //定时重置div的位置
</script>
在页面中要设计始终显示的内容如下所示：
<div id="AlwaysDiv" style="position:absolute; left:1.5px; 
top:0px; width:230px; height:30px; z-index:10"> 
       <font size="5"><b>保持最顶端的文字</b></font>
</div>
    

【运行效果】

【难点剖析】

本例中的要点有层和坐标。“scrollTop”是body的属性，用来获取最顶端的坐标，而“scrollLeft”用来获取最左侧的坐标。其中层用来显示文本内容，并使用了“setInterval”不断检测页面的左上角的坐标，以及时改变层的位置。

【源码下载】

本实例JS代码下载