成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

用js做鼠標(biāo)拖動(dòng)進(jìn)度條實(shí)現(xiàn)顯示多張縮略圖(js鼠標(biāo)按下拖動(dòng)div)

2024-04-21    分類： 網(wǎng)站建設(shè)

近期項(xiàng)目中遇到一個(gè)有點(diǎn)意思的效果，在一定范圍內(nèi)根據(jù)進(jìn)度條的進(jìn)度來顯示圖片的數(shù)量，效果圖如下：

實(shí)現(xiàn)思路是根據(jù)進(jìn)度條拖動(dòng)的距離來算百分比，然后根據(jù)百分比來改變每個(gè)圖片的寬度，

頁(yè)面結(jié)構(gòu)代碼如下：

Css樣式如下：

Js代碼如下：

因?yàn)檫M(jìn)度條最多只有100%，所以就需要根據(jù)顯示的圖片數(shù)量來設(shè)置每張圖片寬度的占比，這里是要顯示16張圖片，在進(jìn)度條進(jìn)度為0的時(shí)候，只顯示一張，進(jìn)度條進(jìn)度達(dá)到100%的時(shí)候要顯示16張，也就是4X4排列，所以每張圖片的寬度占比是25%。又因?yàn)檎麄€(gè)顯示區(qū)域的大小是固定的，也就是說當(dāng)進(jìn)度條進(jìn)度為0的時(shí)候，每張圖片的實(shí)際寬度是這個(gè)區(qū)域的寬度，也就是說存放圖片的模塊寬度是這個(gè)區(qū)域?qū)挾鹊?00%，如圖中樣式：

理清了圖片顯示的思路之后就要思考如何實(shí)現(xiàn)了，這里我是通過運(yùn)用Js來實(shí)現(xiàn)進(jìn)度條的拖動(dòng)效果，同時(shí)運(yùn)用js來獲取進(jìn)度條的進(jìn)度值，如下：

圖中l(wèi)iwidht 是根據(jù)圖片顯示數(shù)量寬度占比在拖動(dòng)進(jìn)度條的過程中 ul 的實(shí)時(shí)寬度，然后就是將這個(gè)實(shí)時(shí)變化的寬度賦值給 ul ：
這里因?yàn)閖query寫簡(jiǎn)單一些，就沒用js來賦值。

到這里上述的效果基本就完成了，效果如下：

后期可能會(huì)研究一下點(diǎn)擊進(jìn)度條改變進(jìn)度來直接顯示對(duì)應(yīng)的圖片數(shù)量，只能通過拖動(dòng)進(jìn)度條來改變顯示圖片的數(shù)量功能太單一了。暫時(shí)就這樣吧。

以上就是關(guān)于用js做鼠標(biāo)拖動(dòng)進(jìn)度條實(shí)現(xiàn)顯示多張縮略圖(js鼠標(biāo)按下拖動(dòng)div)，希望對(duì)你有幫助，更多內(nèi)容關(guān)注創(chuàng)新互聯(lián)。

網(wǎng)頁(yè)題目：用js做鼠標(biāo)拖動(dòng)進(jìn)度條實(shí)現(xiàn)顯示多張縮略圖(js鼠標(biāo)按下拖動(dòng)div)
URL網(wǎng)址：http://jinyejixie.com/news42/324642.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信公眾號(hào)、網(wǎng)站維護(hù)、靜態(tài)網(wǎng)站、關(guān)鍵詞優(yōu)化、App開發(fā)、

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

網(wǎng)站托管運(yùn)營(yíng)
海淀区| 抚顺县| 东阳市| 乐清市| 邯郸市| 石嘴山市| 五河县| 色达县| 黑水县| 刚察县| 肃南| 应用必备| 浦东新区| 萍乡市| 永定县| 乌拉特后旗| 白沙| 甘德县| 会东县| 霍城县| 紫金县| 天台县| 清原| 公安县| 白沙| 齐齐哈尔市| 榆树市| 离岛区| 武宁县| 泸溪县| 隆德县| 赤峰市| 宜都市| 达州市| 牟定县| 青海省| 澜沧| 潼关县| 永平县| 思南县| 岳阳市|