码迷,mamicode.com
首页 > 其他好文 > 详细

随滚动条滚动广告图片

时间:2019-07-11 20:46:41      阅读:130      评论:0      收藏:0      [点我收藏+]

标签:位移   wrap   OLE   abs   img   margin   pre   color   rip   

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

 

随滚动条滚动广告图片

标签:位移   wrap   OLE   abs   img   margin   pre   color   rip   

原文地址:https://www.cnblogs.com/taoist123/p/11172202.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!