JavaScript實(shí)現(xiàn)櫥窗展示效果
本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)櫥窗展示效果的具體代碼,供大家參考,具體內(nèi)容如下
1.先搭架子
* { margin: 0; padding: 0; } .box { width: 800px; height: 190px; border: 1px solid #000; margin: 100px auto; } ul { list-style: none; display: flex; } ul img { vertical-align: top; } .progress { width: 100%; height: 30px; background: #ccc; } .progress>.line { width: 100px; height: 100%; background: orange; border-radius: 15px; }
<div class="box"> <ul> <li> <img src="images/img1.jpg" alt=""> </li> <li> <img src="images/img2.jpg" alt=""> </li> <li> <img src="images/img3.jpg" alt=""> </li> <li> <img src="images/img4.jpg" alt=""> </li> <li> <img src="images/img5.jpg" alt=""> </li> <li> <img src="images/img6.jpg" alt=""> </li> <li> <img src="images/img7.jpg" alt=""> </li> <li> <img src="images/img8.jpg" alt=""> </li> <li> <img src="images/img9.jpg" alt=""> </li> <li> <img src="images/img10.jpg" alt=""> </li> </ul> <div class="progress"> <div class="line"></div> </div> </div>
2.邏輯部分
拿到需要操作的元素
計(jì)算ul的寬度
設(shè)置ul的寬度
計(jì)算滾動(dòng)條的寬度
設(shè)置滾動(dòng)條的寬度
監(jiān)聽鼠標(biāo)按下的事件
- 拿到滾動(dòng)條當(dāng)前的位置
- 拿到鼠標(biāo)在滾動(dòng)條中按下的位置
監(jiān)聽鼠標(biāo)移動(dòng)事件
- 拿到鼠標(biāo)在滾動(dòng)條中移動(dòng)之后的位置
- 計(jì)算偏移位
- 安全校驗(yàn)
- 重新設(shè)置滾動(dòng)條的位置
- 計(jì)算圖片的滾動(dòng)距離
- 重新設(shè)置圖片的位置
.box { overflow: hidden; } ul { position: relative; } .progress { position: relative; } .progress>.line { position: absolute; left: 0; top: 0; }
//1.拿到需要操作的元素 const oUl = document.querySelector("ul"); const oItems = oUl.querySelectorAll("li"); const oProgress = document.querySelector(".progress"); const oLine = document.querySelector(".line"); const oBox = document.querySelector(".box"); //2.計(jì)算ul的寬度 const ulWidth = oItems[0].offsetWidth * oItems.length; //3.設(shè)置ul的寬度 oUl.style.width = ulWidth + 'px'; //4.計(jì)算滾動(dòng)條的寬度 // 滾動(dòng)條的寬度/滾動(dòng)條滾動(dòng)范圍 = 容器的寬度/內(nèi)容的范圍 const progressWidth = oProgress.offsetWidth; const boxWidth = oBox.offsetWidth; const lineWidth = boxWidth / ulWidth * progressWidth; //5.設(shè)置滾動(dòng)條的寬度 oLine.style.width = lineWidth + 'px'; // 計(jì)算滾動(dòng)條最大能夠滾動(dòng)的范圍 const maxLineX = progressWidth - lineWidth; // 計(jì)算圖片最大能夠滾動(dòng)的范圍 const maxImgX = boxWidth - ulWidth; //6.監(jiān)聽鼠標(biāo)按下的事件 oLine.onmousedown = function(e) { e = e || window.e; //a.拿到滾動(dòng)條當(dāng)前的位置 let begin = parseFloat(oLine.style.left) || 0; //b.拿到鼠標(biāo)在滾動(dòng)條中按下的位置 let mouseX = e.pageX - oBox.offsetLeft; //7.監(jiān)聽鼠標(biāo)移動(dòng)事件 oLine.onmousemove = function(e) { e = e || window.e; //c.拿到鼠標(biāo)在滾動(dòng)條中移動(dòng)之后的位置 let moveMouseX = e.pageX - oBox.offsetLeft; //d.計(jì)算偏移位 let offsetX = moveMouseX - mouseX + begin; //e.安全校驗(yàn) offsetX = offsetX < 0 ? 0 : offsetX; offsetX = offsetX > maxLineX ? maxLineX : offsetX; //f.重新設(shè)置滾動(dòng)條的位置 oLine.style.left = offsetX + 'px'; //g.計(jì)算圖片的滾動(dòng)距離 // 滾動(dòng)條滾動(dòng)的距離 / 滾動(dòng)條最大能夠滾動(dòng)的范圍 = 圖片滾動(dòng)的距離 / 圖片最大能夠滾動(dòng)的范圍 // 滾動(dòng)條滾動(dòng)的距離 / 滾動(dòng)條最大能夠滾動(dòng)的范圍 * 圖片最大能夠滾動(dòng)的范圍 = 圖片滾動(dòng)的距離 const imgOffsetX = offsetX / maxLineX * maxImgX; // h.重新設(shè)置圖片的位置 oUl.style.left = imgOffsetX + "px"; }; }; document.onmouseup = function() { oLine.onmousemove = null; }
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
BOOTSTRAP時(shí)間控件顯示在模態(tài)框下面的bug修復(fù)
這篇文章主要介紹了BOOTSTRAP時(shí)間控件顯示在模態(tài)框下面的bug修復(fù),需要的朋友可以參考下2015-02-02javascript獲取重復(fù)次數(shù)最多的字符
本文給大家講述的是使用javascript實(shí)現(xiàn)獲取重復(fù)次數(shù)最多的字符,代碼很簡單,有需要的小伙伴可以參考下。2015-07-07JavaScript使用ActiveXObject訪問Access和SQL Server數(shù)據(jù)庫
這篇文章主要介紹了JavaScript使用ActiveXObject訪問Access和SQL Server數(shù)據(jù)庫,本文分別給出相應(yīng)操作代碼,需要的朋友可以參考下2015-04-04js中異步函數(shù)async function變同步函數(shù)的簡單入門
這篇文章主要介紹了js中異步函數(shù)async function變同步函數(shù)的簡單入門,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-04-04JS實(shí)現(xiàn)的找零張數(shù)最小問題示例
這篇文章主要介紹了JS實(shí)現(xiàn)的找零張數(shù)最小問題,涉及javascript數(shù)學(xué)運(yùn)算相關(guān)操作技巧,需要的朋友可以參考下2017-11-11javascript設(shè)計(jì)模式之module(模塊)模式
這篇文章主要為大家詳細(xì)介紹了javascript設(shè)計(jì)模式之module(模塊)模式 ,感興趣的小伙伴們可以參考一下2016-08-08學(xué)習(xí)javascript文件加載優(yōu)化
這篇文章主要為大家詳細(xì)介紹了javascript文件加載優(yōu)化,三種方式實(shí)現(xiàn)js文件加載優(yōu)化,感興趣的小伙伴們可以參考一下2016-02-02