码迷,mamicode.com
首页 > 其他好文 > 详细

橱窗特效

时间:2020-06-16 23:23:51      阅读:87      评论:0      收藏:0      [点我收藏+]

标签:特效   set   ali   操作   pos   mono   auto   mil   down   

html结构
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>橱窗</title>
    <style>
        *{
            padding0;
            margin0;
            list-stylenone;
            bordernone;
        }
        img{
            vertical-aligntop;
        }
        .box{
            width900px;
            height300px;
            margin40px auto;
            border1px solid #ccc;
            positionrelative;
            overflowhidden;
        }
        #box-top ul{
            width2100px;
            positionabsolute;
            left0;
            top:40px
        }
        #box-top li{
            floatleft;
            margin-right5px;
        }
        #box-bot{
            width100%;
            height25px;
            background#727272;
            positionabsolute;
            left0;
            bottom0;
        }
        #mask{
            width0;
            height100%;
            backgroundorange;
            positionabsolute;
            left0;
            top:0;
            border-radius12px;
        }
    </style>
</head>
<body>
<div class="box">
    <div id="box-top">
        <ul>
            <li><img src="images/1.jpg" alt=""></li>
            <li><img src="images/2.jpg" alt=""></li>
            <li><img src="images/3.jpg" alt=""></li>
            <li><img src="images/4.jpg" alt=""></li>
            <li><img src="images/5.jpg" alt=""></li>
            <li><img src="images/6.jpg" alt=""></li>
            <li><img src="images/7.jpg" alt=""></li>
            <li><img src="images/8.jpg" alt=""></li>
        </ul>
    </div>
    <div id="box-bot">
        <span id="mask"></span>
    </div>
</div>
<script src="index.js"></script>
</body>
</html>
 
js部分
window.addEventListener(‘load‘,function () {

    let box=document.getElementsByClassName("box")[0]
    let boxtop=document.getElementById("box-top")
    let oul=boxtop.getElementsByTagName("ul")[0]
    let mask=document.getElementById("mask")

    //求出mask的宽度
    //滚动条长度=(盒子宽度/内容宽度)* 盒子宽度
    let mask_len=(box.offsetWidth/oul.offsetWidth)*box.offsetWidth
     mask.style.width=mask_len+"px"
    //鼠标操作
    mask.onmousedown=function () {
        let e=window.event || arguments[0]
        //求出鼠标初始位置
        let beginX=e.clientX-mask.offsetLeft

        //求mask移动距离
        document.onmousemove=function () {
            let e=window.event || arguments[0]
            let endX=e.clientX-beginX

            if(endX<0){
                endX=0
            }else if(endX>=box.offsetWidth-mask.offsetWidth){
                endX=box.offsetWidth-mask.offsetWidth
            }
            mask.style.left=endX+"px"

            // 内容走的长度=(内容长度-盒子长度)/(盒子长度-滚动条长度)*滚动条走的距离

            let contentW=(oul.offsetWidth-box.offsetWidth)/(box.offsetWidth-mask.offsetWidth)*endX
           oul.style.left=-contentW+"px"
            return false
        }
        document.onmouseup=function () {
            document.onmousemove=null
        }

    }

})
橱窗特效换算公式

1.获取滚动条长度
  滚动条长度/盒子长度=盒子长度/内容长度
  滚动条长度=(盒子宽度/内容宽度)* 盒子宽度

2.拖动滚动条,求内容走的长度
  内容走的距离/滚动条走的距离=(内容长度-盒子长度)/(盒子长度-滚动条长度)
  内容走的长度=(内容长度-盒子长度)/(盒子长度-滚动条长度)*滚动条走的距离

橱窗特效

标签:特效   set   ali   操作   pos   mono   auto   mil   down   

原文地址:https://www.cnblogs.com/wywd/p/13149573.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!