层的应用-悬浮的广告层

北战南征 提交于 2020-03-24 05:29:25

————————————————————

<script type="text/javascript">        
            function goScroll(o){
                var space=document.getElementById(o).offsetTop;
                document.getElementById(o).style.top=space+'px';
                var goTo = 0;
                window.setInterval(function(){
                    var height =document.documentElement.scrollTop+document.body.scrollTop+space;
                    var top = parseInt(document.getElementById(o).style.top);
                    if(height!= top){
                        goTo = height-parseInt((height - top)*0.9);
                        document.getElementById(o).style.top=goTo+'px';
                    }
                },50);
            }
            function init(){
                goScroll('con1');
            }
        </script>   

——————————————————————————

<style>
            #con1{                
                background-color:gray;                
                left: 0px;
                top: 100px;
                width:100px;
                height:100px;
                position: absolute;
                z-index = 1;
            }
        </style>

————————————————————————————

<body style="text-align:center" onload="init();">
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        <div id="con1">
            这是一个广告
        </div>
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    </body>

————————————————————————————

 

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!