春衫犹是，小蛮针线，曾湿西湖雨，转眼来杭州已经小半年了，最忆是杭州，很喜欢的一个城市。因为换厂子的原因，这个系列中断了一段时间，是时候再次更新起来了。闲言少叙，开始我们的正文。
本文分析实现的某些效果，仅仅作为一个思路分享，仅仅作为学习素材使用。
源动画效果
在B站逛的时候发现一个小功能挺好玩的，当鼠标hover到卡片上的时候，可以进行视频的预览。而且在卡片上移动鼠标的时候，预览的位置可以随之改变。如下图，可以很直观地观察到效果：
实现分析
弹幕效果先略去，分析一下预览效果的实现。看到上面的效果，我们可以想到在之前的的文章中用过的时间函数steps()，用这个函数实现了Twitter的点赞动画。本文的效果可以用类似的方式实现，但是有个区别是本文的预览效果是根据鼠标的位置变化的，所以需要用到js进行辅助。大概的步骤实现可以为：
- 生成视频的截图，截图按照类似精灵图的方式按先后顺序拼到一张图片上
- 页面根据当前鼠标的位置比例，确定加载精灵图的不同位置为背景
代码实现
这里我们不考虑如何生成视频截图和拼接，有很多工具可以做，也能自己写脚本实现。
先看一下最终获得的精灵图片段：
这里将图片设置为背景，根据鼠标hover位置，修改背景图的位置，伪代码如下：
$(".card").mousemove(function (e) {
$('.cover').css({
backgroundImage: "url(./bg-mult.png)",
backgroundPosition: x + "px " + y + "px",
backgroundSize: size + "px"
})
$('.progress').css({
width: progress + "%"
})
});
上面代码中的x、y、size、progress是根据鼠标位置生成的背景图片的位置信息，原理和代码都很简单，详细的实现可以看一下源码，文末有链接。
效果展示
关键点解读
实现的关键点在于如何将鼠标hover的相对位置，映射到对应的图片背景位置上，可以通过简单的计算，设置背景位置，和精灵图的用法基本一致。
最后的惯例，贴上我的博客，欢迎关注
