jQuery实现对联式广告

最新推荐文章于 2022-01-30 12:37:50 发布

Jedi Hongbin

最新推荐文章于 2022-01-30 12:37:50 发布

阅读量515

点赞数 1

CC 4.0 BY-SA版权

分类专栏：大前端文章标签： jquery html css

本文链接：https://blog.youkuaiyun.com/printf_hello/article/details/104083401

大前端专栏收录该内容

134 篇文章

订阅专栏

本文介绍了一种基于页面滚动距离的广告位显示与隐藏策略，利用jQuery监听屏幕滚动事件，实现广告位的动态调整，增强用户体验的同时提高广告效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>

在这里插入图片描述