前端学习之百叶窗效果

1. 结果展示

原教程：https://www.bilibili.com/video/BV1iK4y1s7Db?spm_id_from=333.999.0.0&vd_source=36b18f2d7c5333a81747c014397b7f36

这一次我将代码改了一下通过vue+js实现，当鼠标移动到页面时就播放视频，这里我将图片改成了视频的方式实现，这里可以使用 gif 等实现方式，这里看起来比较丑，使用图片就比较好看了，有些bug也没有调整比如，暂停后需要显示封面等。演示地址：http://150.158.10.192/web

<template>
  <div class="box">
    <ul class="box_ul">
      <li v-for="(p,index) in paths" :key="index">
        <video :id="'video-'+index" muted="muted"
               x5-video-orientation="portraint"
               :poster="require('@/assets/video/' + p.poster)"
               @mouseover="play(index)"
               @mouseleave="stop(index)"
               :src="require('@/assets/video/' + p.video)"></video>
        <!--<img :src="require('@/assets/imgs/index/' + p.img)">-->
        <div class="text">{{ p.desc }}</div>
      </li>
    </ul>
  </div>

</template>

<script>
export default {
  name: 'Index',
  data() {
    return {
      paths: [
        {
          path: "/shuffling",
          desc: '会发光的Button',
          video: '发光的Button.mp4',
          poster: '发光的button封面.png'
        }, {
          path: "/button",
          desc: '会发光的Button',
          video: '发光的Button.mp4',
          poster: '发光的button封面.png'
        }, {
          path: "/button",
          desc: '会发光的Button',
          video: '发光的Button.mp4',
          poster: '发光的button封面.png'
        }, {
          path: "/button",
          desc: '会发光的Button',
          video: '发光的Button.mp4',
          poster: '发光的button封面.png'
        }, {
          path: "/button",
          desc: '会发光的Button',
          video: '发光的Button.mp4',
          poster: '发光的button封面.png'
        }
      ]
    }
  },
  methods: {
    play(index) {
      let media = document.getElementById("video-"+index)
      if (media) {
      //开始播放
        media.play()
      }
    },
    stop(index) {
      let media = document.getElementById("video-"+index)
      if (media) {
      //暂停播放，将实现设置从头开始
        media.pause()
        media.currentTime = 0
      }
    }
  }
}
</script>

<style>

body {
  background-color: #453a94;
  height: 100vh;
  width: 100%;
}

li {
  list-style: none;
}

.box_ul {
  width: 1000px;
  height: 320px;
  margin: 200px auto;
  overflow: hidden;
  transition: all .3s;
}

.box_ul li {
  float: left;
  height: 320px;
  width: 200px;
  position: relative;
  transition: all .3s;
}

/*设置字体的位置以及样式*/
.box_ul li .text {
  position: absolute; /*使用绝对定位，找到最近的父级也就是 li*/
  left: 0;
  bottom: 0;
  font-size: 10px;
  color: #ffffff;
  width: 100%;
  height: 30px;
  text-align: center;
  line-height: 30px;
  background-color: rgba(0,0,0,.3); /*可以是背景颜色编程渐变趋向于透明*/
}

.box_ul:hover li {
  width: 90px;  /*设置90px，因为box整体为1000px，移到li上变成640px，剩余360px，其他4张图平均下来就为90px，否则最后一张图的显示会有问题*/
}

/*移动到 li上时，将其变为640px*/
.box_ul li:hover {
  width: 640px;
}

</style>