logo展示无限平移实现
直接贴代码：
<html> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="vue.js"></script> </head> <style> /*body{overflow-x: hidden;}*/ li{ list-style-type: none; } #app{ position: relative; width: 100%; height: 105%; background: linear-gradient(to bottom,#1e405c,#61c7ed); margin-top: -0.3em; overflow: hidden; } .suppler-h2{ text-align: center; font-size: 38px; color: #facb01; padding-top:1.8em; } .suppler-p{ text-align: center; font-size: 16px; color: #facb01; margin-top:-0.5em; padding-bottom: 2.5em; } .img-ul{ width: 7150px; height: 70%; margin-top: 3em; top: 10px; } .img-ul li{ border-radius: 50%; box-shadow:0 15px 35px rgba(0,0,0,0.1),0 3px 10px rgba(0,0,0,0.07); display: inline-block; margin-left: -25px; margin-top: 5px; } .img{ height: auto; } @media screen and (max-width: 1366px) { #appVue{ height: 78%; } } @media screen and (max-width: 736px) { #appVue{ height: 50%; } .img-ul{ width: 7150px; height: 70%; margin-top: 1em; top: 10px; } .suppler-h2{ text-align: center; font-size: 26px; color: #facb01; padding-top:1em; padding-bottom: 0.5em; } .suppler-p{ text-align: center; font-size: 16px; color: #facb01; padding-top:0.5em; padding-bottom: 1em; } } </style> <script type="text/javascript" src="jquery-3.2.0.min.js"></script> <body> <div id="app"> <h2 class="suppler-h2">已入驻商家</h2> <p class="suppler-p">业内领先卖家</p> <ul class="img-ul" id="ImgUl"> <!-- 遍历背景图片地址和title,并设置背景图片样式 --> <li v-for='src in src' v-bind:title='src.ImgName' :style='{background: src.url,"background-repeat": backgroundRepeat,"background-position": backgroundPosition,"background-size":backgroundSize}'></li> </ul> </div> <script type="text/javascript"> let ImgUrlArrOld = [{"ImgName":"ATQ","url":"url(\"./logo/ATQ.png\")"},{"ImgName":"BCF","url":"url(\"./logo/BCF.png\")"},{"ImgName":"BENSO-RPF","url":"url(\"./logo/BENSO-RPF.png\")"},{"ImgName":"BOSCH","url":"url(\"./logo/BOSCH.png\")"},{"ImgName":"CASE","url":"url(\"./logo/CASE.png\")"},{"ImgName":"CAT","url":"url(\"./logo/CAT.png\")"},{"ImgName":"Cummins","url":"url(\"./logo/Cummins.png\")"},{"ImgName":"DAIDO-METAL","url":"url(\"./logo/DAIDO-METAL.png\")"},{"ImgName":"DAMEIS","url":"url(\"./logo/DAMEIS.png\")"},{"ImgName":"Donaldson","url":"url(\"./logo/Donaldson.png\")"},{"ImgName":"DOOSAN","url":"url(\"./logo/DOOSAN.png\")"},{"ImgName":"Enface","url":"url(\"./logo/Enface.png\")"},{"ImgName":"Garrett","url":"url(\"./logo/Garrett.png\")"},{"ImgName":"GiMPO","url":"url(\"./logo/GiMPO.png\")"},{"ImgName":"GS.BLAZERS","url":"url(\"./logo/GS.BLAZERS.png\")"},{"ImgName":"Henvo","url":"url(\"./logo/Henvo.png\")"},{"ImgName":"HINO","url":"url(\"./logo/HINO.png\")"},{"ImgName":"HITACHI","url":"url(\"./logo/HITACHI.png\")"},{"ImgName":"HJYB","url":"url(\"./logo/HJYB.png\")"},{"ImgName":"HYUNDAI","url":"url(\"./logo/HYUNDAI.png\")"},{"ImgName":"IHI","url":"url(\"./logo/IHI.png\")"},{"ImgName":"ISUZU","url":"url(\"./logo/ISUZU.png\")"},{"ImgName":"JCB","url":"url(\"./logo/JCB.png\")"},{"ImgName":"JiaQing","url":"url(\"./logo/JiaQing.png\")"},{"ImgName":"JOHN DEERE","url":"url(\"./logo/JOHN DEERE.png\")"},{"ImgName":"JOMOK","url":"url(\"./logo/JOMOK.png\")"},{"ImgName":"KATO","url":"url(\"./logo/KATO.png\")"},{"ImgName":"kawasaki","url":"url(\"./logo/kawasaki.png\")"},{"ImgName":"KOBELCO","url":"url(\"./logo/KOBELCO.png\")"},{"ImgName":"KOMAISU","url":"url(\"./logo/KOMAISU.png\")"},{"ImgName":"Koyo","url":"url(\"./logo/Koyo.png\")"},{"ImgName":"KYB","url":"url(\"./logo/KYB.png\")"},{"ImgName":"KZ","url":"url(\"./logo/KZ.png\")"},{"ImgName":"LIEBHERR","url":"url(\"./logo/LIEBHERR.png\")"},{"ImgName":"LISHIDE","url":"url(\"./logo/LISHIDE.png\")"},{"ImgName":"LiuGong","url":"url(\"./logo/LiuGong.png\")"},{"ImgName":"LONKING","url":"url(\"./logo/LONKING.png\")"},{"ImgName":"LOVOL","url":"url(\"./logo/LOVOL.png\")"},{"ImgName":"MAHLE","url":"url(\"./logo/MAHLE.png\")"},{"ImgName":"MITSUBISHI","url":"url(\"./logo/MITSUBISHI.png\")"},{"ImgName":"NOK","url":"url(\"./logo/NOK.png\")"},{"ImgName":"NTN","url":"url(\"./logo/NTN.png\")"},{"ImgName":"PHOSSET","url":"url(\"./logo/PHOSSET.png\")"},{"ImgName":"QFS","url":"url(\"./logo/QFS.png\")"},{"ImgName":"REGAL","url":"url(\"./logo/REGAL.png\")"},{"ImgName":"RIKEN","url":"url(\"./logo/RIKEN.png\")"},{"ImgName":"SAKURA","url":"url(\"./logo/SAKURA.png\")"},{"ImgName":"SANY","url":"url(\"./logo/SANY.png\")"},{"ImgName":"SDLG","url":"url(\"./logo/SDLG.png\")"},{"ImgName":"SHANTUI","url":"url(\"./logo/SHANTUI.png\")"},{"ImgName":"sintery","url":"url(\"./logo/sintery.png\")"},{"ImgName":"ST","url":"url(\"./logo/ST.png\")"},{"ImgName":"SUMITOMO","url":"url(\"./logo/SUMITOMO.png\")"},{"ImgName":"SUNWARD","url":"url(\"./logo/SUNWARD.png\")"},{"ImgName":"TBK-1","url":"url(\"./logo/TBK-1.png\")"},{"ImgName":"TBK","url":"url(\"./logo/TBK.png\")"},{"ImgName":"TOSD","url":"url(\"./logo/TOSD.png\")"},{"ImgName":"VOLVO","url":"url(\"./logo/VOLVO.png\")"},{"ImgName":"XGMA","url":"url(\"./logo/XGMA.png\")"},{"ImgName":"YANMAR","url":"url(\"./logo/YANMAR.png\")"},{"ImgName":"YOUFU","url":"url(\"./logo/YOUFU.png\")"},{"ImgName":"YTM","url":"url(\"./logo/YTM.png\")"},{"ImgName":"YUCHAI","url":"url(\"./logo/YUCHAI.png\")"},{"ImgName":"YXM","url":"url(\"./logo/YXM.png\")"},{"ImgName":"ZEXEL","url":"url(\"./logo/ZEXEL.png\")"},{"ImgName":"ZOOMLION","url":"url(\"./logo/ZOOMLION.png\")"},{"ImgName":"久保田","url":"url(\"./logo/久保田.png\")"},{"ImgName":"佰工","url":"url(\"./logo/佰工.png\")"},{"ImgName":"冠卓","url":"url(\"./logo/冠卓.png\")"},{"ImgName":"山字牌","url":"url(\"./logo/山字牌.png\")"},{"ImgName":"幸佳比","url":"url(\"./logo/幸佳比.png\")"},{"ImgName":"漆先生","url":"url(\"./logo/漆先生.png\")"},{"ImgName":"银钛","url":"url(\"./logo/银钛.png\")"}]; //生成随机数组 let ImgUrlArr = new Array(); while(ImgUrlArr.length<ImgUrlArrOld.length){ let num = ImgUrlArrOld[Math.floor(Math.random() * ImgUrlArrOld.length)]; if (ImgUrlArr.indexOf(num)<0) { ImgUrlArr.push(num); } } let vm = new Vue({ el:'#app', data:{ src:ImgUrlArr, backgroundRepeat: 'no-repeat', backgroundPosition: 'center', backgroundSize: '100% 100%', }, // 加载无限平移函数 methods:{ ImgInfiniteRolling: function(){ ImgInfiniteRolling(-200,1) }, }, //页面模板加载完成后调用无限平移函数 mounted(){ this.ImgInfiniteRolling() } }) //无限平移方法封装函数，begin返回尾部的触发值，speed每毫秒平移的速度 function ImgInfiniteRolling(begin,speed){ let img = document.getElementById('ImgUl').children; let WindowHeight = document.body.clientHeight; let WindowWidth = document.body.clientWidth; let WindowHeightNum; if (WindowHeight>=700) { WindowHeightNum=1; }else if(WindowHeight<700){ WindowHeightNum=0.75; } if(WindowWidth<=736){ WindowHeightNum=0.52; } //随机生成logo的left、top、width、height for (let i = 0; i<img.length;i++) { let left = i,top; if (i%5==0) { top = (25*Math.random()+250)*WindowHeightNum; img[i].style.transform = "translate3d("+left+"px,"+top+"px,"+"0)"; img[i].style.width = (70*Math.random()+80)*WindowHeightNum+'px'; img[i].style.height = img[i].style.width; }else if (i%5==1) { top = (25*Math.random()-25)*WindowHeightNum; img[i].style.transform = "translate3d("+left+"px,"+top+"px,"+"0)"; img[i].style.width = (50*Math.random()+100)*WindowHeightNum+'px'; img[i].style.height = img[i].style.width; }else if (i%5==2) { top = (25*Math.random()+175)*WindowHeightNum; img[i].style.transform = "translate3d("+left+"px,"+top+"px,"+"0)"; img[i].style.width = (40*Math.random()+100)*WindowHeightNum+'px'; img[i].style.height = img[i].style.width; }else if (i%5==3) { top = (25*Math.random()+325)*WindowHeightNum; img[i].style.transform = "translate3d("+left+"px,"+top+"px,"+"0)"; img[i].style.width = (70*Math.random()+80)*WindowHeightNum+'px'; img[i].style.height = img[i].style.width; }else if (i%5==4) { top = (25*Math.random()+80)*WindowHeightNum; img[i].style.transform = "translate3d("+left+"px,"+top+"px,"+"0)"; img[i].style.width = (70*Math.random()+80)*WindowHeightNum+'px'; img[i].style.height = img[i].style.width; } TimeSet(img[i],begin,speed); } //最后一个logo的位置，传递给平移函数，判断末尾衔接位置 let endLeft = img[img.length-1].offsetLeft + img[img.length-1].offsetWidth*0.3; //无限循环调用平移函数 function TimeSet(img,begin,speed) { setInterval(function (){ImgFun(img,endLeft,begin,speed);}, 100); } //平移函数，设置平移起点begin，平移速度speed function ImgFun(img,endLeft,begin,speed) { //获取transform属性，并解析成X,Y轴数值 let translates = document.defaultView.getComputedStyle(img,null).transform; let translateX = parseFloat(translates.substring(6).split(',')[4]); let tanslateY = parseFloat(translates.substring(6).split(',')[5]); begin = begin-img.offsetLeft; if (translateX>begin) { translateX = translateX-speed; img.style.transform = "translate3d("+translateX+"px,"+tanslateY+"px,"+"0)"; }else if (translateX<=begin) { translateX = endLeft-img.offsetLeft; img.style.transform = "translate3d("+translateX+"px,"+tanslateY+"px,"+"0)"; } } } </script> </body> </html>
