JavaScript实现页面无缝滚动效果

JavaScript实现页面无缝滚动效果

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

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

1、js+transform

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

html

一定要循环两遍数据,这样的话,会出现两个一样的数据,在一个数据消失后,不会使页面空白,而这时transform归0,有从头开始,因为两个数据相同,归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、引入组件

在某些时候实际页面渲染后会出现点击事件失效的情况。这个问题是因为vue-seamless-scroll是用重复渲染一遍内部元素来实现滚动的,而JS的onclick只检测页面渲染时的DOM元素。记得在入门原生JS的时候也经常会遇见这个问题,经过一般百度,采用事件委托的方式解决。
在section上绑定事件handleClick,捕获点击的DOM节点。事件中需求的数据可以直接用data绑在相应的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, // 数值越大速度滚动越快         limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length         hoverStop: true, // 是否开启鼠标悬停stop         direction: 1, // 0向下 1向上 2向左 3向右         openWatch: true, // 开启数据实时监控刷新dom/       };     },   },   methods: {     handleClick(item) {       let message = JSON.parse(item.target.dataset.obj);       this.$emit("jump", message);     },   }   }, };```

推荐阅读