携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第7天，点击查看活动详情
说在前面
🎈上上个星期写了一篇文章，记录了怎样通过纯前端实现一个
鼠标滑动预览视频封面的vue组件，不少人跟我反馈说那样实现的效果不太好，用户体验感较差，也给了我一个新的实现方案，所以现在我在上上周实现的组件基础上增加了使用精灵图的展现方式。
效果预览
B站效果
组件效果
体验地址
组件实现
这里只对本次新增的精灵图模式进行介绍，其他地方的具体实现可以查看这一篇文章-->《vue实现一个鼠标滑动预览视频封面组件》
精灵图生成
什么是精灵图
css sprite也叫精灵图or雪碧图，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有的零星图片集合到一张大图中。这样一来，当访问该页面时，就由原来的多次请求变为一次请求。客户端每显示一张图片都会向服务器发送一次请求，图片越多请求越多，延迟的可能性就越大，同时对服务器会造成压力。所以页面中如果有多个icon（小图标）时，推荐使用精灵图。
简单来说，就是将几张较小的图片放在一张大图上。
优点
- 1、减少网页的http请求，从而提升网页的性能。
- 2、减少图片的字节。
原理
- 1、需要一个设置好宽高的容器。
- 2、通过background-img引入背景图。
- 3、通过background-position将背景图移动到需要的位置。
精灵图制作
这里我使用了自己制作的一个node小工具来生成，对改小工具有兴趣的可以看看我的这篇文章-->《node制作一个视频帧长图生成器》，通过这个工具，我们可以生成下面这么一张图片。
组件模式切换
现在的组件是有两种展现模式，这里我通过一个参数来控制器展现的模式。
如上图，这里增加了一个设置封面精灵图的参数，如果该参数有值，则该组件的展现方式为使用精灵图进行展示，否则则为旧模式，即客户端截图展示。
精灵图展示
- html
<div
v-if="coverLongImg"
:id="uid + '-cover-long-img-box'"
class="cover-long-img-box"
@mousemove="imgHover"
@mouseleave="hoverOut"
@click="coverClick"
>
<img
:id="uid + '-cover-long-img'"
alt=""
:src="coverLongImg"
class="cover-long-img"
/>
</div>
- css
.cover-long-img-box {
overflow: hidden;
.cover-long-img {
position: relative;
}
}
如上代码，我们使用一个div作为精灵图的容器，后面我们可以通过修改精灵图的定位来实现图片的动态切换效果。
封面动态切换
- 监听鼠标移动事件
监听鼠标的mousemove事件。
<div
v-if="coverLongImg"
:id="uid + '-cover-long-img-box'"
class="cover-long-img-box"
@mousemove="imgHover"
@mouseleave="hoverOut"
@click="coverClick"
>
<img
alt=""
:src="coverLongImg"
class="cover-long-img"
:id="uid + '-cover-long-img'"
/>
</div>
- 修改精灵图定位
通过当前鼠标的坐标，可以计算精灵图应该进行的位移长度，具体代码如下：
coverLongImgChang(e, coverLongImg) {
const coverLongImgBox = document.getElementById(
this.uid + "-cover-long-img-box"
);
if (coverLongImg.src != this.coverLongImg) {
coverLongImg.setAttribute("src", this.coverLongImg);
}
const w = coverLongImgBox.offsetWidth / this.stepNums;
const x = e.offsetX - Math.abs(coverLongImg.offsetLeft);
const index = Math.min(
Math.max(Math.ceil(x / w), 1),
this.stepNums
);
this.progressValue = index;
coverLongImg.style.right =
(index - 1) * (coverLongImg.offsetWidth / this.stepNums) + "px";
}
展示视频时长
如上图，组件右下角增加了视频长度的显示，当然不想显示或者想自己编写样式展示的同学可以通过
showDuration这个参数来进行控制。
插槽展示视频信息
如上图，组件下方增加了一个自定义插槽区域，可以添加自己想要展示的内容，如下代码，我们可以增加播放量和弹幕数的展示。
<j-video-cover
class="video"
:videoUrl="videoUrl"
stepNums="15"
:coverLongImg="coverLongImg"
:height="'206px'"
:width="'384px'"
>
<template v-slot:video-info-slot>
<span style="margin-left:1em;font-size:medium;">
<i class="el-icon-video-play"></i>
<span style="margin-left:0.1em;">171.4万</span>
</span>
<span style="margin-left:1em;font-size:medium;">
<i class="el-icon-chat-line-square"></i>
<span style="margin-left:0.1em;">6302</span>
</span>
</template>
</j-video-cover>
组件库引用
这里我将这个组件打包进了自己的一个组件库，并将其发布到了npm上，有需要的同学也可以直接引入该组件进行使用。
引入教程可以看这里：jyeontu.xyz/jvuewheel/#…
引入后即可直接使用。
源码地址
组件库已开源，想要查看完整源码的可以到 gitee 查看，自己也整理了相关的文档对其进行了简单介绍，具体如下：
组件文档
jvuewheel: jyeontu.xyz/jvuewheel/#…
Gitee源码
Gitee源码：gitee.com/zheng_yongt…
觉得有帮助的同学可以帮忙给我点个star，感激不尽~~~
有什么想法或者改良可以给我提个pr，十分欢迎~~~
有什么问题都可以在评论告诉我~~~
往期精彩
说在后面
🎉这里是JYeontu，喜欢算法，GDCPC打过卡；热爱羽毛球，大运会打过酱油。毕业一年，两年前端开发经验，目前担任H5前端开发，算法业余爱好者,有空会刷刷算法题，平时喜欢打打羽毛球🏸 ，也喜欢写些东西，既为自己记录📋，也希望可以对大家有那么一丢丢的帮助，写的不好望多多谅解🙇，写错的地方望指出，定会认真改进😊，在此谢谢大家的支持，我们下文再见🙌。
