JQuery实现两侧浮动广告

最新推荐文章于 2019-08-13 10:14:09 发布

weixin_30263277

最新推荐文章于 2019-08-13 10:14:09 发布

阅读量248

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/sylz/p/5775610.html

版权

1、描述

　　两侧浮动显示广告

2、要点

　　其实就是一直在变浮动广告距顶部的值。

3、代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{margin: 0;padding: 0;}
            .left{
                position: absolute;
                left: 0;
                top:80px;
            }
            .right{
                position: absolute;
                right:0;
                top:80px;
            }
            p{
                height: 10000000px;
                
            }
        </style>
        <script src="js/jquery-1.11.1.min.js"></script>
        <script type="text/javascript">
            $(function(){
                $(window).scroll(function(){
                    var docHeight=$(document).scrollTop();
                    $(".left,.right").animate({"top":docHeight+80},30);
                });
            });
        </script>
    </head>
    <body>
        <div class="left">
            <img src="img/1.gif"/>
        </div>
        <div class="right">
            <img src="img/2.gif"/>
        </div>
        <p></p>
    </body>
</html>