请选择 进入手机版|继续访问电脑版
返回列表 发新帖

JavaScript 特效:两侧跟随的广告

[复制链接]

1079

主题

1424

帖子

3万

积分

管理员

Rank: 9Rank: 9Rank: 9

UID
1
精华
0
金币
34579
威望
1
注册时间
2016-3-24
最后登录
2019-6-15
发表于 2019-3-30 13:48:30  | 显示全部楼层 | 阅读模式
点击查看
demo.html:
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style>
  7.         .img1 {
  8.             position: absolute;
  9.             top: 80px;
  10.             left: 10px;
  11.         }
  12.         .img2 {
  13.             position: absolute;
  14.             top: 80px;
  15.             right: 10px;
  16.         }
  17.         div {
  18.             width: 1210px;
  19.             margin: 100px auto;
  20.             text-align: center;
  21.             font: 500 26px/35px "simsun";
  22.             color: red;
  23.         }
  24.     </style>
  25.     <script src="animate.js"></script>
  26.     <script>
  27.         window.onload = function () {
  28.             //需求:屏幕滚动多少,两侧的图片联动向下移动等距离。
  29.             //步骤:
  30.             //1.老三步
  31.             //2.获取被卷去的头部的值
  32.             //3.移动两个盒子。(缓动移动)

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

  35.             window.onscroll = function () {
  36.                 //2.获取被卷去的头部的值
  37.                 var val = scroll().top;
  38.                 //3.移动两个盒子。(缓动移动)
  39.                 animate(imgArr[0],val+80);
  40.                 animate(imgArr[1],val+80);
  41.             }

  42.         }
  43.     </script>

  44. </head>
  45. <body>
  46.     <img class="img1" src="images/aside.jpg"/>
  47.     <img class="img2" src="images/aside.jpg"/>
  48.     <div>
  49.         水垢何曾相受,细看两俱无有,寄语揩背人,轻手,轻手,居士本来无垢.....<br>
  50.         水垢何曾相受,细看两俱无有,寄语揩背人,轻手,轻手,居士本来无垢.....<br>
  51.         水垢何曾相受,细看两俱无有,寄语揩背人,轻手,轻手,居士本来无垢.....<br>
  52.         水垢何曾相受,细看两俱无有,寄语揩背人,轻手,轻手,居士本来无垢.....<br>
  53.         水垢何曾相受,细看两俱无有,寄语揩背人,轻手,轻手,居士本来无垢.....<br>
  54.         水垢何曾相受,细看两俱无有,寄语揩背人,轻手,轻手,居士本来无垢.....<br>
  55.         水垢何曾相受,细看两俱无有,寄语揩背人,轻手,轻手,居士本来无垢.....<br>
  56.         水垢何曾相受,细看两俱无有,寄语揩背人,轻手,轻手,居士本来无垢.....<br>
  57.         水垢何曾相受,细看两俱无有,寄语揩背人,轻手,轻手,居士本来无垢.....<br>
  58.         水垢何曾相受,细看两俱无有,寄语揩背人,轻手,轻手,居士本来无垢.....<br>
  59.         水垢何曾相受,细看两俱无有,寄语揩背人,轻手,轻手,居士本来无垢.....<br>
  60.         水垢何曾相受,细看两俱无有,寄语揩背人,轻手,轻手,居士本来无垢.....<br>
  61.         水垢何曾相受,细看两俱无有,寄语揩背人,轻手,轻手,居士本来无垢.....<br>
  62.         水垢何曾相受,细看两俱无有,寄语揩背人,轻手,轻手,居士本来无垢.....<br>
  63.         水垢何曾相受,细看两俱无有,寄语揩背人,轻手,轻手,居士本来无垢.....<br>
  64.         水垢何曾相受,细看两俱无有,寄语揩背人,轻手,轻手,居士本来无垢.....<br>
  65.         水垢何曾相受,细看两俱无有,寄语揩背人,轻手,轻手,居士本来无垢.....<br>
  66.         水垢何曾相受,细看两俱无有,寄语揩背人,轻手,轻手,居士本来无垢.....<br>
  67.         水垢何曾相受,细看两俱无有,寄语揩背人,轻手,轻手,居士本来无垢.....<br>
  68.         水垢何曾相受,细看两俱无有,寄语揩背人,轻手,轻手,居士本来无垢.....<br>
  69.         水垢何曾相受,细看两俱无有,寄语揩背人,轻手,轻手,居士本来无垢.....<br>
  70.         水垢何曾相受,细看两俱无有,寄语揩背人,轻手,轻手,居士本来无垢.....<br>
  71.         水垢何曾相受,细看两俱无有,寄语揩背人,轻手,轻手,居士本来无垢.....<br>
  72.         水垢何曾相受,细看两俱无有,寄语揩背人,轻手,轻手,居士本来无垢.....<br>
  73.         水垢何曾相受,细看两俱无有,寄语揩背人,轻手,轻手,居士本来无垢.....<br>
  74.         水垢何曾相受,细看两俱无有,寄语揩背人,轻手,轻手,居士本来无垢.....<br>
  75.         水垢何曾相受,细看两俱无有,寄语揩背人,轻手,轻手,居士本来无垢.....<br>
  76.         水垢何曾相受,细看两俱无有,寄语揩背人,轻手,轻手,居士本来无垢.....<br>
  77.         水垢何曾相受,细看两俱无有,寄语揩背人,轻手,轻手,居士本来无垢.....<br>
  78.         水垢何曾相受,细看两俱无有,寄语揩背人,轻手,轻手,居士本来无垢.....<br>
  79.         水垢何曾相受,细看两俱无有,寄语揩背人,轻手,轻手,居士本来无垢.....<br>
  80.         水垢何曾相受,细看两俱无有,寄语揩背人,轻手,轻手,居士本来无垢.....<br>
  81.         水垢何曾相受,细看两俱无有,寄语揩背人,轻手,轻手,居士本来无垢.....<br>
  82.         水垢何曾相受,细看两俱无有,寄语揩背人,轻手,轻手,居士本来无垢.....<br>
  83.         水垢何曾相受,细看两俱无有,寄语揩背人,轻手,轻手,居士本来无垢.....<br>
  84.         水垢何曾相受,细看两俱无有,寄语揩背人,轻手,轻手,居士本来无垢.....<br>
  85.         水垢何曾相受,细看两俱无有,寄语揩背人,轻手,轻手,居士本来无垢.....<br>
  86.         水垢何曾相受,细看两俱无有,寄语揩背人,轻手,轻手,居士本来无垢.....<br>
  87.         水垢何曾相受,细看两俱无有,寄语揩背人,轻手,轻手,居士本来无垢.....<br>
  88.         水垢何曾相受,细看两俱无有,寄语揩背人,轻手,轻手,居士本来无垢.....<br>
  89.         水垢何曾相受,细看两俱无有,寄语揩背人,轻手,轻手,居士本来无垢.....<br>
  90.         水垢何曾相受,细看两俱无有,寄语揩背人,轻手,轻手,居士本来无垢.....<br>
  91.         水垢何曾相受,细看两俱无有,寄语揩背人,轻手,轻手,居士本来无垢.....<br>
  92.         水垢何曾相受,细看两俱无有,寄语揩背人,轻手,轻手,居士本来无垢.....<br>
  93.         水垢何曾相受,细看两俱无有,寄语揩背人,轻手,轻手,居士本来无垢.....<br>
  94.         水垢何曾相受,细看两俱无有,寄语揩背人,轻手,轻手,居士本来无垢.....<br>
  95.         水垢何曾相受,细看两俱无有,寄语揩背人,轻手,轻手,居士本来无垢.....<br>
  96.         水垢何曾相受,细看两俱无有,寄语揩背人,轻手,轻手,居士本来无垢.....<br>
  97.         水垢何曾相受,细看两俱无有,寄语揩背人,轻手,轻手,居士本来无垢.....<br>
  98.         水垢何曾相受,细看两俱无有,寄语揩背人,轻手,轻手,居士本来无垢.....<br>
  99.         水垢何曾相受,细看两俱无有,寄语揩背人,轻手,轻手,居士本来无垢.....<br>
  100.         水垢何曾相受,细看两俱无有,寄语揩背人,轻手,轻手,居士本来无垢.....<br>
  101.         水垢何曾相受,细看两俱无有,寄语揩背人,轻手,轻手,居士本来无垢.....<br>
  102.         水垢何曾相受,细看两俱无有,寄语揩背人,轻手,轻手,居士本来无垢.....<br>
  103.         水垢何曾相受,细看两俱无有,寄语揩背人,轻手,轻手,居士本来无垢.....<br>
  104.         水垢何曾相受,细看两俱无有,寄语揩背人,轻手,轻手,居士本来无垢.....<br>
  105.         水垢何曾相受,细看两俱无有,寄语揩背人,轻手,轻手,居士本来无垢.....<br>
  106.         水垢何曾相受,细看两俱无有,寄语揩背人,轻手,轻手,居士本来无垢.....<br>
  107.         水垢何曾相受,细看两俱无有,寄语揩背人,轻手,轻手,居士本来无垢.....<br>
  108.         水垢何曾相受,细看两俱无有,寄语揩背人,轻手,轻手,居士本来无垢.....<br>
  109.         水垢何曾相受,细看两俱无有,寄语揩背人,轻手,轻手,居士本来无垢.....<br>
  110.         水垢何曾相受,细看两俱无有,寄语揩背人,轻手,轻手,居士本来无垢.....<br>
  111.         水垢何曾相受,细看两俱无有,寄语揩背人,轻手,轻手,居士本来无垢.....<br>
  112.         水垢何曾相受,细看两俱无有,寄语揩背人,轻手,轻手,居士本来无垢.....<br>
  113.         水垢何曾相受,细看两俱无有,寄语揩背人,轻手,轻手,居士本来无垢.....<br>
  114.         水垢何曾相受,细看两俱无有,寄语揩背人,轻手,轻手,居士本来无垢.....<br>
  115.         水垢何曾相受,细看两俱无有,寄语揩背人,轻手,轻手,居士本来无垢.....<br>
  116.         水垢何曾相受,细看两俱无有,寄语揩背人,轻手,轻手,居士本来无垢.....<br>
  117.         水垢何曾相受,细看两俱无有,寄语揩背人,轻手,轻手,居士本来无垢.....<br>
  118.         水垢何曾相受,细看两俱无有,寄语揩背人,轻手,轻手,居士本来无垢.....<br>
  119.         水垢何曾相受,细看两俱无有,寄语揩背人,轻手,轻手,居士本来无垢.....<br>
  120.         水垢何曾相受,细看两俱无有,寄语揩背人,轻手,轻手,居士本来无垢.....<br>
  121.         水垢何曾相受,细看两俱无有,寄语揩背人,轻手,轻手,居士本来无垢.....<br>
  122.         水垢何曾相受,细看两俱无有,寄语揩背人,轻手,轻手,居士本来无垢.....<br>
  123.         水垢何曾相受,细看两俱无有,寄语揩背人,轻手,轻手,居士本来无垢.....<br>
  124.         水垢何曾相受,细看两俱无有,寄语揩背人,轻手,轻手,居士本来无垢.....<br>
  125.         水垢何曾相受,细看两俱无有,寄语揩背人,轻手,轻手,居士本来无垢.....<br>
  126.         水垢何曾相受,细看两俱无有,寄语揩背人,轻手,轻手,居士本来无垢.....<br>
  127.         水垢何曾相受,细看两俱无有,寄语揩背人,轻手,轻手,居士本来无垢.....<br>
  128.         水垢何曾相受,细看两俱无有,寄语揩背人,轻手,轻手,居士本来无垢.....<br>
  129.         水垢何曾相受,细看两俱无有,寄语揩背人,轻手,轻手,居士本来无垢.....<br>
  130.         水垢何曾相受,细看两俱无有,寄语揩背人,轻手,轻手,居士本来无垢.....<br>
  131.         水垢何曾相受,细看两俱无有,寄语揩背人,轻手,轻手,居士本来无垢.....<br>
  132.         水垢何曾相受,细看两俱无有,寄语揩背人,轻手,轻手,居士本来无垢.....<br>
  133.         水垢何曾相受,细看两俱无有,寄语揩背人,轻手,轻手,居士本来无垢.....<br>
  134.         水垢何曾相受,细看两俱无有,寄语揩背人,轻手,轻手,居士本来无垢.....<br>
  135.         水垢何曾相受,细看两俱无有,寄语揩背人,轻手,轻手,居士本来无垢.....<br>
  136.         水垢何曾相受,细看两俱无有,寄语揩背人,轻手,轻手,居士本来无垢.....<br>
  137.     </div>
  138. </body>
  139. </html>
复制代码


animate.js(引入的外部JS):

  1. //缓动动画封装
  2. function animate(ele,target) {
  3.     clearInterval(ele.timer);
  4.     ele.timer = setInterval(function () {
  5.         var step = (target-ele.offsetTop)/10;
  6.         step = step>0?Math.ceil(step):Math.floor(step);
  7.         ele.style.top = ele.offsetTop + step + "px";
  8.         console.log(1);
  9.         if(Math.abs(target-ele.offsetTop)<Math.abs(step)){
  10.             ele.style.top = target + "px";
  11.             clearInterval(ele.timer);
  12.         }
  13.     },25);
  14. }

  15. //封装的scrollTop
  16. function scroll(){  
  17.     return {  
  18.         "top": window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop,  
  19.         "left": window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft  
  20.     }  
  21. }  
复制代码


效果
images/aside.jpg

20180316194853543.jpg
回复

使用道具 举报

0

主题

131

帖子

128

积分

注册会员

Rank: 2

UID
2335
精华
0
金币
-2
威望
0
注册时间
2016-10-10
最后登录
2019-6-15
发表于 2019-3-30 14:14:21  | 显示全部楼层
锄禾日当午,发帖真辛苦。谁知坛中餐,帖帖皆辛苦!
回复 支持 反对

使用道具 举报

0

主题

121

帖子

627

积分

高级会员

Rank: 4

UID
151
精华
0
金币
507
威望
0
注册时间
2016-4-15
最后登录
2019-6-15
发表于 2019-3-30 15:00:22  | 显示全部楼层
啥玩应呀
回复 支持 反对

使用道具 举报

0

主题

117

帖子

371

积分

实习版主

Rank: 7Rank: 7Rank: 7

UID
137
精华
0
金币
255
威望
0
注册时间
2016-4-12
最后登录
2019-6-14
发表于 2019-3-30 16:17:14  | 显示全部楼层
LZ敢整点更有创意的不?兄弟们等着围观捏~
回复 支持 反对

使用道具 举报

0

主题

129

帖子

706

积分

高级会员

Rank: 4

UID
146
精华
0
金币
547
威望
2
注册时间
2016-4-14
最后登录
2019-6-14
发表于 2019-3-30 17:48:48  | 显示全部楼层
我了个去,顶了
回复 支持 反对

使用道具 举报

0

主题

126

帖子

132

积分

注册会员

Rank: 2

UID
53
精华
0
金币
5
威望
1
注册时间
2016-3-30
最后登录
2019-6-15
发表于 2019-3-30 19:00:08  | 显示全部楼层
不知该说些什么。。。。。。就是谢谢
回复 支持 反对

使用道具 举报

0

主题

118

帖子

1600

积分

尊贵VIP

Rank: 8Rank: 8

UID
88
精华
0
金币
1481
威望
1
注册时间
2016-4-2
最后登录
2019-6-15
发表于 2019-3-30 20:01:13  | 显示全部楼层
是爷们的娘们的都帮顶!大力支持
回复 支持 反对

使用道具 举报

0

主题

122

帖子

5183

积分

论坛元老

Rank: 8Rank: 8

UID
141
精华
0
金币
5062
威望
0
注册时间
2016-4-13
最后登录
2019-6-15
发表于 2019-3-30 20:42:07  | 显示全部楼层
回个帖子,下班咯~
回复 支持 反对

使用道具 举报

0

主题

125

帖子

8639

积分

尊贵VIP

Rank: 8Rank: 8

UID
273
精华
0
金币
8515
威望
0
注册时间
2016-5-14
最后登录
2019-6-15
发表于 2019-3-30 21:32:34  | 显示全部楼层
今天没吃药感觉自己萌萌哒
回复 支持 反对

使用道具 举报

0

主题

128

帖子

136

积分

注册会员

Rank: 2

UID
54
精华
0
金币
7
威望
1
注册时间
2016-3-30
最后登录
2019-6-15
发表于 2019-3-30 23:21:15  | 显示全部楼层
我去年买了表
回复 支持 反对

使用道具 举报

发表回复

*滑块验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
关于我们
友情链接
联系我们
帮助中心
站长交流
购买须知
支付方式
服务支持
资源下载
售后服务
定制流程
关注我们
官方微博
官方空间
官方微信
快速回复 返回顶部 返回列表