码迷,mamicode.com
首页 > Web开发 > 详细

jQuery实现广告对联

时间:2018-11-13 13:05:32      阅读:193      评论:0      收藏:0      [点我收藏+]

标签:nbsp   latest   width   info   ack   com   title   出现   idt   

广告对联:当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实现广告对联

标签:nbsp   latest   width   info   ack   com   title   出现   idt   

原文地址:https://www.cnblogs.com/superCwen/p/9951526.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!