随滚动条滚动广告图片

最新推荐文章于 2021-06-04 04:26:14 发布

dimangxuan1310

最新推荐文章于 2021-06-04 04:26:14 发布

阅读量571

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/taoist123/p/11172202.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>随滚动条滚动广告图片</title>
    <style>
        body{margin: 0;}
        .wrap{
            height: 3000px;
            background: #ccc;
        }

        .ad{
            position: absolute;
            z-index: 1000;
            left:50px;
            top:100px;
        }
    </style>
</head>
<body>
    <div class="wrap">
            <div class="ad">
                <img src="winter.jpg" width="300" height="280">
            </div>
    </div>
    <script src="jquery-1.12.4.js"></script>
    <script>
          $(function () {
              //offset获取当前元素的位移
                let x =  $(".ad").offset().left;
                let y = $(".ad").offset().top;
                //console.log("x=" +  x + ",y=" + y);
              $(document).scroll(function () {
                    //获取滚动条当前滚动产生的x y位移量
                    let sTop = $(document).scrollTop();
                    let sLeft = $(document).scrollLeft();
                  //前滚动产生的x y位移量 与原图片的位置 相加
                  $(".ad").offset({ top: y + sTop, left: x+sLeft });
              });
          });
    </script>
</body>
</html>