深圳网络营销|深圳网站建设公司|专业网络营销运营推广策划公司,河北省城乡住房和建设厅网站,校园类网站模板,免费观看高清正能量直播下载很多前端都离不开滚动的特效#xff0c;调用插件繁琐#xff0c;后期更改麻烦#xff0c;考虑到这些因素#xff0c;自己写了一套无限循环滚动的小特效。 首先滚动特效很好写#xff0c;用css就可以完成#xff0c;下面写一个基础css向上循环滚动特效 html div class… 很多前端都离不开滚动的特效调用插件繁琐后期更改麻烦考虑到这些因素自己写了一套无限循环滚动的小特效。 首先滚动特效很好写用css就可以完成下面写一个基础css向上循环滚动特效 html div classwrapdiv classcontent
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;} 上面htmlcss就可以实现滚动了不过我们要是想左右滚动滚动图片并且想循环滚动就需要通过js来完成了这个功能的重点在于循环滚动那如何让滚动过得图片在从末尾出来呢对此我想到了一个解决方案就是同样的图片出现两组让两组图片头尾相连当地二组图片头部滚动到第一组头部的位置时就让两组图片的位置还原这样就悄无声息的交换了位置速度之快用肉眼是看不出来的废话不多说下面挂代码 html div classxiangshangdiv classbox1 idbox1div classxiangxiao stylebackground: url(__STATIC__/web/img/xiangmu1.png)no-repeat;中建三局西安奥体中心/divdiv classxiangxiao stylebackground: url(__STATIC__/web/img/xiangmu2.png)no-repeat;中建八局西安国际会议中心/divdiv classxiangxiao stylebackground: url(__STATIC__/web/img/xiangmu3.png)no-repeat;北京城建北京大兴国际机场/divdiv classxiangxiao stylebackground: url(__STATIC__/web/img/xiangmu4.png)no-repeat;中建八局山东科技馆新馆/divdiv classxiangxiao stylebackground: url(__STATIC__/web/img/xiangmu5.png)no-repeat;中建一局阿里云谷园区/divdiv classxiangxiao stylebackground: url(__STATIC__/web/img/xiangmu6.png)no-repeat;中建八局广西分公司昆明恒隆广场/divdiv classxiangxiao stylebackground: url(__STATIC__/web/img/xiangmu7.png)no-repeat;中建一局、三局深圳国际会展中心/divdiv classxiangxiao stylebackground: url(__STATIC__/web/img/xiangmu8.png)no-repeat;中建八局西安丝路国际会览中心/divdiv classxiangxiao stylebackground: url(__STATIC__/web/img/xiangmu9.png)no-repeat;中建一局城市副中心/divdiv classxiangxiao stylebackground: url(__STATIC__/web/img/xiangmu10.png)no-repeat;中建三局宁波国华金融大厦项目/div/divdiv classbox2 idbox2div classxiangxiao stylebackground: url(__STATIC__/web/img/xiangmu1.png)no-repeat;中建三局西安奥体中心/divdiv classxiangxiao stylebackground: url(__STATIC__/web/img/xiangmu2.png)no-repeat;中建八局西安国际会议中心/divdiv classxiangxiao stylebackground: url(__STATIC__/web/img/xiangmu3.png)no-repeat;北京城建北京大兴国际机场/divdiv classxiangxiao stylebackground: url(__STATIC__/web/img/xiangmu4.png)no-repeat;中建八局山东科技馆新馆/divdiv classxiangxiao stylebackground: url(__STATIC__/web/img/xiangmu5.png)no-repeat;中建一局阿里云谷园区/divdiv classxiangxiao stylebackground: url(__STATIC__/web/img/xiangmu6.png)no-repeat;中建八局广西分公司昆明恒隆广场/divdiv classxiangxiao stylebackground: url(__STATIC__/web/img/xiangmu7.png)no-repeat;中建一局、三局深圳国际会展中心/divdiv classxiangxiao stylebackground: url(__STATIC__/web/img/xiangmu8.png)no-repeat;中建八局西安丝路国际会览中心/divdiv classxiangxiao stylebackground: url(__STATIC__/web/img/xiangmu9.png)no-repeat;中建一局城市副中心/divdiv classxiangxiao stylebackground: 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里并没有表现出来同时为了展现鼠标悬停的效果在鼠标经过时加上了背景图片放大的特效。这样滚动样式的特效就做好了。 转载于:https://www.cnblogs.com/qihongbao/p/11071983.html
