<!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>为什么 我在拖拽的时候，进度条会出现卡顿的现象，不是很流畅，求 大牛给予解答，万分感谢
添加回答
举报
0/150
提交
取消