JavaScript实现页面无缝滚动效果

第JavaScript实现页面无缝滚动效果本文实例为大家分享了JavaScript实现页面无缝滚动效果的具体代码，供大家参考，具体内容如下

目前我只使用两种方式，如果还有其他方式，希望推荐一下。

1、js+transform

使用定时器动态增加大小，再把值赋给transform，实现位置偏移，来实现无缝滚动。

html

一定要循环两遍数据，这样的话，会出现两个一样的数据，在一个数据消失后，不会使页面空白，而这时transform归0，有从头开始，因为两个数据相同，归0后视觉上就像无缝滚动。

div@mouseenter="moveStar()"@mouseleave="moveLeave()"

tableid="rollOne"border="1":style="{transform:'translate(0px,'+flvPlayerTimer+'px)'}"

trv-for="itemintableData":key="item.index"

tdwidth="25%"{{item.fxsj}}/td

tdwidth="15%"{{item.gjbh}}/td

tdwidth="35%"{{item.pzgs}}个/td

tdwidth="25%"@click="popu(2,item)"span详情/span/td

/tr

/table

tableborder="1":style="{transform:'translate(0px,'+flvPlayerTimer+'px)'}"

trv-for="itemintableData":key="item.index"

tdwidth="25%"{{item.fxsj}}/td

tdwidth="15%"{{item.gjbh}}/td

tdwidth="35%"{{item.pzgs}}个/td

tdwidth="25%"@click="popu(2,item)"span详情/span/td

/tr

/table

/div

js

exportdefault{

name:"rolling",

data(){

return{

flvPlayerTimer:0,

timer:null

}

},

props:{

tableData:{

type:Array

},

},

mounted(){

this.timer=setInterval(()={

this.flvPlayerTimer-=1

if(this.flvPlayerTimer==-($('#rollOne').height())){

this.flvPlayerTimer=0

}

},100)

//别忘了定时器清除

this.$once('hook:beforeDestroy',()={

clearInterval(this.timer);

this.timer=null;

})

},

methods:{

//鼠标触碰停止

moveStar(){

clearInterval(this.timer);

this.timer2=null;

},

//鼠标离开始

moveLeave(){

this.timer=setInterval(()={

this.flvPlayerTimer-=1

if(this.flvPlayerTimer==-($('#rollOne').height())){

this.flvPlayerTimer=0

}

},100)

},

}

}

css

.fxlx{

height:16vh;

width:100%;

table,tabletrtd{

border:1pxsolid

rgba(41,143,229,0.3);

}

table{

width:90%;

margin:0auto;

th{

opacity:0.7;

background:linear-gradient(rgba(53,123,203,0.7),rgba(9,57,113,0.7));

font-size:9rem;

font-family:PingFangSCRegular,PingFangSCRegular-Regular;

font-weight:400;

color:#ffffff;

height:28rem;

}

td{

opacity:0.8;

font-size:9rem;

height:30rem;

font-family:PingFangSCRegular,PingFangSCRegular-Regular;

font-weight:400;

color:#ffffff;

background:#001c38

}

}

}

2、使用vue-seamless-scroll插件

1、安装vue-seamless-scroll

npminstallvue-seamless-scroll--save

2、引入组件

在某些时候实际页面渲染后会出现点击事件失效的情况。这个问题是因为vue-seamless-scroll是用重复渲染一遍内部元素来实现滚动的，而JS的onclick只检测页面渲染时的DOM元素。记得在入门原生JS的时候也经常会遇见这个问题，经过一般百度，采用事件委托的方式解决。

在section上绑定事件handleClick，捕获点击的DOM节点。事件中需求的数据可以直接用data绑在相应的dom上。

div@click.stop="handleClick($event)"

vue-seamless-scroll:data="sendVal.body":class-option="defaultOption"

!--

divv-for="(item,index)insendVal":key="index"@click="jump(item)"--

!--

divv-show="index%2==0"{{item}}/div--

!--

divv-show="index%2==1"{{item}}/div--

!--

/div--

tableref="movebox"

trv-for="(item,index)insendVal.body":key="index"

td

:data-obj="JSON.stringify(item)"

:id="'xzq'+index"

width="15%"

{{item.range}}

/td

td

:data-obj="JSON.stringify(item)"

:id="'wflx'+index"

width="20%"

{{item.wflx}}

/td

td:data-obj="JSON.stringify(item)":id="'sj'+index"width="25%"

{{item.sbsj}}

/td

td:data-obj="JSON.stringify(item)":id="'zt'+index"width="20%"

img

:src="item.image_result"

/

/td

/tr

/table

/vue-seamless-scroll

/div

js

importvueSeamlessScrollfrom"vue-seamless-scroll";

exportdefault{

name:"my-marquee-top",

props:{

sendVal:Object,

data(){

return{

isShow:true,

time:"",

url:"",

};

components:{

vueSeamlessScroll,

computed:{

defaultOption(){

return{

step:0.2,//数值越大速度滚动越快

limitMoveNum:2,//开始无缝滚动的数据量this.dataList.length

hoverStop:true,//是否开启鼠标悬停stop

direction:1,//