說在前面

🎈上上個(gè)星期寫了一篇文章，記錄了怎樣通過純前端實(shí)現(xiàn)一個(gè)鼠標(biāo)滑動(dòng)預(yù)覽視頻封面的vue組件，不少人跟我反饋說那樣實(shí)現(xiàn)的效果不太好，用戶體驗(yàn)感較差，也給了我一個(gè)新的實(shí)現(xiàn)方案，所以現(xiàn)在我在上上周實(shí)現(xiàn)的組件基礎(chǔ)上增加了使用精靈圖的展現(xiàn)方式。

效果預(yù)覽

B站效果

組件效果

體驗(yàn)地址

http://jyeontu.xyz/jvuewheel/#/JVideoCover

組件實(shí)現(xiàn)

這里只對(duì)本次新增的精靈圖模式進(jìn)行介紹，其他地方的具體實(shí)現(xiàn)可以查看這一篇文章–>《vue實(shí)現(xiàn)一個(gè)鼠標(biāo)滑動(dòng)預(yù)覽視頻封面組件》

精靈圖生成

什么是精靈圖

css sprite也叫精靈圖or雪碧圖，是一種網(wǎng)頁圖片應(yīng)用處理方式。它允許你將一個(gè)頁面涉及到的所有的零星圖片集合到一張大圖中。這樣一來，當(dāng)訪問該頁面時(shí)，就由原來的多次請(qǐng)求變?yōu)橐淮握?qǐng)求。客戶端每顯示一張圖片都會(huì)向服務(wù)器發(fā)送一次請(qǐng)求，圖片越多請(qǐng)求越多，延遲的可能性就越大，同時(shí)對(duì)服務(wù)器會(huì)造成壓力。所以頁面中如果有多個(gè)icon（小圖標(biāo)）時(shí)，推薦使用精靈圖。

簡單來說，就是將幾張較小的圖片放在一張大圖上。

優(yōu)點(diǎn)

• 1、減少網(wǎng)頁的http請(qǐng)求，從而提升網(wǎng)頁的性能。
• 2、減少圖片的字節(jié)。

原理

• 1、需要一個(gè)設(shè)置好寬高的容器。
• 2、通過background-img引入背景圖。
• 3、通過background-position將背景圖移動(dòng)到需要的位置。

精靈圖制作

這里我使用了自己制作的一個(gè)node小工具來生成，對(duì)改小工具有興趣的可以看看我的這篇文章–>《node制作一個(gè)視頻幀長圖生成器》，通過這個(gè)工具，我們可以生成下面這么一張圖片。

組件模式切換

現(xiàn)在的組件是有兩種展現(xiàn)模式，這里我通過一個(gè)參數(shù)來控制器展現(xiàn)的模式。

如上圖，這里增加了一個(gè)設(shè)置封面精靈圖的參數(shù)，如果該參數(shù)有值，則該組件的展現(xiàn)方式為使用精靈圖進(jìn)行展示，否則則為舊模式，即客戶端截圖展示。

精靈圖展示

• html

<divv-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;} }

如上代碼，我們使用一個(gè)div作為精靈圖的容器，后面我們可以通過修改精靈圖的定位來實(shí)現(xiàn)圖片的動(dòng)態(tài)切換效果。

封面動(dòng)態(tài)切換

• 監(jiān)聽鼠標(biāo)移動(dòng)事件

監(jiān)聽鼠標(biāo)的mousemove事件。

<divv-if="coverLongImg":id="uid + '-cover-long-img-box'"class="cover-long-img-box"@mousemove="imgHover"@mouseleave="hoverOut"@click="coverClick" ><imgalt="":src="coverLongImg"class="cover-long-img":id="uid + '-cover-long-img'"/> </div>

• 修改精靈圖定位

通過當(dāng)前鼠標(biāo)的坐標(biāo)，可以計(jì)算精靈圖應(yīng)該進(jìn)行的位移長度，具體代碼如下：

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"; }

展示視頻時(shí)長

如上圖，組件右下角增加了視頻長度的顯示，當(dāng)然不想顯示或者想自己編寫樣式展示的同學(xué)可以通過showDuration這個(gè)參數(shù)來進(jìn)行控制。

插槽展示視頻信息

如上圖，組件下方增加了一個(gè)自定義插槽區(qū)域，可以添加自己想要展示的內(nèi)容，如下代碼，我們可以增加播放量和彈幕數(shù)的展示。

<j-video-coverclass="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>

組件庫引用

這里我將這個(gè)組件打包進(jìn)了自己的一個(gè)組件庫，并將其發(fā)布到了npm上，有需要的同學(xué)也可以直接引入該組件進(jìn)行使用。
引入教程可以看這里：http://jyeontu.xyz/jvuewheel/#/installView
引入后即可直接使用。

源碼地址

組件庫已開源，想要查看完整源碼的可以到 gitee 查看，自己也整理了相關(guān)的文檔對(duì)其進(jìn)行了簡單介紹，具體如下：

組件文檔

jvuewheel: http://jyeontu.xyz/jvuewheel/#/JVideoCover

Gitee源碼

Gitee源碼：gitee.com/zheng_yongt…

覺得有幫助的同學(xué)可以幫忙給我點(diǎn)個(gè)star，感激不盡~~~
有什么想法或者改良可以給我提個(gè)pr，十分歡迎~~~
有什么問題都可以在評(píng)論告訴我~~~

往期精彩

node封裝一個(gè)圖片拼接插件

基于inquirer封裝一個(gè)控制臺(tái)文件選擇器

node封裝一個(gè)控制臺(tái)進(jìn)度條插件

vue實(shí)現(xiàn)一個(gè)鼠標(biāo)滑動(dòng)預(yù)覽視頻封面組件

密碼太多不知道怎么記錄？不如自己寫個(gè)密碼箱小程序

微信小程序?qū)崿F(xiàn)一個(gè)手勢(shì)圖案鎖組件

vue封裝一個(gè)彈幕組件

為了學(xué)（mo）習(xí)（yu），我竟開發(fā)了這樣一個(gè)插件

程序員的浪漫之——情侶日常小程序

vue簡單實(shí)現(xiàn)詞云圖組件

說在后面

🎉這里是JYeontu，喜歡算法，GDCPC打過卡；熱愛羽毛球，大運(yùn)會(huì)打過醬油。畢業(yè)一年，兩年前端開發(fā)經(jīng)驗(yàn)，目前擔(dān)任H5前端開發(fā)，算法業(yè)余愛好者,有空會(huì)刷刷算法題，平時(shí)喜歡打打羽毛球🏸 ，也喜歡寫些東西，既為自己記錄📋，也希望可以對(duì)大家有那么一丟丟的幫助，寫的不好望多多諒解🙇，寫錯(cuò)的地方望指出，定會(huì)認(rèn)真改進(jìn)😊，在此謝謝大家的支持，我們下文再見🙌。

總結(jié)

以上是生活随笔為你收集整理的vue实现一个鼠标滑动预览视频封面组件（精灵图版本）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。