手指（鼠标）左右滑动控制进度

效果如下：这里写图片描述
代码如下(移动端/pc端)：
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <meta content="telephone=no" name="format-detection" />
        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
        <title>2017/12/29 要元旦了</title>              
        <style>
            *{margin:0;padding:0;}
            body{background:#fff;}
            .demo{margin: 15px 4%;}
            .below{
                width: 100%;height: 50px;
                background: url(../../img/images/axes.png) no-repeat center center;
                background-size: 100% 100%;
                margin: 0 auto
                }
            .above{
                width:50%;height: 50px;
                background:rgba(0,0,233,0.1);

                }
        </style>
    </head>
    <body>
        <div class="demo">
            <div class="below">
                <div class="above"></div>
            </div>
        </div>
    </body>
    <script type="text/javascript" src="../../js/jquery-3.2.1.min.js" ></script>
    <script>
$(function(){

$(".demo").on("touchstart", function(e) {
    e.preventDefault();
    startX = e.originalEvent.changedTouches[0].pageX,
    startY = e.originalEvent.changedTouches[0].pageY;
    var aboveW=$(".above").width();//获取遮罩层当前width

    $(this).on("touchmove", function(e) {
        e.preventDefault();
        moveEndX = e.originalEvent.changedTouches[0].pageX,
        moveEndY = e.originalEvent.changedTouches[0].pageY,
        X = moveEndX - startX,
        Y = moveEndY - startY;

        if(X>0){    
            var moveW=X+aboveW;
            //判断遮罩百分比是否>100（溢出）处理touchend事件中的值  先x10四舍五入后再x10获得百分比
            var _width= Math.round(moveW/$(".below").width()*10)*10 > 100 ? 100 : (Math.round(moveW/$(".below").width()*10)*10);   
            if(moveW>$(".below").width()){//判断遮罩宽度是否>父框宽度（溢出）处理touchmove事件中的值
                moveW=$(".below").width();
            }

            window.localStorage.setItem("_width",_width);
            $(".above").css("width",moveW);    
        }else{
            //判断遮罩百分比是否<0 处理touchend事件中的值  计算遮罩占容器百分比
            var moveW=(aboveW+X)<0? 0:(aboveW+X);
            var _width= Math.round(moveW/$(".below").width()*10)*10;

            window.localStorage.setItem("_width",_width)
            $(".above").css("width",moveW);
        }   
    })
  }).on("touchend",function(){
    $(".above").css("width",window.localStorage.getItem("_width")+"%");
    $(this).off("touchmove")
});

$(".demo").mousedown(function(e){
    e.preventDefault();
    startX=e.pageX;
    startY=e.pageY;
    var aboveW=$(".above").width();//获取遮罩层当前width

    $(this).mousemove(function(e){
        e.preventDefault();
        moveEndX=e.pageX;
        moveEndY=e.pageY;

        X=moveEndX-startX;
        Y=moveEndY-startY;
        if(X>0){    
            var moveW=X+aboveW;
            //判断遮罩百分比是否>100（溢出）处理touchend事件中的值  先x10四舍五入后再x10获得百分比
            var _width= Math.round(moveW/$(".below").width()*10)*10 > 100 ? 100 : (Math.round(moveW/$(".below").width()*10)*10);   
            if(moveW>$(".below").width()){//判断遮罩宽度是否>父框宽度（溢出）处理touchmove事件中的值
                moveW=$(".below").width();
            }

            window.localStorage.setItem("_width",_width);
            $(".above").css("width",moveW);    
        }else{
            //判断遮罩百分比是否<0 处理touchend事件中的值  计算遮罩占容器百分比
            var moveW=(aboveW+X)<0? 0:(aboveW+X);
            var _width= Math.round(moveW/$(".below").width()*10)*10;

            window.localStorage.setItem("_width",_width)
            $(".above").css("width",moveW);
        }   
    })
}).mouseup(function(){
    $(".above").css("width",window.localStorage.getItem("_width")+"%");
    $(this).off("mousemove")
}).mouseout(function(){
    $(".above").css("width",window.localStorage.getItem("_width")+"%");
    $(this).off("mousemove")
})

})
    </script>
</html>
背景图：这里写图片描述
手指（鼠标）左右滑动控制进度

猜你喜欢
