本文由云+社区发布最近一个活动页面需要做一个可以左右滑动的抽奖效果，所以结合css的transform属性和js可以模拟出无限滚动的效果。效果先行：demo地址：https://kiroroyoyo.github.io/...实现过程1.结构和样式结构：卡片分为前后两行，每行插入10个div节点制作左右位移效果。样式：设置每列正好在中间（或接近中间），如下图。A。前排（cardFrond）相对视口的初始位置（左：-255.5%；）：b。后排（backFrond）相对视口的初始位置（left:-228.3%;）：2.无限滚动原理由于这里的停止位置是固定的，因此前排始终是当前卡片相对于视口，而后排永远是两张卡片相对于视口的中心，每张卡片都是一样的，所以当卡片列表向前或向右移动到一个目标位置时，将列表重置到初始位置并继续滚动。以下图最前排的卡片为例：那么当滚动停止时，列表样式会统一设置为transform:translateX(0)。对于用户来说，这个操作是感知不到的，就认为用户滑动到了一个新的位置。3.滑动过程的实现a．目标位移和框架位移为了滑动到停止位置后的easing效果，当用户左右滑动屏幕时，会记录滑动距离，计算目标位移位置和卡片的目标位移.位置是规则的，因为有10张牌平分宽度，位置必须是（100%/10）的整数倍，比如-40%，-30%，...40%，所以以确保目标位置与初始位置重合。目标位移代码片段onDocumentMouseUp:function(e){//如果是点击事件，不设置移动if(!this.fingerTouch)return;this.moveDirect=this.lon>0?1:-1;this.transNum=这个。lon/10+this.moveDirect;this.lon=Math.round(this.transNum)*10;this.fingerTouch=false;}记录完目标位移后，每一帧都会以一定的帧位移不断逼近目标位移，使其在手指离开屏幕时仍然具有缓慢滑动到目标位置的缓动效果。这时候需要判断当前仓位是大于40%还是小于-40%。如果超过这个限制值，需要重新设置目标位移和框架位移，使其在限制值之内。animate:function(){this.prePos+=(this.lon-this.prePos)*0.1;如果(this.prePos>40){this.lon=this.lon-40;this.prePos=this.prePos-40;}elseif(this.prePos<-40){this.lon=this.lon+40;this.prePos=this.prePos+40;}//判断是否到达目标位置if(Math.abs(this.prePos-this.lon)<0.01&&Math.abs(this.lon)>0.01&&(!this.fingerTouch)){this.ani_move=错误的;this.prePos=0;this.frondCard.style="transform:translateX("+this.prePos+"%)";this.backCard.style="transform:translateX("+this.prePos+"%)";}else{this.frondCard.style="transform:translateX("+this.prePos+"%)";this.backCard.style="transform:translateX("+(-this.prePos)+"%)";requestAnimationFrame(this.animate.bind(this));}，乙。连续滑动判断当用户在上一次滑动动画结束前第二次滑动时，需要进行如下操作：1).判断滑动手指已经离开屏幕但动画还没有结束，此时需要记录两个flag，一个是ani_move，记录动画是否还在进行中，fingerTouch记录手指是否停留在屏幕上2)。判断第二次滑动方向是否和第一次不同，如果不同，则将上一帧位移重新设置为0。为了防止上一帧位移对移动方向影响太大。1)和2)代码片段：if(this.ani_move&&this.fingerTouch==false){//判断是否不同if(((e.clientX-prex)>0?1:-1)==-这.moveDirect){this.lon=0;this.prePos=0;this.moveDirect=-this.moveDirect;}}3).取消第二次滑动时的动画播放和位移重置//如果上次动画没有结束，则不需要再次开始动画并重置目标位移if(this.ani_move&&this.fingerTouch==false){}else{this.lon=0;cardAnimate.animate();}写在最后。目前这种滑动效果只能针对卡牌相同且停留位置固定的情况，因为位置需要重叠。使用csstransform做无限滚动效果可以避免dom节点变化导致的页面重新布局。下图为chromecpu6倍减速调试效果，未触发布局，FPS基本维持在60左右。代码地址：https://github.com/kiroroyoyo...本文已获得作者授权作者发布在腾讯云+社区
