zoukankan      html  css  js  c++  java
  • 用js实现简单的左右两边固定广告效果

    大多数网站都有左右两边的固定广告位,下面呢就是实现这个效果的最简单的代码,可能在ie下滚动的时候会有一点抖动,这个问题以后再解决了,先实现再说。

    要点一: var adtop = adleft.offsetTop; 获得元素距离上边的位置,在滚动的时候需要用到。

    要点二:adleft.style.top = adtop + (document.documentElement.scrollTop || document.body.scrollTop) +"px";  滚动时,给元素的上边位置赋值为元素本身距离上边的距离加上滚动的距离。

    上代码

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title>无标题文档</title>
    <style>
    body
    {margin:0; padding:0}
    #adleft,#adright
    {width:30px; height:100px; padding:20px; font:14px/20px arial; text-align:center; background:#06c; position:absolute; cursor:pointer; color:#fff}
    #adleft
    {left:0; top:150px; }
    #adright
    {right:0; top:150px;}
    </style>
    <script>

    window.onload
    = function(){
    var adleft = document.getElementById("adleft");
    var adright = document.getElementById("adright");
    var adtop = adleft.offsetTop;

    window.onscroll
    = function(){
    adleft.style.top
    = adtop + (document.documentElement.scrollTop || document.body.scrollTop) +"px";
    adright.style.top
    = adtop + (document.documentElement.scrollTop || document.body.scrollTop) +"px";
    }
    }

    </script>
    </head>

    <body style="height:2000px;">

    <h1>左右广告</h1>

    <div id="adleft">左边广告</div>
    <div id="adright">右边广告</div>
    </body>
    </html>



  • 相关阅读:
    数据操作-对数据的增删改查-单表查询和多表查询
    爬虫从入门到放弃
    爬虫从入门到放弃
    创建表的完整语法及表之间的关系
    树链剖分练习总结
    [BZOJ]1984: 月下“毛景树”
    [BZOJ]2243: [SDOI2011]染色
    [BZOJ]4034: [HAOI2015]树上操作
    NOIP2012题解
    CODEVS4633 [Mz]树链剖分练习
  • 原文地址:https://www.cnblogs.com/jingangel/p/2388352.html
Copyright © 2011-2022 走看看