jquery实现滑动滚动条出现对联广告

最新推荐文章于 2024-07-20 18:16:53 发布

Hello world

最新推荐文章于 2024-07-20 18:16:53 发布

阅读量438

点赞数

文章标签： jquery 广告前端

本文链接：https://blog.csdn.net/helloWolrldApe/article/details/88572464

版权

jquery实现滑动滚动条出现对联广告

在很多网站都又滑动滚动条到一定位置，然后就出现对联广告的应用。今天我也学习了一个对联广告分享给大家效果图入下：

在这里插入图片描述
主要实现是用Jquery里面的scroll（）去获取滚动条的数值，然后判断一下数值大小，超过数值了就调用一下show（）方法。消失就用一下hide()方法。
具体实现入下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="//libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <style>
        *{
            margin: 0;
            padding:0;
            height:auto;
        }
        .left{
            position: fixed;
            float: left;
            left: 0px;
            top: 200px;
        }
        .right{
            position: fixed;
            float: right;
            right: 0px;
            top: 200px;
        }
        img{
            display: none;
        }

    </style>

    <script >

        $(function(){
            $(window).scroll(function(){
                var offset= $("body").scrollTop()
                console.log($("html,body").scrollTop())
                if(offset>=100){
                    $("img").show(1000)
                }else{
                    $("img").hide(1000)
                }
            })
        })
    </script>
</head>
<body>
<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>

<img src="./img/1.jpg"  class="left">
<img src="./img/1.jpg"  class="right">
</body>
</html>

这里需要注意的是 var offset= $(“body”).scrollTop()里面的有些是var offset= $(“html,body”).scrollTop()这样去获取的，因为兼容性问题。有些游览器要通过html获取scrollTop()。我用的是谷歌，所以只写了一个body。

Hello world

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery实现滑动滚动条出现对联广告

jquery实现滑动滚动条出现对联广告在很多网站都又滑动滚动条到一定位置，然后就出现对联广告的应用。今天我也学习了一个对联广告分享给大家效果图入下：主要实现是用Jquery里面的scroll（）去获取滚动条的数值，然后判断一下数值大小，超过数值了就调用一下show（）方法。消失就用一下hide()方法。具体实现入下：&lt;!DOCTYPE html&gt;&lt;html lang=...
复制链接

扫一扫