国产精品一区二区三区……-大杳蕉伊人欧美一本遒在饯-日本不卡一区免费在线观看-国产亚洲欧美中文字幕

400-800-9385
網(wǎng)站建設(shè)資訊詳細(xì)

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

發(fā)表日期:2019-07-17 10:37:35   作者來源:方維網(wǎng)絡(luò)   瀏覽:4738   標(biāo)簽:網(wǎng)站前端制作    
近期項(xiàng)目中遇到一個(gè)有點(diǎn)意思的效果,在一定范圍內(nèi)根據(jù)進(jìn)度條的進(jìn)度來顯示圖片的數(shù)量,效果圖如下:
 

前端制作效果

 
實(shí)現(xiàn)思路是根據(jù)進(jìn)度條拖動(dòng)的距離來算百分比,然后根據(jù)百分比來改變每個(gè)圖片的寬度,
頁面結(jié)構(gòu)代碼如下:
HTML代碼
 
Css樣式如下:
CSS代碼1
CSS代碼2
 
Js代碼如下:
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%,如圖中樣式:
CSS代碼3
理清了圖片顯示的思路之后就要思考如何實(shí)現(xiàn)了,這里我是通過運(yùn)用Js來實(shí)現(xiàn)進(jìn)度條的拖動(dòng)效果,同時(shí)運(yùn)用js來獲取進(jìn)度條的進(jìn)度值,如下:
HTML代碼2
 
圖中l(wèi)iwidht 是根據(jù)圖片顯示數(shù)量寬度占比在拖動(dòng)進(jìn)度條的過程中 ul 的實(shí)時(shí)寬度,然后就是將這個(gè)實(shí)時(shí)變化的寬度賦值給 ul :
JS代碼3
這里因?yàn)閖query寫簡(jiǎn)單一些,就沒用js來賦值。
到這里上述的效果基本就完成了,效果如下:
效果1
效果2
效果3
 
后期可能會(huì)研究一下點(diǎn)擊進(jìn)度條改變進(jìn)度來直接顯示對(duì)應(yīng)的圖片數(shù)量,只能通過拖動(dòng)進(jìn)度條來改變顯示圖片的數(shù)量功能太單一了。暫時(shí)就這樣吧。
如沒特殊注明,文章均為方維網(wǎng)絡(luò)原創(chuàng),轉(zhuǎn)載請(qǐng)注明來自http://pdcharm.com/news/5155.html
相關(guān)網(wǎng)站設(shè)計(jì)案例
台北县| 淮安市| 崇义县| 临邑县| 宜都市| 桓仁| 保康县| 中西区| 安丘市| 伊宁县| 石狮市| 祁连县| 大丰市| 花垣县| 获嘉县| 广德县| 岐山县| 新源县| 永昌县| 玉溪市| 寿阳县| 井陉县| 紫金县| 永丰县| 都匀市| 娄底市| 永吉县| 钟山县| 龙井市| 博湖县| 章丘市| 清流县| 钦州市| 湟源县| 锡林浩特市| 吉林市| 清新县| 揭西县| 沁水县| 晋江市| 宣城市|