滚动动画和暂停动画

oxygen-1204

已于 2024-02-21 12:09:23 修改

阅读量427

点赞数 7

文章标签：前端 javascript html

于 2024-02-21 12:09:11 首次发布

本文链接：https://blog.csdn.net/oxygensunshine/article/details/136208464

版权

<template>
  <div class="right_2" style="height:auto;">
    <div class="main_title" >
      视频监控
    </div>
    <div style="width:100%;text-align:right;font-size:14px;cursor:pointer;padding:2px;" @click="shiPinMore()">
      <!-- 更多》 -->
      </div>
    <div class="video_container" style="padding:0px;">
      <div class="video_box" @mouseover="stopInterval" @mouseout="antimation" :style="{marginLeft:`${shiftingX}px`}">
        <div class="main_video" @click="doVideoClick('1','杨家沟')">
          <div style="text-align:center;">杨家沟</div>
          <video  autoplay="autoplay" width="100%" height="100%">
            <source src="@/assets/video/CAMERAV.webm" loop="loop" muted="muted"  type="video/mp4">
          </video>
        </div>
        <div class="main_video" @click="doVideoClick('2','董庄沟')">
          <div style="text-align:center;">董庄沟</div>
          <video  autoplay="autoplay" width="100%" height="100%">
            <source src="@/assets/video/CAMERAV.webm" loop="loop" muted="muted"  type="video/mp4">
          </video>
        </div>
        <div class="main_video" @click="doVideoClick('1','杨家沟')">
          <div style="text-align:center;">杨家沟</div>
          <video  autoplay="autoplay" width="100%" height="100%">
            <source src="@/assets/video/CAMERAV.webm" loop="loop" muted="muted"  type="video/mp4">
          </video>
        </div>
        <div class="main_video" @click="doVideoClick('2','董庄沟')">
          <div style="text-align:center;">董庄沟</div>
          <video  autoplay="autoplay" width="100%" height="100%">
            <source src="@/assets/video/CAMERAV.webm" loop="loop" muted="muted"  type="video/mp4">
          </video>
        </div>
      </div>
      <div class="video_box" @mouseover="stopInterval" @mouseout="antimation">
        <div class="main_video" @click="doVideoClick('1','杨家沟')">
          <div style="text-align:center;">杨家沟</div>
          <video  autoplay="autoplay" width="100%" height="100%">
            <source src="@/assets/video/CAMERAV.webm" loop="loop" muted="muted"  type="video/mp4">
          </video>
        </div>
        <div class="main_video" @click="doVideoClick('2','董庄沟')">
          <div style="text-align:center;">董庄沟</div>
          <video  autoplay="autoplay" width="100%" height="100%">
            <source src="@/assets/video/CAMERAV.webm" loop="loop" muted="muted"  type="video/mp4">
          </video>
        </div>
        <div class="main_video" @click="doVideoClick('1','杨家沟')">
          <div style="text-align:center;">杨家沟</div>
          <video  autoplay="autoplay" width="100%" height="100%">
            <source src="@/assets/video/CAMERAV.webm" loop="loop" muted="muted"  type="video/mp4">
          </video>
        </div>
        <div class="main_video" @click="doVideoClick('2','董庄沟')">
          <div style="text-align:center;">董庄沟</div>
          <video  autoplay="autoplay" width="100%" height="100%">
            <source src="@/assets/video/CAMERAV.webm" loop="loop" muted="muted"  type="video/mp4">
          </video>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name:'VideoMonitoring',
  data(){
    return {
      dataList:['','','',''],
      interval:'',
      shiftingX:0
    }
  },
  mounted(){
    this.antimation()
  },
  methods:{
    antimation(){
      const shifting = this.dataList.length * 188
      const that = this
      this.interval = setInterval(()=>{
        that.shiftingX = (that.shiftingX-1)%shifting
      },13)
    },
    stopInterval(){
      clearInterval(this.interval)
    },
  },
  beforeDestroy(){
    clearInterval(this.interval)
  }
}
</script>