JavaScript如何實(shí)現(xiàn)櫥窗展示效果

這篇文章將為大家詳細(xì)講解有關(guān)JavaScript如何實(shí)現(xiàn)櫥窗展示效果，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

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" >
            </li>
            <li>
                <img src="images/img2.jpg" >
            </li>
            <li>
                <img src="images/img3.jpg" >
            </li>
            <li>
                <img src="images/img4.jpg" >
            </li>
            <li>
                <img src="images/img5.jpg" >
            </li>
            <li>
                <img src="images/img6.jpg" >
            </li>
            <li>
                <img src="images/img7.jpg" >
            </li>
            <li>
                <img src="images/img8.jpg" >
            </li>
            <li>
                <img src="images/img9.jpg" >
            </li>
            <li>
                <img src="images/img10.jpg" >
            </li>
        </ul>
        <div class="progress">
            <div class="line"></div>
        </div>
</div>

2.邏輯部分

拿到需要操作的元素

計(jì)算ul的寬度

設(shè)置ul的寬度

計(jì)算滾動(dòng)條的寬度

設(shè)置滾動(dòng)條的寬度

監(jiān)聽(tīng)鼠標(biāo)按下的事件

• 拿到滾動(dòng)條當(dāng)前的位置

• 拿到鼠標(biāo)在滾動(dòng)條中按下的位置
  

監(jiān)聽(tīng)鼠標(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)聽(tīng)鼠標(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)聽(tīng)鼠標(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;
}

關(guān)于“JavaScript如何實(shí)現(xiàn)櫥窗展示效果”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。