页面左右两边跟随式广告框

忘是亡心i 2022-07-16 14:08 184阅读 0赞

**当我们浏览一些网页时我们会发现页面的的边上会有广告图片，当滚动滚动条的时候这些广告图片会跟随性的随页面一起运动（这里我叫它为广告框）。一些网页的广告框是固定在浏览器上的用background：fixed；便可实现。这里我用JavaScript简单的制作了一个随滚动缓冲运动的广告框。**

--------------------

![这里写图片描述][SouthEast]

--------------------

**制作的原理比较简单，大家都有一个完美的js运动框架，这里的缓冲运动需要用到。这里的广告框设定的是跟随滚动条缓冲运动并运动到浏览器的中间位置。需要理解的是运动距离的计算和一些细节上的处理（一些BUG的预防）**

这是我在这里使用的一个js运动框架，传递的参数只有一个并不是完美运动框架。传递的参数是广告框的运动距离，因此我在运动框架内又获取了一次对象。

var timer=null;
            function startMover(iTarget){ 
                var oDiv=document.getElementById('div1');
                clearInterval(timer);
                timer=setInterval(function(){ 
                       var ispeed=(iTarget-oDiv.offsetTop)/8;
                       //速度设置为逐渐减小
                       ispeed=ispeed>0?Math.ceil(ispeed):Math.floor(ispeed);
                       //避免速度产生小数点
                       if(oDiv.offsetTop==iTarget){
                           clearInterval(timer);
                       }
                       else{
                        oDiv.style.top=oDiv.offsetTop+ispeed+"px";
                       }
    
            },30);
            };

样式和布局代码

<style> #div1{ width: 100px; height: 100px; background: #ccc; position: absolute; //使用绝对定位让其处于右上方 right: 0; top: 0; </style>
    
        <body style="height: 2000px;">
            <div id="div1"></div>
        </body>

js代码

这里增加了.onscroll属性目的是当滚动滚动条的时候也加载页面,广告框就能随着滚动条一起运动了。还增加了.onresize属性，由于我要实现广告框一直是运动到浏览器的中间位置，然而当我改变浏览器高度的时候也要实现广告框的运动，所以增加该属性，当浏览器大小改变时加载。

<script> window.onload=window.onscroll=window.onresize=function(){ var oDiv=document.getElementById('div1'); var scrolltop=document.documentElement.scrollTop||document.body.scrollTop; "scrolltop"是滚动条滚动的距离，这里有一个兼容chrome不支持document.documentElement.scrollTop获取语句，其他浏览器支持。 var t=(document.documentElement.clientHeight-oDiv.offsetHeight)/2; "t"为让广告框处于中间位置的高度距离，（获取浏览器的总高度-广告框自身高度）/2 startMover(parseInt(t+scrolltop)); "parseIn"返回一个整数，避免小数生成。这里广告框的总移动距离为（t+scrolltop） }; var timer=null; function startMover(iTarget){ var oDiv=document.getElementById('div1'); clearInterval(timer); timer=setInterval(function(){ var ispeed=(iTarget-oDiv.offsetTop)/8; ispeed=ispeed>0?Math.ceil(ispeed):Math.floor(ispeed); if(oDiv.offsetTop==iTarget){ clearInterval(timer); } else{ oDiv.style.top=oDiv.offsetTop+ispeed+"px"; } },30); }; </script>

[SouthEast]: /images/20220709/2796dde95335488dac65438626b3220d.png

发表评论取消回复

表情：

评论列表（有 0 条评论，184人围观）

还没有评论，来说两句吧...

相关阅读

相关实现hover上去下边框从中间向左右两边分散开

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

素颜马尾好姑娘i/ 2022年12月13日 14:29/ 0 赞/ 112 阅读

相关 ViewPager 实现 GallerView 效果, 显示左右两边

正常情况下, ViewPager 一页只能显示一项数据, 但是如果需求是, 除了小显示本页数据, 还有包左右两半的数据也都露出一点来呢? 这该怎么处理?

系统管理员/ 2022年08月19日 05:52/ 0 赞/ 365 阅读

相关 JS 左右两侧浮动广告

<html> <title>左右两侧浮动广告</title> <head> </head> <body> <table styl

╰+攻爆jí腚メ/ 2022年08月06日 00:27/ 0 赞/ 202 阅读

相关一行div框，两边顶头显示

<style> .pdiv{background-color:999; width:1000px; height:500px; overflow:hidden;

偏执的太偏执、/ 2022年07月27日 10:45/ 0 赞/ 165 阅读

相关页面左右两边跟随式广告框

当我们浏览一些网页时我们会发现页面的的边上会有广告图片，当滚动滚动条的时候这些广告图片会跟随性的随页面一起运动（这里我叫它为广告框）。一些网页的广告框是固定在浏览器上的用bac

忘是亡心i/ 2022年07月16日 14:08/ 0 赞/ 185 阅读

相关 jQuery实战_两侧跟随广告

要实现的效果：滑动滚动条，广告位置看上去不变。 HTML： <div class="left"> <img src="./images/1.gif

朴灿烈づ我的快乐病毒、/ 2022年05月22日 12:42/ 0 赞/ 186 阅读

相关 js下拉框之左右移动

1 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3U

分手后的思念是犯贱/ 2022年03月19日 07:54/ 0 赞/ 253 阅读

相关去掉数组左右两边的引号

情况是这样的一个数组 \[\] 正则去掉 "\[\]" 数组旁边的引号；下面就是方法（因为编译存数据库的时候，取出来成字符串了，多了给引号，所以要去掉） .rep

╰+攻爆jí腚メ/ 2022年01月19日 21:21/ 0 赞/ 248 阅读

相关 QtQuick 左右滑动页面

1 import QtQuick 2.11 2 import QtQml.Models 2.11 3 4 5 Rectang

痛定思痛。/ 2022年01月07日 08:29/ 0 赞/ 392 阅读

相关 css 实现文字左右两边有一条线

![20190820100503838.png][] 效果是上面这样的，其实很简单就是在文字的伪类里面加横线就行了 <div class="title"> 这里

╰半夏微凉°/ 2021年10月23日 07:57/ 0 赞/ 530 阅读