html 百分比拖动进度条,jQuery拖动滑块百分比进度条特效

特效描述：jQuery 拖动滑块 百分比进度条。jQuery拖动滑块百分比进度条特效

代码结构

1. 引入CSS

2. 引入JS

3. HTML代码

80%

35%

25%

0%

100%

0%

选项1

100%~70%

选项2

70%~55%

选项3

55%~45%

选项4

45%~35%

var index,maxLeft;

$(function(){

//range值提示

$(".f-hk").mouseenter(function(){

$(this).find(".f-range-tips").css("display","block");

});

$(".f-hk").mouseleave(function(){

$(this).find(".f-range-tips").css("display","none");

});

//拖动开始X值

var startX,preLeft,minLeft;

var handle = false;

$(".f-hk").mousedown(function(e){

//拖动开始的X坐标

startX = e.pageX;

//判断是否拖动的变量

handle = true;

index = $(".f-hk").index(this);

//获取滑块下标

preLeft = parseInt($(".f-hk").eq(index).css("left"));

//获取滑块最左的值

minLeft = parseInt($(".f-hk").eq(index-1).css("left"))+8;

})

$(document).mousemove(function(e){

e.stopPropagation();

//是否点击滑块

if(handle){

//显示提示值

$(".f-hk").eq(index).find(".f-range-tips").css("display","block");

//是否第一个

if(index==0){

//是否最后一个

if(index != $(".f-hk").length-1){

maxLeft = parseInt( $(".f-hk").eq(index+1).css("left") ) - 8;

}else{

maxLeft = 500;

}

var newLeft =e.pageX-startX+preLeft;

//设置边界

if(newLeft>maxLeft){

newLeft = maxLeft;

}

if(newLeft<0){

newLeft=0;

}

//执行拖动

$(".f-hk").eq(index).css("left",newLeft);

//动态改变提示的值

var myVal = parseInt( (1- (parseFloat($(".f-hk").eq(index).css("left"))-8*(index) ) /(500-8*(index+($(".f-hk ").length-index-1) ) ))*100 ) +"%" ;

$(".f-hk").eq(index).find(".f-range-tips").html(myVal);

//改变 信息表最小值

$(".f-range-msg").eq(index).find(".f-valMin").html(myVal);

//改变信息表最大值

if(index != $(".f-hk ").length-1){

var max = $(".f-range-msg").eq(index+1).find(".f-valMax").html(myVal) ;

}

}else{

//是否最后一个

if(index != $(".f-hk").length-1){

maxLeft = parseFloat( $(".f-hk").eq(index+1).css("left") ) - 8;

}else{

maxLeft = 500;

}

var newLeft =e.pageX-startX+preLeft;

//设置边界

if(newLeft>maxLeft){

newLeft = maxLeft;

}

if(newLeft

newLeft=minLeft;

}

//执行拖动

$(".f-hk").eq(index).css("left",newLeft);

//动态改变提示的值

var myVal = parseInt( (1- (parseFloat($(".f-hk").eq(index).css("left"))-8*(index) ) /(500-8*(index+($(".f-hk ").length-index-1) ) ))*100 ) +"%" ;

$(".f-hk").eq(index).find(".f-range-tips").html(myVal);

//改变信息表最小值

$(".f-range-msg").eq(index).find(".f-valMin").html(myVal );

//改变信息表最大值

if(index != $(".f-hk ").length-1){

var max = $(".f-range-msg").eq(index+1).find(".f-valMax").html(myVal) ;

}

}

}

})

$(document).mouseup(function(){

handle = false;

//隐藏值

$(".f-range-tips").css("display","none");

})

//初始化

for(i=0;i

//获取百分比

var getVal = parseInt($(".f-hk").eq(i).find(".f-range-tips").html());

var totalWidth = 500-8*(i+4-1-i);

var setLeft = parseInt ((1-getVal/100) * (totalWidth))+8*(i);

//初始化left值

$(".f-hk").eq(i).css("left",setLeft);

//初始化最小值

$(".f-range-msg").eq(i).find(".f-valMin").html(getVal+"%");

//初始化最大值

if(i != $(".f-hk").length-1){

$(".f-range-msg").eq(i+1).find(".f-valMin").html(getVal+"%");

}

}

})