jQuery实现对联式广告

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>advertising</title>
    <link rel="icon" href="../../../img/sup.ico" type="img/x-icon">
    <script src="../../../jquery-3.4.1.min.js"></script>
    <style type="text/css">
        body{
            height: 3000px;
        }
        div:first-child{
            background-color: #ccc;
            position: fixed;
            top: 350px;
            float: left;
            left: 0;

            font-size: 0;
            color: #f4511e;
            text-align: center;
            line-height: 200px;
            writing-mode: vertical-lr;
        }
        div:nth-child(2){
            background-color: #ccc;
            position: fixed;
            top: 350px;
            float: right;
            right: 0;
            font-size: 0;

            color: #f4511e;
            text-align: center;
            line-height: 200px;
            writing-mode: vertical-lr;
        }
    </style>
</head>
<body>
    <div>广告位火热招商中</div>
    <div>广告位火热招商中</div>
<script>
    //监听屏幕滚动距离
    $(function () {
        $(window).on('scroll',function () {//事件添加在window上
            let $scrollTop = $('html,body').scrollTop();
            console.log($scrollTop);
            if ($scrollTop < 500){
                $('div').hide().animate({
                    width:0,
                    height:0,
                    fontSize:'0px',
                },100);
            }else{
                $('div').show().animate({
                    width:200,
                    height:400,
                    fontSize:'40px',
                },500)
            }
        })
    })
</script>
</body>
</html>
在这里插入图片描述
Hello Hongbin
发布了20 篇原创文章 · 获赞 5 · 访问量 638
私信关注
jQuery实现对联式广告

猜你喜欢
