欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JavaScript实现橱窗展示效果

程序员文章站 2022-06-17 19:30:54
本文实例为大家分享了javascript实现橱窗展示效果的具体代码,供大家参考,具体内容如下1.先搭架子* { margin: 0; padding: 0;...

本文实例为大家分享了javascript实现橱窗展示效果的具体代码,供大家参考,具体内容如下

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.逻辑部分

拿到需要操作的元素

计算ul的宽度

设置ul的宽度

计算滚动条的宽度

设置滚动条的宽度

监听鼠标按下的事件

  • 拿到滚动条当前的位置
  • 拿到鼠标在滚动条中按下的位置

监听鼠标移动事件

  • 拿到鼠标在滚动条中移动之后的位置
  • 计算偏移位
  • 安全校验
  • 重新设置滚动条的位置
  • 计算图片的滚动距离
  • 重新设置图片的位置
 .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.计算ul的宽度
const ulwidth = oitems[0].offsetwidth * oitems.length;
 
//3.设置ul的宽度
oul.style.width = ulwidth + 'px';
 
//4.计算滚动条的宽度
// 滚动条的宽度/滚动条滚动范围 = 容器的宽度/内容的范围
const progresswidth = oprogress.offsetwidth;
const boxwidth = obox.offsetwidth;
const linewidth = boxwidth / ulwidth * progresswidth;
 
//5.设置滚动条的宽度
oline.style.width = linewidth + 'px';
// 计算滚动条最大能够滚动的范围
const maxlinex = progresswidth - linewidth;
// 计算图片最大能够滚动的范围
const maximgx = boxwidth - ulwidth;
 
 //6.监听鼠标按下的事件
oline.onmousedown = function(e) {

e = e || window.e;
//a.拿到滚动条当前的位置
let begin = parsefloat(oline.style.left) || 0;
 
//b.拿到鼠标在滚动条中按下的位置
let mousex = e.pagex - obox.offsetleft;
 
//7.监听鼠标移动事件
oline.onmousemove = function(e) {
e = e || window.e;
//c.拿到鼠标在滚动条中移动之后的位置
let movemousex = e.pagex - obox.offsetleft;
 
//d.计算偏移位
let offsetx = movemousex - mousex + begin;
 
//e.安全校验
offsetx = offsetx < 0 ? 0 : offsetx;
offsetx = offsetx > maxlinex ? maxlinex : offsetx;
 
 //f.重新设置滚动条的位置
oline.style.left = offsetx + 'px';
 
//g.计算图片的滚动距离
// 滚动条滚动的距离 / 滚动条最大能够滚动的范围 = 图片滚动的距离 / 图片最大能够滚动的范围
// 滚动条滚动的距离 / 滚动条最大能够滚动的范围 * 图片最大能够滚动的范围 = 图片滚动的距离
const imgoffsetx = offsetx / maxlinex * maximgx;
 
// h.重新设置图片的位置
      oul.style.left = imgoffsetx + "px";
            };
        };
        document.onmouseup = function() {
            oline.onmousemove = null;
}

JavaScript实现橱窗展示效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

相关标签: js 橱窗展示