随鼠标滚动的张伟图片

最新推荐文章于 2022-03-07 03:29:25 发布

Lizenglong0622

最新推荐文章于 2022-03-07 03:29:25 发布

阅读量287

点赞数

文章标签： list

本文链接：https://blog.csdn.net/xin040818/article/details/121559354

版权

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>随鼠标滚动的广告图片</title>
    <style type="text/css">
        #main {
            text-align: center;
            width: 1014px;
            margin: 0 auto;
        }

        #adver {
            position: absolute;
            /*position:fixed; */
            left: 10px;
            top: 30px;
            z-index: 2;
        }
        #adverr{
            position: absolute;
            position:fixed;
            left: 1400px;
            top: 30px;
            z-index: 2;
        }
    </style>

</head>
<body>
<div id="adver"><img src="images/OIP-C.jpg" height="600"/></div>
<div id="main"><img src="images/R-C.jpg" width="1050"/><img src="images/we.jpg" width="1050"/><img src="images/qw.jpg" width="1050"/><img
        src="images/r.jpg" width="1050"/><img src="images/6.jpg" width="1050"/>
</div>
<div id="adverr"><img src="images/f.jpg" height="600"/></div>
</body>
<script src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
    $(function () {
        //offset获取当前元素的位移
        let x =  $("#adver").offset().left;
        let y = $("#adver").offset().top;
        //console.log("x=" +  x + ",y=" + y);
        // scroll:鼠标滚动
        $(this).scroll(function () {
            //获取滚动条当前滚动产生的x y位移量
            let s = $(this).scrollTop();
            let f = $(this).scrollLeft();
            //前滚动产生的x y位移量 与原图片的位置 相加
            // offset() 方法设置或返回被选元素相对于文档的偏移坐标
            $("#adver").offset({ top: y + s, left: x+f });
        });
    });
</script>
</html>

Lizenglong0622

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
随鼠标滚动的张伟图片

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>随鼠标滚动的广告图片</title> <style type="text/css"> #main { text-align: center; width: 1014px; m.
复制链接

扫一扫