div模拟滑块滑动和HTML5 range控件的对比 如图:
用div模拟当鼠标在滑条外时,鼠标此时移动滑块不改变位置。而input type为range控件不会有这个问题。如图:
怎么修改这段js能实现呢?
var left = $(".progress").offset().left;
var width = $(".progress").width();
var flag = false;
$(".slider").on("mousedown",function(e){
flag = true;
})
$(".slider").on("mousemove",function(e){
if(flag){
var moveDis = e.pageX -left;
moveDis = (moveDis) > width ? width : moveDis ;
$(this).css("left",Math.abs(moveDis/width*100)+"%")
}
})
$(".slider").on("mouseup",function(e){
flag = false;
})
不知道你说的是不是这个意思。http://codepen.io/yihuaxiang/pen/xOYWQd