1. 首页
  2. 新闻资讯
  3. 正文

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);      },    }    },  };```

上一个：被猫咬了像针眼的小口要打免疫球蛋白么（被猫咬了针眼那么大用打疫苗么）

下一个：生物疫苗有什么区别（生物疫苗一样吗）

热门文章

归纳