发源地·开源项目分享社区

 找回密码
 立即注册
查看: 2189|回复: 0
收起左侧

[其他综合] 纯marquee实现首尾相连滚动效果作用于轮播图的背景

[复制链接]

活雷锋

329

主题

1359

帖子

2667万

积分

管理员

最佳新人活跃会员热心会员推广达人宣传达人灌水之王突出贡献优秀版主荣誉管理论坛元老

UID
1
性别
银票
8889541
铜板
8892050
钢镚
8897155
好友
2
记录
1
日志
0
相册
54
帖子
1359
主题
329
精华
116
分享
0
注册时间
2019-5-13
最后登录
2021-1-3
在线时间
376 小时
卖家信用
买家信用
听众
1
收听
1
居住地
江苏省 苏州市 太仓市 太仓经济开发区
职业
山贼
自我介绍
他们都是叛徒,但我从没恨过他们...
兴趣爱好
IT/互联网/硬件/软件
发表于 2020-8-20 23:31:33 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
原创作者:G.FLOWER
创作日期:2020-08-20
转载请注明:否则视为剽窃
=================
演示:https://amoi.store

非常简单,只用到了6个CSS值,核心运用:position: absolute;z-index:999;前者悬浮,后者置顶。明天我会写一个特殊的轮播图,而且实现的代码也超级简单,简单到牛逼。
以下代码是使用透明云层做的轮播交错背景,,我尝试了多种滚动效果,非常棒。
direction的值:left,right,如果设置为同向,需要分配好不同的速度,达到没有间断的效果,经过调试,我滚动了半小时同向、交错都可以做到无间隙,可以在最底层分别做一个100/200/50速度值,防止万一滚空;
scrollamount的值为速度,建议跨度大一点,交错分布,比如:200/100/5/50/3/40/10/17/8/12/2,底层速度跑快一些,顶层跑慢一些,做好交错点即可做到同向或交错的无缝衔接。


  1. <style>
  2. .gunimg{
  3.     width:100%;
  4.     height:200px;
  5. }
  6. </style>
  7. <div style="margin-left:-20px;    background:#00ddff; ">
  8. <marquee class="gun" behavior="scroll" direction="right" hspace="0" vspace="0" loop="-1" left="-20" scrollamount="50" contenteditable="true"
  9. onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;" width="100%" onmouseover="this.stop();"
  10. onmouseout="this.start();">
  11.   <img class="gunimg" src="/lunboimg/11.png">  
  12.   <img class="gunimg" src="/lunboimg/33.png">   
  13.   <img class="gunimg" src="/lunboimg/22.png">
  14.   <img class="gunimg" src="/lunboimg/44.png">
  15.   <img class="gunimg" src="/lunboimg/11.png">   
  16. </marquee>   
  17. </div>
  18. <div style="margin-left:-20px;margin-top:-200px;position: absolute;z-index:999;">
  19. <marquee class="gun" behavior="scroll" direction="left" hspace="0" vspace="0" loop="-1" left="-20" scrollamount="10" contenteditable="true"
  20. onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;" width="100%" onmouseover="this.stop();"
  21. onmouseout="this.start();">
  22.   <img class="gunimg" src="/lunboimg/22.png">  
  23.   <img class="gunimg" src="/lunboimg/44.png">   
  24.   <img class="gunimg" src="/lunboimg/11.png">
  25.   <img class="gunimg" src="/lunboimg/33.png">
  26.   <img class="gunimg" src="/lunboimg/44.png">   
  27. </marquee>   
  28. </div>
  29. <div style="margin-left:-20px;margin-top:-200px;position: absolute;z-index:999;">
  30. <marquee class="gun" behavior="scroll" direction="right" hspace="0" vspace="0" loop="-1" left="-20" scrollamount="3" contenteditable="true"
  31. onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;" width="100%" onmouseover="this.stop();"
  32. onmouseout="this.start();">
  33.   <img class="gunimg" src="/lunboimg/11.png">  
  34.   <img class="gunimg" src="/lunboimg/44.png">   
  35.   <img class="gunimg" src="/lunboimg/22.png">
  36.   <img class="gunimg" src="/lunboimg/11.png">
  37.   <img class="gunimg" src="/lunboimg/33.png">   
  38. </marquee>   
  39. </div>
  40. <div style="margin-left:-20px;margin-top:-200px;position: absolute;z-index:999;">
  41. <marquee class="gun" behavior="scroll" direction="right" hspace="0" vspace="0" loop="-1" left="-20" scrollamount="30" contenteditable="true"
  42. onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;" width="100%" onmouseover="this.stop();"
  43. onmouseout="this.start();">
  44.   <img class="gunimg" src="/lunboimg/44.png">  
  45.   <img class="gunimg" src="/lunboimg/11.png">   
  46.   <img class="gunimg" src="/lunboimg/33.png">
  47.   <img class="gunimg" src="/lunboimg/22.png">
  48.   <img class="gunimg" src="/lunboimg/33.png">   
  49. </marquee>
  50. </div>
  51. <div style="margin-left:-20px;margin-top:-200px;position: absolute;z-index:999;">
  52. <marquee class="gun" behavior="scroll" direction="left" hspace="0" vspace="0" loop="-1" left="-20" scrollamount="17" contenteditable="true"
  53. onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;" width="100%" onmouseover="this.stop();"
  54. onmouseout="this.start();">
  55.   <img class="gunimg" src="/lunboimg/22.png">  
  56.   <img class="gunimg" src="/lunboimg/33.png">   
  57.   <img class="gunimg" src="/lunboimg/11.png">
  58.   <img class="gunimg" src="/lunboimg/33.png">
  59.   <img class="gunimg" src="/lunboimg/44.png">   
  60. </marquee>  
  61. </div>
  62. <div style="margin-left:-20px;margin-top:-200px;position: absolute;z-index:999;">
  63. <marquee class="gun" behavior="scroll" direction="right" hspace="0" vspace="0" loop="-1" left="-20" scrollamount="27" contenteditable="true"
  64. onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;" width="100%" onmouseover="this.stop();"
  65. onmouseout="this.start();">
  66.   <img class="gunimg" src="/lunboimg/11.png">  
  67.   <img class="gunimg" src="/lunboimg/44.png">   
  68.   <img class="gunimg" src="/lunboimg/11.png">
  69.   <img class="gunimg" src="/lunboimg/33.png">
  70.   <img class="gunimg" src="/lunboimg/22.png">   
  71. </marquee>   
  72. </div>
  73.   
  74. <div style="margin-left:-20px;margin-top:-200px;position: absolute;z-index:999;">
  75. <marquee class="gun" behavior="scroll" direction="left" hspace="0" vspace="0" loop="-1" left="-20" scrollamount="1" contenteditable="true"
  76. onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;" width="100%" onmouseover="this.stop();"
  77. onmouseout="this.start();">
  78.   <img class="gunimg" src="/lunboimg/33.png">  
  79.   <img class="gunimg" src="/lunboimg/11.png">   
  80.   <img class="gunimg" src="/lunboimg/44.png">
  81.   <img class="gunimg" src="/lunboimg/33.png">
  82.   <img class="gunimg" src="/lunboimg/22.png">   
  83. </marquee>   
  84. </div>
  85. <div style="margin-left:-20px;margin-top:-200px;position: absolute;z-index:999;">
  86. <marquee class="gun" behavior="scroll" direction="right" hspace="0" vspace="0" loop="-1" left="-20" scrollamount="14" contenteditable="true"
  87. onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;" width="100%" onmouseover="this.stop();"
  88. onmouseout="this.start();">
  89.   <img class="gunimg" src="/lunboimg/33.png">  
  90.   <img class="gunimg" src="/lunboimg/22.png">   
  91.   <img class="gunimg" src="/lunboimg/44.png">
  92.   <img class="gunimg" src="/lunboimg/11.png">
  93.   <img class="gunimg" src="/lunboimg/33.png">   
  94. </marquee>   
  95. </div>
  96.    
  97. <div style="margin-left:-20px;margin-top:-200px;position: absolute;z-index:999;">
  98. <marquee class="gun" behavior="scroll" direction="left" hspace="0" vspace="0" loop="-1" left="-20" scrollamount="9" contenteditable="true"
  99. onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;" width="100%" onmouseover="this.stop();"
  100. onmouseout="this.start();">
  101.   <img class="gunimg" src="/lunboimg/33.png">  
  102.   <img class="gunimg" src="/lunboimg/44.png">   
  103.   <img class="gunimg" src="/lunboimg/22.png">
  104.   <img class="gunimg" src="/lunboimg/11.png">
  105.   <img class="gunimg" src="/lunboimg/44.png">   
  106. </marquee>   
  107. </div>   
  108.    
  109. <div style="margin-left:-20px;margin-top:-200px;position: absolute;z-index:999;">
  110. <marquee class="gun" behavior="scroll" direction="right" hspace="0" vspace="0" loop="-1" left="-20" scrollamount="5" contenteditable="true"
  111. onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;" width="100%" onmouseover="this.stop();"
  112. onmouseout="this.start();">
  113.   <img class="gunimg" src="/lunboimg/44.png">  
  114.   <img class="gunimg" src="/lunboimg/22.png">   
  115.   <img class="gunimg" src="/lunboimg/33.png">
  116.   <img class="gunimg" src="/lunboimg/44.png">
  117.   <img class="gunimg" src="/lunboimg/11.png">   
  118. </marquee>   
  119. </div>
  120. <div style="margin-left:-20px;margin-top:-200px;position: absolute;z-index:999;">
  121. <marquee class="gun" behavior="scroll" direction="left" hspace="0" vspace="0" loop="-1" left="-20" scrollamount="45" contenteditable="true"
  122. onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;" width="100%" onmouseover="this.stop();"
  123. onmouseout="this.start();">
  124.   <img class="gunimg" src="/lunboimg/33.png">  
  125.   <img class="gunimg" src="/lunboimg/11.png">   
  126.   <img class="gunimg" src="/lunboimg/44.png">
  127.   <img class="gunimg" src="/lunboimg/33.png">
  128.   <img class="gunimg" src="/lunboimg/22.png">   
  129. </marquee>   
  130. </div>
  131. <div style="margin-left:-20px;margin-top:-200px;position: absolute;z-index:999;">
  132. <marquee class="gun" behavior="scroll" direction="right" hspace="0" vspace="0" loop="-1" left="-20" scrollamount="15" contenteditable="true"
  133. onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;" width="100%" onmouseover="this.stop();"
  134. onmouseout="this.start();">
  135.   <img class="gunimg" src="/lunboimg/22.png">  
  136.   <img class="gunimg" src="/lunboimg/44.png">   
  137.   <img class="gunimg" src="/lunboimg/11.png">
  138.   <img class="gunimg" src="/lunboimg/33.png">
  139.   <img class="gunimg" src="/lunboimg/44.png">   
  140. </marquee>   
  141. </div>
复制代码


哎...今天够累的,签到来了4...
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|kedoutd.cn|wdc.store|fll.store|zuz.store|newbe.wang|pvp.store ( 苏ICP备14054272号 )

GMT+8, 2021-3-5 17:59

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表