javascript原生滑动解锁

前端 javascript

JavaScript

2020-06-23 19:18:22

264

作者:黑夜男神

html 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }
    #slider-box {
        width: 300px;
        height: 50px;
        border-radius: 4px;
        background: #ccc;
        margin: 250px auto;
        position: relative;
    }
    #slider {
        width: 48px;
        height: 48px;
        border: 1px solid #eee;
        text-align: center;
        line-height: 48px;
        display: inline-block;
        background: #fff;
        border-radius: 4px;
        cursor: move;
        position: absolute;
        left: 0;
        z-index: 5;
    }
    #slider-text {
        text-align: center;
        line-height: 50px;
        display: inline-block;
        width: 100%;
        height: 50px;
        font-family: "微软雅黑";
        position: absolute;
        left: 0;
        z-index: 4;
    }
    #slider-bg {
        width: 0;
        height: 48px;
        background: green;
        position: absolute;
        z-index: 3;
        border-radius: 4px;

    }
    #slider-Emerge {
        width: 100px;
        background:;
        height: 50px;
        position: absolute;
    }
    #stop-go {
        width: 48px;
        height: 48px;
        border: 1px solid #eee;
        background:#36F;
        position: absolute;
        right: -1px;
        display: none;
        text-align: center;
        line-height: 48px;
        color: #fff;
        font-family: "微软雅黑";
        border-radius: 4px;
        z-index: 5;
    }
    div{
            -moz-user-select:none;
            -webkit-user-select:none;
            user-select:none;    
        }
    </style>
</head>
<body>
    <div id="slider-box">
        <span id="slider">></span>
        <span id="slider-text">滑动解锁</span>
        <span id="slider-bg"></span>
        <span id="slider-Emerge"></span>
        <span id="stop-go">∨</span>
    </div>
</body>
    <script type="text/javascript">
            var  sliderel={
                    $: function(selector){
                        return document.getElementById(selector)
                    },
                getEvent:function(e){

                     var e=e || window.event
                     return e;
                },
                stopBubble:function(e){
                    var e =this.getEvent(e)
                    if(typeof e.preventDefault != "undefined"){
                        e.preventDefault();
                    }else{
                        e.returnValue = false;
                    }
                }
             },
            Elemt={
                flag:false,
                nowMoseX: 0,
                mx:sliderel.$("slider-box"),
                sd:sliderel.$("slider"),
                st:sliderel.$("slider-text"),
                sb:sliderel.$("slider-bg"),
                se:sliderel.$("slider-Emerge"),
                sg:sliderel.$("stop-go"),
            }
                Elemt.sd.onmousedown=function(e){                
                    var e =sliderel.getEvent(e)
                    sliderel.stopBubble(e);
                    Elemt.flag=true
                    nowMoseX=e.clientX-Elemt.sd.offsetLeft;

                }
                //滑块最大移动的距离
                maxMove=Elemt.mx.offsetWidth -Elemt.sd.offsetWidth;

                //鼠标移动的时候是否成功
                Elemt.mx.onmousemove=function(e){
                        var e =sliderel.getEvent(e)
                        if(Elemt.flag){
                            var moveX=e.clientX-nowMoseX;
                            var oElemLeft=Elemt.sd.offsetLeft;//判断滑块移动的范围                            
                            if(oElemLeft<0){ //判断滑块是否超出限制位置
                                moveX=0;
                                Elemt.flag=false
                            }else if(oElemLeft>maxMove){
                                moveX=maxMove;
                                Elemt.sg.style.display="block";
                                Elemt.sd.style.display="none"
                                Elemt.sb.style.width=300+"px"
                                Elemt.st.innerHTML="滑动成功"
                                Elemt.st.style.color="#fff"
                            }
                        }
                     Elemt.sd.style.left=moveX+"px"    
                     Elemt.sb.style.width=oElemLeft+20+"px";
                }
                //当鼠抬起判断是否滑动成功
                Elemt.mx.onmouseup=function(e){
                    var e =sliderel.getEvent(e)
                        Elemt.flag=false
                        if(Elemt.sd.offsetLeft<maxMove){
                            speed=Math.ceil(Elemt.sd.offsetLeft/40);
                            time=setInterval(function(){
                                if(Elemt.sd.offsetLeft>=0){
                                    Elemt.sd.style.left=Elemt.sd.offsetLeft-speed+"px";
                                    Elemt.sb.style.width=Elemt.sb.offsetWidth-speed+"px";
                                }else{
                                    clearInterval(time);
                                    return false;
                                }
                            },10)
                       }
                    }
                //当鼠离开是否滑动成功    
                Elemt.sd.onmouseout=function(e){
                    sliderel.stopBubble(e);
                    Elemt.flag=false;
                        if(    Elemt.sd.offsetLeft<maxMove){
                            speed=Math.ceil(Elemt.sd.offsetLeft/40);
                            time=setInterval(function(){
                                if(Elemt.sd.offsetLeft>=0){
                                    Elemt.sd.style.left=Elemt.sd.offsetLeft-speed+"px";
                                    Elemt.sb.style.width=Elemt.sb.offsetWidth-speed+"px";
                                }else{
                                    clearInterval(time);
                                    return false;
                                }
                          },10);
                     }
                }
    </script>
</html>

评论 (0)

用户名
邮箱
评论

    Copyright © 2020 darkNightMan All Rights Reserved Pro 黔ICP备20005477号