很多前端都离不开滚动的特效，调用插件繁琐，后期更改麻烦，考虑到这些因素，自己写了一套无限循环滚动的小特效。
首先滚动特效很好写，用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;">中建八局西安国际会议中心</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>
css
.xiangshang {height: 48%;width: 100%;overflow: hidden;position: relative; } .box1, .box2{width: 3530px;height: 100%;position: absolute; }.box2{left: 3530px; }
js
// 项目滚动特效var _box1 = document.getElementById("box1");var _box2 = document.getElementById("box2");var _box3 = document.getElementById("box3");var _box4 = document.getElementById("box4");var x = 0;var y = 0;var fun = function() {_box1.style.left = x + 'px';_box2.style.left = (x + 3530) + 'px';_box3.style.right = y + 'px';_box4.style.right = (y + 3530) + 'px';x--;y--;if ((x + 3530) == 0) {x = 0;}if ((y + 3530) == 0) {y = 0;}}$(".xiangxiao").mouseover(function() {$(this).css("background-size", "120% 120%");});$(".xiangxiao").mouseout(function() {$(this).css("background-size", "100% 100%");});setInterval(fun, 10);
这里box1和box2就是上面所说的两组图片了，可以看到他们中的内容是一模一样的，通过js我们可以看出他的计算和移动过程，那么这个box3和box4就是反方向的移动计算，在html和css里并没有表现出来，同时为了展现鼠标悬停的效果，在鼠标经过时加上了背景图片放大的特效。这样滚动样式的特效就做好了。
)
