JavaScript实现页面无缝滚动效果

 更新时间:2022年04月10日 15:46:48   作者:言只 石皮  
这篇文章主要为大家详细介绍了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);
    },
  }
  },
};```

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • bootstrap multiselect下拉列表功能

    bootstrap multiselect下拉列表功能

    这篇文章主要为大家详细介绍了bootstrap multiselect下拉列表功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • 帝国cms首页列表页实现点赞功能

    帝国cms首页列表页实现点赞功能

    这篇文章主要介绍了帝国cms首页列表页实现点赞功能的相关资料,需要的朋友可以参考下
    2017-10-10
  • webpack的CSS加载器的使用

    webpack的CSS加载器的使用

    这篇文章主要介绍了webpack的CSS加载器的使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • 微信小程序实现分享商品海报功能

    微信小程序实现分享商品海报功能

    这篇文章主要为大家详细介绍了微信小程序实现分享商品海报功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-09-09
  • JS重要知识点小结

    JS重要知识点小结

    这里列出了一些JS重要知识点(不全面,但自己感觉很重要)。彻底理解并掌握这些知识点,对于每个想要深入学习JS的朋友应该都是必须的
    2011-11-11
  • JS对象复制(深拷贝和浅拷贝)

    JS对象复制(深拷贝和浅拷贝)

    这篇文章主要介绍了JS对象复制(深拷贝和浅拷贝),并附有详细代码,感兴趣的小伙伴们,可以参考下
    2021-04-04
  • 微信小程序开发探究

    微信小程序开发探究

    这篇文章主要介绍了微信小程序开发探究,非常具有实用价值,需要的朋友可以参考下。
    2016-12-12
  • 纯js实现悬浮按钮组件

    纯js实现悬浮按钮组件

    这篇文章主要为大家详细介绍了纯js实现悬浮按钮组件的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • javascript事件委托的方式绑定详解

    javascript事件委托的方式绑定详解

    我们在学习JavaScript中,难免都会去网上查一些资料,也许偶尔就会遇到“事件委托”,但是,大多数时说的是“事件绑定”,对于“事件委托”,或是不提,或是浅尝辄止,对于我这个比较好奇的人来说,实在很头疼,尤其是想更多的了解“事件委托”的时候
    2015-06-06
  • 微信小程序使用Vant Weapp组件库的方法步骤

    微信小程序使用Vant Weapp组件库的方法步骤

    这篇文章主要给大家介绍了关于微信小程序使用Vant Weapp组件库的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用微信小程序具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-08-08

最新评论