40-对联广告（监听网页滚动事件）

最新推荐文章于 2021-10-13 16:30:03 发布

杨亚仑

最新推荐文章于 2021-10-13 16:30:03 发布

阅读量127

点赞数

CC 4.0 BY-SA版权

分类专栏： jQuery入门练习

本文链接：https://blog.youkuaiyun.com/yangyalun/article/details/83384936

jQuery入门练习专栏收录该内容

60 篇文章

订阅专栏

本文介绍了如何使用$(window).scroll()事件监听网页滚动，并通过$(html,body).scrollTop()获取滚动位置，当滚动到特定位置时显示固定位置的广告图片。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

感想：主要学习了$(window).scroll()这个网页滚动事件。
回顾了$("html,body").scrollTop()获取获取网页偏移位的方法，其中IE下是body,其他是html

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .left{
            width: 100px;
            height: 160px;
            float: left;
            position: fixed;
            left: 0;
            top: 200px;
        }
        .right{
            width: 100px;
            height: 160px;
            float: right;
            position: fixed;
            right: 0;
            top: 200px;
        }
        img{
            display: none;
        }
    </style>
    <meta charset="UTF-8">
    <title>40-对联广告</title>
    <script src="JS_file/jquery-1.12.4.js"></script>
    <script>
         $(function () {
                 //    监听网页的滚动
             $(window).scroll(function () {
                 //1.1获取网页滚动的偏移位
                 var offset=$("html,body").scrollTop()
             //    1.2判断网页是否滚到到了指定的位置
                 if(offset>=500)
                 {
                 //     1.3显示广告
                     $("img").show(1000);
                 }
                 else
                 {
                     $("img").hide(1000);
                 }
             })
         })

    </script>
</head>
<body>
<img src="images/left_ad.jpg" class="left">
<img src="images/right_ad.jpg" class="right">
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</body>
</html>