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>

前端学习之百叶窗效果相关推荐

前端学习------眼球跟踪效果
效果预览眼球的移动,是通过获取鼠标在相对于浏览器页面的实时位置,做出的相应位置的改变. 废话不多说先看效果! 接下来看代码部分: 代码部分效果预览 html css javascript 小结 h ...
Web前端学习6个有效果软件，你值得拥有!
想要让程序猿可以快速有效的工作,辅助工具是非常有必要的,不管是刚学习web前端技术的同学还是已经进入工作的学员,都需要学习和掌握一些Web前端开发工具和软件,Web前端学习6个有效果软件,你值得拥有! ...
hbuilder前端需要的插件_最新web前端学习路线
随着互联网的深入发展,前端开发工程师已成为市场上极具竞争力的人才.许多学生,包括以前的UI,java,或完全零基础,想学习的前端.下面的思维导图是在互联网上广泛传播的前端学习地图.许多初学者说,当他们 ...
react实战项目_前端学习路线图--从网页设计到项目开发
前端学习路线是螺旋上升的,需要耗费的时间和精力不比其他编程的少,由于其稳健性的特点,使其成为大多数企业开发的刚需编程语言.在网上看到有很多的前端学习路线图,但大部分的前端学习路线图是很零碎的,没有系统 ...
黑马程序员：从零基础到精通的前端学习路线
黑马程序员:从零基础到精通的前端学习路线随着互联网的深入发展,前端开发工程师一跃成为市场上非常抢手的人才.很多同学,包括以前做UI的.Java的.或者对于IT完全零基础的同学都想学习前端.下图是网上 ...
2020年最新前端学习路线
这段日子在 B 站上收到小伙伴最多的要求就是出一个前端学习路线,我能够充分的感受到大家抓耳挠腮加挠墙的迷茫~所以在这里给大家总结了一套前端学习路线.先从初级前端工程师所需的技能开始,然后一路升级到高级 ...
百叶窗设计原理 html5,Html5百叶窗效果的示例代码_html5教程技巧
本篇文章主要介绍了Html5百叶窗效果的示例代码,小编觉得挺不错的,现在分享给大家HTML5源码和解释,也给大家做个参考.对HTML5感兴趣的小伙伴可以一起跟随小编过来看看吧本文介绍了Html5百叶 ...
GitHub 上值得前端学习的数据结构与算法项目
Hello,大家好,我是你们的前端章鱼猫. 简介前端章鱼猫从 2016 年加入 GitHub,到现在的 2020 年,快整整 5 个年头了. 相信很多人都没有逛 GitHub 的习惯,因此总会有开 ...
Web前端学习路线分享，初学者不要错过！
在技术岗中,前端开发一直是薪资比较高的岗位. ▲北京前端工程师月均薪20.7K(职友集) 前端技术的更新迭代,导致大部分技术人员跟不上.因此越来越多的人想转型做前端开发了.毕竟想要驰骋职场,想要拿年薪 ...
js怎么在一个div中嵌入另一网站_好程序员web前端学习路线分享HTML5常见面试题集锦一...
好程序员web前端学习路线分享HTML5常见面试题集锦,接下来将会持续为大家分享几篇HTML5常见面试题. 1.布局左边20% 中间自适应右边200px 不能用定位答案:圣杯布局/双飞翼布局或者 ...

前端学习之百叶窗效果

1. 结果展示

前端学习之百叶窗效果相关推荐

最新文章

热门文章