前端4，jq定位

最新推荐文章于 2021-01-31 20:50:05 发布

木易离火

最新推荐文章于 2021-01-31 20:50:05 发布

阅读量167

点赞数

分类专栏： 2

本文链接：https://blog.csdn.net/LN_VERSION/article/details/100986935

版权

2 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!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;
            left: 10px;
            top: 30px;
            z-index: 2;
        }

/*        #adver{
            position: fixed;
            top: 30px;
            left: 10px;
        }*/

    </style>
    <script src="../js/jquery-1.8.3.min.js"></script>
    <script src="jquery-1.8.3.min.js"></script>
</head>
<body>
<div id="adver"><img src="images/adv.jpg"/></div>
<div id="main"><img src="images/main1.jpg"/><img src="images/main2.jpg"/><img src="images/main3.jpg"/></div>
</body>
</html>

<script>

    $(function () {

        var adverTop=parseInt($("#adver").css("top"));
        var adverLeft=parseInt($("#adver").css("left"));
        //alert(adverTop);   //30px
        //alert(adverLeft);  //10px

        //scroll()  叫浏览器的鼠标滚动条滚动事件
        $(window).scroll(function () {

            //方法1
            //得到滚动的距离,竖向和横向
            var scrollTop=parseInt($(this).scrollTop());
            var scrollLeft=parseInt($(this).scrollLeft());
            //alert(scrollTop);

            $("#adver").offset({top: adverTop + scrollTop});
            $("#adver").offset({left: adverLeft + scrollLeft});

            //方法2，直接添加样式
        });

    });

</script>