JavaScript实现侧边广告效果

最新推荐文章于 2021-06-04 23:58:03 发布

原创最新推荐文章于 2021-06-04 23:58:03 发布 · 775 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript

日常练习--前端小效果专栏收录该内容

19 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的网页侧边广告滑动效果，当用户滚动页面时，侧边广告会跟随滑动一定距离后返回原位。通过监听窗口滚动事件，并结合缓动动画，实现了流畅的视觉体验。

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

用JavaScript实现了一个小效果：滑动页面，侧边广告一起滑动一定距离，返回原来位置。

HTML：

<div id="aside">
        <img src="./images/float.jpg" alt="">
 </div>
 <div class="main">
    <p>加油！</p>
    <p>最棒！</p>
    <p>加油！</p>
    <p>最棒！</p>
    <p>加油！</p>
    <p>最棒！</p>
    <p>加油！</p>
    <p>最棒！</p>
</div>

css：

    *{
               margin:0;
           padding:0;
           list-style: none;
           border:none;
       }
       #aside{
           width:150px;
           position: absolute;
           top:100px;
           left:0;
       }
       #aside img{
           width:100%;
       }
       .main p{
           text-align: center;
           line-height: 250px;
           font-size: 20px;
           height: 250px;
           width:100%;
       }
       .main p:nth-child(even){
           background-color: #ddfafa;
       }
       .main p:nth-child(odd){
           background-color: #d5a6f0;
       }

JavaScript：

window.onload=function(){
    //1 获取广告头部
    var offset_top=$("aside").offsetTop;
    //2 监听窗口滚动
    var begin=0,end =0,timer=null;   
    window.onscroll=function(){
        //2.0 清除定时器（在事件开始前清除）
        clearInterval(timer);
        //2.1 获取滚动高度
        var scroll_top=scroll().top;
        end=offset_top+scroll_top;

        //2.2 缓动动画
        timer=setInterval(function(){
            begin=begin+(end - begin)*0.2;
            $("aside").style.top=begin+"px";
            //清除定时器
            if(Math.round(begin)===end){
                clearInterval(timer);
            }

        },20);
    }
}

function scroll() {
    if(window.pageYOffset !== null){
        return {
            top: window.pageYOffset,
            left: window.pageXOffset
        }
    }else if(document.compatMode === "CSS1Compat"){ // W3C
        return {
            top: document.documentElement.scrollTop,
            left: document.documentElement.scrollLeft
        }
    }

    return {
        top: document.body.scrollTop,
        left: document.body.scrollLeft
    }
}

function $(id) {
    return typeof id === "string" ? document.getElementById(id) : null;
}