拖拽进度条
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{padding:0;margin:0;}
#box {
width: 400px;
height: 40px;
background: red;
position: relative;
margin:100px auto;
}
#child {
width: 20px;
height: 40px;
background: blue;
position: absolute;
top: 0;
left: 0;
}
.bared {
position: absolute;
width: 0;
height: 40px;
background: blueviolet;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div id="box">
<div id="child">
</div>
<span class="bared">
</span>
</div>
<script src="js/jquery-1.11.1.js"></script>
<script>
var mouseX = 0;
var left = 0;
var onOff = false;
var maxH = $("#box").outerWidth() - $("#child").outerWidth();
$("#child").on("mousedown", function (ev) {
onOff = true;
var e = ev || event;
mouseX = e.clientX;
left = $(this).position().left;
/* console.log(mouseX,left) */
return false;
})
$(document).on("mouseover",function(ev){
if(onOff){
var e = ev || event;
var mX = e.clientX;
var len = mX - mouseX + left;
if(len < 0){
len = 0;
};
if(len > maxH){
len = maxH;
}
$("#child").css("left",len);
$(".bared").css("width",len)
}
});
$(document).on("mouseup",function(){
onOff = false;
return false;
});
$("#box").on("click",function(e){
if(!onOff){
var mouX = e.clientX;
var left = mouX - $("#box").offset().left;
if(left > maxH){
left = maxH;
}
$("#child").css("left",left);
$(".bared").css("width",left)
}
});
</script>
</body>
</html>
为什么 我在拖拽的时候，进度条会出现卡顿的现象，不是很流畅，求 大牛给予解答，万分感谢
慕勒81671991回答
-
Stardust1001
哈哈，mouseover改成mousemove试下，我试的可以，一看代码就知道是新手吧，又一个入坑的
随时随地看视频慕课网APP
相关分类
JavaScript
JQuery