js 两侧广告滚动Demo

最新推荐文章于 2018-09-03 13:33:46 发布
最新推荐文章于 2018-09-03 13:33:46 发布
阅读量351 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_14954259/article/details/69663165
版权 
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .img1 {
            position: absolute;
            top: 80px;
            left: 10px;
        }
        .img2 {
            position: absolute;
            top: 80px;
            right: 10px;
        }
        div {
            width: 1210px;
            margin: 100px auto;
            text-align: center;
            font: 500 26px/35px "simsun";
            color: red;
        }
    </style>
    <script>
        window.onload = function () {
            //需求：屏幕滚动多少，两侧的图片联动向下移动等距离。
            //步骤：
            //1.老三步
            //2.获取被卷去的头部的值
            //3.移动两个盒子。（缓动移动）

            //1.老三步
            var imgArr = document.getElementsByTagName("img");

            window.onscroll = function () {
            var val=scroll().top;
            animate(imgArr[0],val);
            animate(imgArr[1],val);
            }
            function scroll(){
                return {
                    top:document.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop,
                    left:document.pageXOffset||document.documentElement.scrollLeft||document.body.scrollLeft
                }
            }
            // 缓动动画
            function animate(ele,target){
            clearInterval(ele.timer);
            ele.timer=setInterval(function(){
                var step=(target-ele.offsetTop)/10;
                step=step>0?Math.ceil(step):Math.floor(step);
                ele.style.top=ele.offsetTop+step+'px';
                if(Math.abs(target-ele.offsetTop)<Math.abs(step)){
                ele.style.top=target+'px';
                }
            },30)
            }

        }
    </script>

</head>
<body>
    <img class="img1" src="images/aside.jpg"/>
    <img class="img2" src="images/aside.jpg"/>
    <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>
    </div>
</body>
</html>

小斑马在沙巴找BUG
关注
JS特效——广告图由左往右滚动
mini_yangmi的博客
03-27 839
代码如下：&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt;从左到右滚动广告效果&lt;/title&gt; &lt;meta charset="utf-8"&gt; &lt;style&gt; #container { margin: 100px auto
JavaScript 动态网页实例 —— 广告效果
最新发布
cccloveforever的博客
07-02 1016
广告是现代网页设计中不可或缺的内容。广告可以有很多种形式，但最终目的都是要吸引观众的注意力。尽管广告少不了画面、音效和广告语等效果，但其实现主要还是应用JavaScript 代码，只要很好掌握了JavaScript程序设计，剩下的就是创意和美工了。本章介绍几种广告效果，包括对联广告、飘动广告、滚动广告和特殊视觉效果的广告，相信读者会从中受到启发。
JavaScript实现简单的广告滚动条
Fyn_Andersen的博客
11-04 940
HTML： Rotating Banner CSS： body { background-color: #FFF; } img { border-width: 0; } .centered { text-align: center; } #adBanner { width: 720px; height: 450px; } JS：
纯javascript实现广告的无缝滚动
风的专栏
03-10 2119
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 广告的无缝滚动 *{margin:0;padding:0;font-family:微软雅黑;} ul{list-style:none;} .adMove{border:1px so
js滚动广告效果
sunxing007的专栏
03-31 3665
上下翻滚的js滚动广告效果， 通过js操作table的position来实现。运行代码运行代码<!--function viewPage(html) { var page = window.open(, , ); page.opener = null; page.document.write(html); page.document.
JavaScript 特效:两侧跟随的广告
houyanhua1的专栏
03-17 1734
demo.html： Document .img1 { position: absolute; top: 80px; left: 10px; } .img2 { position: absolute;
js 对联广告
01-16
在本案例中，“js 对联广告”指的是使用JavaScript技术实现的一种广告展示形式，这种广告通常出现在网页的两侧，就像中国传统对联一样，因此得名“对联广告”。 对联广告的设计目标是提高用户体验的同时，有效地...
js图片左右无缝滚动用鼠标控制图片滚动
02-22
JavaScript 图片左右无缝滚动是一种常见的网页动态效果，用于展示多张图片并使用户可以通过鼠标操作来控制图片的滚动。这种效果常被应用于产品展示、图片画廊或新闻滚动等场景，能够提升用户体验，使得信息浏览更为...
对联广告带上面关闭代码.rar
07-03
这将帮助我们更好地理解代码的工作原理，包括广告如何显示、如何随着页面滚动而移动，以及关闭按钮如何触发广告的隐藏。 在"08"文件中，可能包含了以下关键部分： 1. **广告容器**：HTML代码中定义了一个容器来...
js无缝滚动demo
11-25
原生js实现简单的无缝滚动效果。原生js实现简单的无缝滚动效果
js实现网页中常见的随滚动条移动的悬浮广告栏做法
04-13
这里的scrollTop这个变量就是获取得到可视区到达页面顶部的距离 2 调用运动函数的时候付入的参数其实就是先用整个可视区的高度减去盒子的高度，然后在加上可视区到顶部的距离，这样可以实现的就是把悬浮广告停在右下角的位置 3 根据上面的分析则说明如果把可视区的高减掉盒子的高然后再除掉2，那么此时再加上可视区到顶部的距离就可以把这个盒子保始终停在页面的中间,但是这里会有一个小问题，那就是因为我们除去2运算了所以会出现小数的情况。这样就会在那个整点位置来回走。解决的方法就是把运算结果通过parseInter取整。
JS实现广告条幅轮播效果
11-27
HTML+JS+CSS 实例 JS实现广告条幅轮播效果
js网页侧边随页面滚动广告效果实现
01-21
a.scrollTop的计算； b.滚动元素的定位值计算； c.滚动周期设定； 代码如下： css部分： 代码如下: /*测试用的高度*/ body{ height:3000px;} div,ul,li,body{margin:0; padding:0;} /*position:absolute;用于元素的定位*/ #roll{width:50px; height:100px; background:#99CC00; position:absolute;} Html代码： 代码如下: <body> <div id=”roll”></div> </body> JS代码： 代码如下: v
jquery广告上下左右滚动效果
01-08
jquery广告上下最有滚动效果，需要的可以下载来看看，做广告链接特效实用！
实现滚动文字广告
Anciend的博客
08-06 789
实现滚动文字广告   $(function() { //获得包含ul的div        var $this = $("#dome1");         var scrollTimer; //事件 鼠标移入停止滚动，移出重置事件，间隔2000毫秒        $this.hover(             function() {clearInterval(s
js实现滚动效果
xxmzumeng的专栏
12-15 381
HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> XMLns="http://www.w3.org/1999/xhtml"> 多列文字循环滚动-www.codefans.net CSS">
JavaScript原生实现广告栏滑动
清水
01-23 917
全部代码 &lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, user-scalable=no, i
JS+CSS 实现 悬浮滚动广告 只能实现左右往复滚动
qq_42396791的博客
09-03 1482
思路： 布局一个绝对布局的div 写一个move方法改变div的left 和top值  需要注意 到达body边界时候 改变方向  然后设置定时器调用move方法 不断改变 left和top值 代码： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;...
js, requestAnimationFrame,实现平滑滚动demo
04-02
JavaScript（简称JS）是一种广泛应用于Web开发的脚本语言，它可以为网页添加动态功能和交互性。它是一种解释型语言，可以直接嵌入到HTML中，并由浏览器解释执行。 requestAnimationFrame是JavaScript提供的一个用于...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值