悬浮广告层

2016-10-28 本文已影响0人一人之下冯宝宝

源码

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
</head>
<script>
    function goScroll(a){
        var space=document.getElementById(a).offsetTop;
        document.getElementById(a).style.top=space+'px';
        var goTo =0;
        window.setInterval(function(){
            var height=document.documentElement.scrollTop+document.body.scrollTop+space;
            var top=parseInt(document.getElementById(a).style.top);
            if (height!=top) {
                goTo=height-parseInt((height-top)*0.9);
                document.getElementById(a).style.top=goTo+'px';
            }
        },50);
    }
    function init(){
        goScroll('conl');
    }
</script>
<style>
    #conl{
        background-color: gray;
        left: 0px;
        top: 100px;
        width: 100px;
        height: 100px;
        position: absolute;
        z-index=1;
    }
    body{
        height: 8000px;
    }
    
</style>
<body  style="text-align: center" onload="init()" >
<div id="conl">这是一个广告</div>
</body>
</html>

几个问题

1.

offsetTop :
当前对象到其上级层顶部的距离.
不能对其进行赋值.设置对象到页面顶部的距离请用style.top属性.
scrollTop:对象的最顶部到对象在当前窗口显示的范围内的顶边的距离．即是在出现了纵向滚动条的情况下，滚动条拉动的距离．
document .documentElement.scrollTop; 要获取当前页面的滚动条纵坐标位置，用：
网页被卷去的高： document .body.scrollTop;
想了解更多点这个

document.body.scrollTop与document.documentElement.scrollTop兼容,这两天在写一个JS的网页右键菜单，在实现菜单定位的时候发现了这个问题：chrome居然不认识document.documentElement.scrollTop！
看前辈们的文章，纷纷表示如果有文档声明（即网页第一句的docType）的情况下，标准浏览器是只认识documentElement.scrollTop的，但chrome虽然我感觉比firefox还标准，但却不认识这个，在有文档声明时，chrome也只认识document.body.scrollTop.由于在不同情况下，document.body.scrollTop与document.documentElement.scrollTop都有可能取不到值，那到底网页的scrollTop值怎么得到呢？难道又要用JavaScript进行判断？其实不必。因为document.body.scrollTop与document.documentElement.scrollTop两者有个特点，就是同时只会有一个值生效。比如document.body.scrollTop能取到值的时候，document.documentElement.scrollTop就会始终为0；反之亦然。所以，如果要得到网页的真正的scrollTop值，可以这样：
var sTop=document.body.scrollTop+document.documentElement.scrollTop;
这两个值总会有一个恒为0，所以不用担心会对真正的scrollTop造成影响。一点小技巧，但很实用。

2.parseInt()

parseInt(string, radix)
radix，表示转换的基数，也就是我们常说的2进制、8进制、10进制、16进制等。范围从2~36，但我们在JS中一般调用该方法时，基本都是以10为基数进行转换的。
如果该参数小于 2 或者大于 36，则 parseInt() 将返回 NaN。

3.setInterval

格式如下：
setInterval(function(){trace("每隔1秒钟我就会显示一次")},1000);
//这里的function(){}是没有函数名的函数。成为匿名函数，后面的1000是时间间隔，单位是毫秒。

4.alert(typeof(top));

调试用比较方便

5.比较运算符

== 等于===全等!=不等于 >大于 <小于>=大于或等于 <=小于或等于

6.扩展

function back(){
document.documentElement.scrollTop = document.body.scrollTop =0;
}