說在前面

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

效果預覽

B站效果

組件效果

體驗地址

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

組件實現

這里只對本次新增的精靈圖模式進行介紹，其他地方的具體實現可以查看這一篇文章–>《vue實現一個鼠標滑動預覽視頻封面組件》

精靈圖生成

什么是精靈圖

css sprite也叫精靈圖or雪碧圖，是一種網頁圖片應用處理方式。它允許你將一個頁面涉及到的所有的零星圖片集合到一張大圖中。這樣一來，當訪問該頁面時，就由原來的多次請求變為一次請求。客戶端每顯示一張圖片都會向服務器發送一次請求，圖片越多請求越多，延遲的可能性就越大，同時對服務器會造成壓力。所以頁面中如果有多個icon（小圖標）時，推薦使用精靈圖。

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

優點

• 1、減少網頁的http請求，從而提升網頁的性能。
• 2、減少圖片的字節。

原理

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

精靈圖制作

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

組件模式切換

現在的組件是有兩種展現模式，這里我通過一個參數來控制器展現的模式。

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

精靈圖展示

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

如上代碼，我們使用一個div作為精靈圖的容器，后面我們可以通過修改精靈圖的定位來實現圖片的動態切換效果。

封面動態切換

• 監聽鼠標移動事件

監聽鼠標的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>

• 修改精靈圖定位

通過當前鼠標的坐標，可以計算精靈圖應該進行的位移長度，具體代碼如下：

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-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>

組件庫引用

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

源碼地址

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

組件文檔

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

Gitee源碼

Gitee源碼：gitee.com/zheng_yongt…

覺得有幫助的同學可以幫忙給我點個star，感激不盡~~~
有什么想法或者改良可以給我提個pr，十分歡迎~~~
有什么問題都可以在評論告訴我~~~

往期精彩

node封裝一個圖片拼接插件

基于inquirer封裝一個控制臺文件選擇器

node封裝一個控制臺進度條插件

vue實現一個鼠標滑動預覽視頻封面組件

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

微信小程序實現一個手勢圖案鎖組件

vue封裝一個彈幕組件

為了學（mo）習（yu），我竟開發了這樣一個插件

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

vue簡單實現詞云圖組件

說在后面

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。