jQuery实现广告对联

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

dongciqiu0026

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

阅读量116

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/superCwen/p/9951526.html

版权

广告对联：当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>

效果图

转载于:https://www.cnblogs.com/superCwen/p/9951526.html

dongciqiu0026

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery实现广告对联

广告对联：当scroll滚动到一定的距离左右两边会出现广告代码如下<html><head><title></title></head> <style> *{ margin:0; padding:0; ...
复制链接

扫一扫