很多前端都离不开滚动的特效,调用插件繁琐,后期更改麻烦,考虑到这些因素,自己写了一套无限循环滚动的小特效。
首先滚动特效很好写,用css就可以完成,下面写一个基础css向上循环滚动特效
html
<div class="wrap"> <div class="content"> <p>第一行数据</p> <p>第二行数据</p> </div> </div>
css
.wrap{height:30px;overflow: hidden;position: absolute;top:30;left: 100;width: 100%} p{margin:0;height: 30px;width: 100%} .content p{ position: absolute; } @-webkit-keyframes anim1{ 0% {top: 30px;opacity: 1} 50% {top: -30px;opacity: 1} 75% {top: -30px ;opacity: 0} 100%{top:30px;opacity: 0} } @-webkit-keyframes anim2{ 0% {top: -30px;opacity: 0} 25% {top: 30px;opacity: 0} 50% {top: 30px;opacity: 1} 100%{top: -30px;opacity: 1} } .content p:nth-child(1){background-color: red;} .content p:nth-child(2){background-color: yellow;} .content p:nth-child(1){ -webkit-animation: anim1 3s linear infinite; } .content p:nth-child(2){ -webkit-animation: anim2 3s linear infinite; }
上面html+css就可以实现滚动了,不过我们要是想左右滚动,滚动图片,并且想循环滚动就需要通过js来完成了,这个功能的重点在于循环滚动,那如何让滚动过得图片在从末尾出来呢,对此我想到了一个解决方案,就是同样的图片出现两组,让两组图片头尾相连,当地二组图片头部滚动到第一组头部的位置时,就让两组图片的位置还原,这样就悄无声息的交换了位置,速度之快用肉眼是看不出来的,废话不多说,下面挂代码
html
<div class="xiangshang"> <div class="box1" id="box1"> <div class="xiangxiao" style="background: url(__STATIC__/web/img/xiangmu1.png)no-repeat;"> 中建三局西安奥体中心 </div> <div class="xiangxiao" style="background: url(__STATIC__/web/img/xiangmu2.png)no-repeat;"> 中建八局西安国际会议中心 </div> <div class="xiangxiao" style="background: url(__STATIC__/web/img/xiangmu3.png)no-repeat;"> 北京城建北京大兴国际机场 </div> <div class="xiangxiao" style="background: url(__STATIC__/web/img/xiangmu4.png)no-repeat;"> 中建八局山东科技馆新馆 </div> <div class="xiangxiao" style="background: url(__STATIC__/web/img/xiangmu5.png)no-repeat;"> 中建一局阿里云谷园区 </div> <div class="xiangxiao" style="background: url(__STATIC__/web/img/xiangmu6.png)no-repeat;"> 中建八局广西分公司昆明恒隆广场 </div> <div class="xiangxiao" style="background: url(__STATIC__/web/img/xiangmu7.png)no-repeat;"> 中建一局、三局深圳国际会展中心 </div> <div class="xiangxiao" style="background: url(__STATIC__/web/img/xiangmu8.png)no-repeat;"> 中建八局西安丝路国际会览中心 </div> <div class="xiangxiao" style="background: url(__STATIC__/web/img/xiangmu9.png)no-repeat;"> 中建一局城市副中心 </div> <div class="xiangxiao" style="background: url(__STATIC__/web/img/xiangmu10.png)no-repeat;"> 中建三局宁波国华金融大厦项目 </div> </div> <div class="box2" id="box2"> <div class="xiangxiao" style="background: url(__STATIC__/web/img/xiangmu1.png)no-repeat;"> 中建三局西安奥体中心 </div> <div class="xiangxiao" style="background: url(__STATIC__/web/img/xiangmu2.png)no-repeat;"> 中建八局西安国际会议中心