BILIBILI视频预览前端实战教程代码

2018-12-04 本文已影响137人大赚佬

原文地址：http://icaoguo.com/2018/12/04/bilibili%E8%A7%86%E9%A2%91%E9%A2%84%E8%A7%88%E5%89%8D%E7%AB%AF%E5%AE%9E%E6%88%98%E6%95%99%E7%A8%8B/

哈喽大家好，我是挂面。

今天在逛B站的时候发现一个听炫酷的效果——视频预览。

如果常常上各大视频网址的朋友应该会看到各种不同的预览策略，有优酷、A站那种播放其中一小段视频的，也有油管那种播放好几段小视频的，但我个人还是比较喜欢B站这种不用点进视频就可以看到其中更多信息的设计，也是非常佩服B站产品经理们的脑洞。

我们先来看看效果。

具体的代码我已经实现过一遍了，给大家看看我做的效果。

代码我放在文章最后了，想要的同学可以去拿走。

如果你想直到它的实现原理，可以接着往下看。

在首页随机找到一个视频，然后点击右键——检查。

观察代码可以看到，此处有一个类似图片的地址，我们右键open in new tab。

可以看到，这里面的图片就是刚刚鼠标放上去时候出现的那些预览图。

###

这里我们可以推断出，单个视频的所有预览图都存在于一张图片之上，通过鼠标在目标上的位置移动，修改bakcground-position这个css属性的参数，实现预览效果。

###

不知道大家看懂了没有呢？

没看懂的童鞋请多看几遍，如果还是没看懂可以在评论区留言，我会详细解答。

接下来我来讲讲实现的思路。

1、建立事件委托，获取鼠标在目标上的位置。

2、修改目标的bakcground-position到对应的位置。

具体实现：

1、我们先需要一个简单的组图

2、然后给它们绑定上事件，关于如何做事件委托，在网络中有大量优秀的文章，例如知乎用户桐城这篇就讲的还不错。

https://zhuanlan.zhihu.com/p/26536815

这个我们作为明天的视频再来详细讲解。

3、把整个图片切成若干份，这个份数要与图片总数相对应。

简单来说，就是你有几张预览图，就用160除以预览图的数量。例如一共有12张预览图，那就是160/12=13.33333333333333。这一步是要得出每一份的像素大小。

4、获取当前鼠标所在的位置，用这个x坐标除以每一份的宽度也就是第3步得到的数字。

例如：鼠标的x坐标是 60，那么就是60/13.3333≈4.5，取进位得到数字5。(取整进位用Math.ceil() 方法。

也就是我们需要在当前的位置显示第5张预览图。

5、通过第4步我们直到了当前要调用第几张预览图，然后我们就可以来修改目标的background-position属性，让它显示对应的图片了。

4.png

现在我们需要知道对应图片在大图中的第几行第几列，才能获得具体的xy坐标。

其实很简单，例如你想要第3张图片。

只要 3 / 10 = 0 … 3 就可以知道，第三张图片在第1行第3列

例如你想要第24张图片

只要 24 / 10 = 2 … 4 图片在第 3 行第4列。

已知每幅图的大小是 160*90

那么只要用所在列数乘以 160 就可以获得横坐标

只要用所在行数乘以 160 就可以获得纵坐标

那么假如我们想调用第3幅图片，

只要用 3/10 取余再乘以 160就可以得到横坐标

用 3-10 再除以10 再乘以90 就可以得到纵坐标。

下面是公式：（Javascript中 %符号是取余数运算符

x = number%10*160

y = (Math.ceil(num/10) – 1 )*90 （需要用Math.ceil() 取整）

当然，最后还是要都加上负号

因为background-position所设置的图片想要往左或往上移动，需要用负数。

下面是具体实现的代码。

<!DOCTYPE html>

<head>

<metacharset=”UTF-8″>

<metaname=”viewport”content=”width=device-width, initial-scale=1.0″>

<metahttp-equiv=”X-UA-Compatible”content=”ie=edge”>

<title>清汤挂面的草果游戏</title>

<style>

margin: 0;

padding: 0;

border: none;

list-style-type: none;

}

li{

width: 160px;

height: 90px;

float: left;

margin: 10px;

}

</style>

</head>

<body>

<ulid=”wjh”>

<lidata-num=”11″style=”background:url(https://i3.hdslb.com/bfs/videoshot/64508286.jpg@.webp?vsign=c1b01ba448824025643fd327b64c99b5bf31700f&ver=110043440);”></li>

</ul>

varele = document.getElementById(“wjh”);

ele.addEventListener(“mousemove”, function(e){

if(e.target.nodeName == “LI”){

// 图片大小除以多少份得到每一份多大

vartotal = e.target.attributes[0].nodeValue;

//每份宽度

varitem_width = 160 / total;

//要调用第几张图片鼠标位置除以每份宽度

varnum = Math.ceil(e.offsetX / item_width);

//第几张图片除以 10

varx = num – 1 % 10;

vary = Math.ceil(num / 10) – 1;

console.log(x + “:” + y);

//修改背景图

e.target.style.backgroundPosition = “-” + x * 160 + “px -” + y * 90 + “px”;

}

});

</script>

</body>

</html>

BILIBILI视频预览前端实战教程代码

猜你喜欢

热点阅读

BILIBILI视频预览前端实战教程 代码

猜你喜欢

热点阅读

BILIBILI视频预览前端实战教程代码