4-22

今天弄了两个小程序进度条和橱窗特效

 

1.进度条特效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>进度条</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            border: none;
        }

        #progress {
            width: 1000px;
            height: 35px;
            line-height: 35px;
            margin: 100px auto;
            position: relative;
        }

        #progressBra {
            width: 900px;
            height: 100%;
            background-color: #e8e8e8;
            border-radius: 8px;

            position: relative;
        }

        #progressValue {
            position: absolute;
            top: 0;
            right: 30px;
        }

        #progressBg {
            width: 50px;
            height: 100%;
            background-color: orangered;
            border-bottom-left-radius: 8px;
            border-top-left-radius: 8px;
        }

        span {
            width: 25px;
            height: 49px;
            background-color: orangered;
            position: absolute;
            left: 50px;
            top: -7px;
            border-radius: 5px;
            cursor: pointer;
        }

    </style>
</head>
<body>
<div id="progress">
    <div id="progressBra">
        <div id="progressBg"></div>
        <span></span>
    </div>
    <div id="progressValue">0%</div>
</div>
<script>
    window.onload = function () {
        //1.获取需要的标签
        var progress = document.getElementById('progress');
        var progressBra = progress.children[0];
        var progressBg = progressBra.children[0];
        var mask = progressBra.children[1];
        var progressValue = progress.children[1];

        //2.监听鼠标按下
        mask.onmousedown = function (event) {
            var e = event || window.event;

            //2.1获取初始位置
            var offsetLeft = event.clientX - mask.offsetLeft;

            //2.2监听鼠标移动
            //这里鼠标按下后，在整个界面都可以移动
            document.onmousemove = function (event) {
                var e = event || window.event;

                //2.3获取移动的位置
                var x = e.clientX - offsetLeft;

                //2.4边界
                if(x<0){
                    x=0;
                }else if(x>=progressBra.offsetWidth-mask.offsetWidth){
                    x=progressBra.offsetWidth-mask.offsetWidth;
                }
                //2.4动起来
                mask.style.left=x+'px';
                progressBg.style.width=x+'px';
                progressValue.innerHTML=parseInt(x/(progressBra.offsetWidth-mask.offsetWidth)*100)+'%';
                return false;
            }

            //2.5 监听鼠标抬起
            document.onmouseup=function () {
                document.onmousemove=null;
            }
        }
    }
</script>
</body>
</html>





2.橱窗特效
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>橱窗</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
            border: none;
        }

        #box{
            width: 800px;
            height: 230px;
            border: 1px solid #ccc;

            position: relative;
            margin: 100px auto;
            overflow: hidden;
        }

        #box ul{
            width: 2000px ;
            position: absolute;
            left: 0;
            top: 0;
        }

        #box ul li{
            float: left;
        }
        
        #boxBottom{
            width: 100%;
            height: 30px;
            position: absolute;
            left: 0;
            bottom: 0;
            background-color: #e8e8e8;
        }

        .mask  {
            position: absolute;
            left: 0;
            top: 0;
            height: 30px;
            background-color: orangered;
            border-radius: 5px;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div id="box">
    <ul id="boxTop">
        <li><img src="images/timg1.jpg" alt=""></li>
        <li><img src="images/timg2.jpg" alt=""></li>
        <li><img src="images/timg3.jpg" alt=""></li>
        <li><img src="images/timg4.jpg" alt=""></li>
        <li><img src="images/timg5.jpg" alt=""></li>
        <li><img src="images/timg6.jpg" alt=""></li>
        <li><img src="images/timg7.jpg" alt=""></li>
        <li><img src="images/timg8.jpg" alt=""></li>
        <li><img src="images/timg9.jpg" alt=""></li>
        <li><img src="images/timg10.jpg" alt=""></li>
    </ul>
    <div id="boxBottom">
        <span class="mask"></span>
    </div>
</div>

<script>
    window.onload=function () {
        //1.获取需要的标签
        var box=document.getElementById('box');
        var boxTop=document.getElementById('boxTop');
        var boxBottom=document.getElementById('boxBottom');
        var mask=boxBottom.children[0];

        //2.设置滚动条的长度
        //滚动条的长度=（盒子宽度/内容宽度）*盒子宽度
        var maskLen=(box.offsetWidth/boxTop.offsetWidth)*box.offsetWidth;
        mask.style.width=maskLen+'px';

        //3.鼠标操作
        mask.onmousedown=function (event) {
            var e=event||window.event;

            //3.1获取初始值
            var beginX=event.clientX-mask.offsetLeft;

            //3.2移动
            document.onmousemove=function (event) {
                var e=event||window.event;

                //3.3求出移动距离
                var endX=event.clientX-beginX;

                //3.4边界
                if(endX<0){
                    endX=0;
                }else if(endX>=boxBottom.offsetWidth-mask.offsetWidth){
                    endX=boxBottom.offsetWidth-mask.offsetWidth;
                }
                //3.4动起来
                mask.style.left=endX+'px';

                //内容移动的距离=（内容的长度-盒子的长度）/（盒子的长度-滚动条的长度）*滚动条走的距离
                var contenLen=(boxTop.offsetWidth-box.offsetWidth)/(box.offsetWidth-mask.offsetWidth)*endX;

                boxTop.style.left=-contenLen+'px';
                return false
            };

            //3.5 监听鼠标抬起
            document.onmouseup=function () {
                document.onmousemove=null;
            }
        }
    }
</script>
</body>
</html>
posted @ 2019-04-22 21:14  不要呀  阅读(153)  评论(0)    收藏  举报