随滚动条滚动广告图片

<!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>

posted @ 2019-07-11 19:39 排雷兵阅读(384) 评论(0) 收藏举报

刷新页面返回顶部

排雷兵

滴水穿石，落羽沉舟。

随滚动条滚动广告图片

公告