JavaScript實現(xiàn)頁面無縫滾動效果

更新時間：2022年04月10日 15:46:48 作者：言只?石皮

這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)頁面無縫滾動效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了JavaScript實現(xiàn)頁面無縫滾動效果的具體代碼，供大家參考，具體內(nèi)容如下

目前我只使用兩種方式，如果還有其他方式，希望推薦一下。

1、js+transform

使用定時器動態(tài)增加大小，再把值賦給 transform，實現(xiàn)位置偏移，來實現(xiàn)無縫滾動。

html

一定要循環(huán)兩遍數(shù)據(jù)，這樣的話，會出現(xiàn)兩個一樣的數(shù)據(jù)，在一個數(shù)據(jù)消失后，不會使頁面空白，而這時transform歸0，有從頭開始，因為兩個數(shù)據(jù)相同，歸0后視覺上就像無縫滾動。

<div style="height: 100%" @mouseenter="moveStar()" @mouseleave="moveLeave()">
? ? ? <table id="rollOne" border="1" :style="{transform:'translate(0px,'+flvPlayerTimer+'px)'}">
? ? ? ? <tr v-for="item in tableData" :key="item.index">
? ? ? ? ? <td width="25%">{{item.fxsj}}</td>
? ? ? ? ? <td width="15%">{{item.gjbh}}</td>
? ? ? ? ? <td width="35%">{{item.pzgs}}個</td>
? ? ? ? ? <td width="25%" style="cursor: pointer" @click="popu(2,item)"><span>詳情</span></td>
? ? ? ? </tr>
? ? ? </table>
? ? ? <table border="1" :style="{transform:'translate(0px,'+flvPlayerTimer+'px)'}">
? ? ? ? <tr v-for="item in tableData" :key="item.index">
? ? ? ? ? <td width="25%">{{item.fxsj}}</td>
? ? ? ? ? <td width="15%">{{item.gjbh}}</td>
? ? ? ? ? <td width="35%">{{item.pzgs}}個</td>
? ? ? ? ? <td width="25%" style="cursor: pointer" @click="popu(2,item)"><span>詳情</span></td>
? ? ? ? </tr>
? ? ? </table>
</div>

js

export default {
? ? ? ? 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,table tr td {
? ? ? border:1px solid ? rgba(41,143,229,0.3);
? ? }
? ? table{
? ? ? width: 90%;
? ? ? margin: 0 auto;
? ? ? th{
? ? ? ? opacity: 0.7;
? ? ? ? background: linear-gradient(rgba(53,123,203,0.7), rgba(9,57,113,0.7));
? ? ? ? font-size: 9rem;
? ? ? ? font-family: PingFang SC Regular, PingFang SC Regular-Regular;
? ? ? ? font-weight: 400;
? ? ? ? color: #ffffff;
? ? ? ? height: 28rem;
? ? ? }
? ? ? td{
? ? ? ? opacity: 0.8;
? ? ? ? font-size: 9rem;
? ? ? ? height: 30rem;
? ? ? ? font-family: PingFang SC Regular, PingFang SC Regular-Regular;
? ? ? ? font-weight: 400;
? ? ? ? color: #ffffff;
? ? ? ? background:#001c38
? ? ? }
? ? }
? }

2、使用vue-seamless-scroll插件

1、安裝vue-seamless-scroll

npm install vue-seamless-scroll --save

2、引入組件

在某些時候?qū)嶋H頁面渲染后會出現(xiàn)點擊事件失效的情況。這個問題是因為vue-seamless-scroll是用重復(fù)渲染一遍內(nèi)部元素來實現(xiàn)滾動的，而JS的onclick只檢測頁面渲染時的DOM元素。記得在入門原生JS的時候也經(jīng)常會遇見這個問題，經(jīng)過一般百度，采用事件委托的方式解決。
在section上綁定事件handleClick，捕獲點擊的DOM節(jié)點。事件中需求的數(shù)據(jù)可以直接用data綁在相應(yīng)的dom上。

<div class="my-inbox" @click.stop="handleClick($event)">
? ? ? <vue-seamless-scroll :data="sendVal.body" :class-option="defaultOption">
? ? ? ? <!-- ? ? ? ?<div v-for="(item, index) in sendVal" :key="index" @click="jump(item)">-->
? ? ? ? <!-- ? ? ? ? ?<div class="wfjl1" v-show="index % 2 == 0">{{ item }}</div>-->
? ? ? ? <!-- ? ? ? ? ?<div class="wfjl2" v-show="index % 2 == 1">{{ item }}</div>-->
? ? ? ? <!-- ? ? ? ?</div>-->
? ? ? ? <table ref="movebox">
? ? ? ? ? <tr v-for="(item, index) in sendVal.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
? ? ? ? ? ? ? ? style="width: 71rem; height: 34rem; margin: 5rem 0"
? ? ? ? ? ? ? ? :src="item.image_result"
? ? ? ? ? ? ? />
? ? ? ? ? ? </td>
? ? ? ? ? </tr>
? ? ? ? </table>
? ? ? </vue-seamless-scroll>
</div>

js

import vueSeamlessScroll from "vue-seamless-scroll";
export default {
? name: "my-marquee-top",
? props: {
? ? sendVal: Object,
? },
? data() {
? ? return {
? ? ? isShow: true,
? ? ? time: "",
? ? ? url: "",
? ? };
? },
? components: {
? ? vueSeamlessScroll,
? },
? computed: {
? ? defaultOption() {
? ? ? return {
? ? ? ? step: 0.2, // 數(shù)值越大速度滾動越快
? ? ? ? limitMoveNum: 2, // 開始無縫滾動的數(shù)據(jù)量 this.dataList.length
? ? ? ? hoverStop: true, // 是否開啟鼠標懸停stop
? ? ? ? direction: 1, // 0向下 1向上 2向左 3向右
? ? ? ? openWatch: true, // 開啟數(shù)據(jù)實時監(jiān)控刷新dom/
? ? ? };
? ? },
? },
? methods: {
? ? handleClick(item) {
? ? ? let message = JSON.parse(item.target.dataset.obj);
? ? ? this.$emit("jump", message);
? ? },
? }
? },
};```

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: