jQuery实现广告对联

Posted 2021-01-19 supercwen

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery实现广告对联相关的知识，希望对你有一定的参考价值。

广告对联：当scroll滚动到一定的距离左右两边会出现广告

代码如下

<html>

<head>
<title></title>
</head>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .left{
            width:100px;
            height:300px;
            background:red;
            float:left;
            position:fixed;
            left:0;
            top:200px;
            display:none;
        }
        .right{
            width:100px;
            height:300px;
            background:red;
            float:right;
            position:fixed;
            right:0;
            top:200px;
            display:none;
        }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script>
        
        $(function(){
            $(window).scroll(function(){                                             //scroll滚动函数，当滚动时触发
                var scrollHeight=$(‘body‘).scrollTop()+$(‘html‘).scrollTop()         //获取滚动距离
                if(scrollHeight>200){                                                //当滚动大于200，把左右两边的div给显示出来
                    $(‘div‘).show(1000) 
                }else{
                    $(‘div‘).hide(1000)
                }
            })
        })
        
    </script>
    
<body>
    <div class="left"></div>
    <div class="right"></div>
    <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>
    <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>

效果图

技术分享图片

以上是关于jQuery实现广告对联的主要内容，如果未能解决你的问题，请参考以下文章

很有点意思的特效，本人很喜欢

对联广告

为页面两边增加对联广告，增加关闭按钮，点击可以关闭对联两边都关闭

js 技巧广告JS代码效果大全

JQuery实现广告效果（滚动切换）