版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_25252769/article/details/78932084
效果如下:
代码如下(移动端/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>
背景图: