Mr.J-- jQuery学习笔记(十五)--实现页面的对联广告

最新推荐文章于 2019-10-09 15:33:19 发布

End_less__

最新推荐文章于 2019-10-09 15:33:19 发布

阅读量245

点赞数

分类专栏： jQuery学习

本文链接：https://blog.csdn.net/Ms_yjk/article/details/92792070

版权

jQuery学习专栏收录该内容

33 篇文章 3 订阅

订阅专栏

请看之前的：Mr.J-- jQuery学习笔记(十四)--动画显示隐藏

话不多说，直接上demo

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

        });
    </script>
</head>
<body>
<img src="images/left_ad.png" class="left">
<img src="images/right_ad.png" 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>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</body>
</html>

先放入照片，复制粘贴代码即可食用。

End_less__

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Mr.J-- jQuery学习笔记(十五)--实现页面的对联广告

请看之前的：Mr.J-- jQuery学习笔记(十四)--动画显示隐藏话不多说，直接上demo<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>对联广告</title> <style> ...
复制链接

扫一扫