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



82 325 109



特效描述:jQuery 拖动滑块 百分比进度条,jQuery拖动滑块百分比进度条特效

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/index.css">

2. 引入JS

<script type="text/javascript" src="js/jquery-1.7.2.js"></script>

3. HTML代码

<div class="chinaz">
<div class="left f-mt60">
<!--滑动选区-->
<div class="f-range">
	<div class="f-hk f-hk1" src="images/hk1.png"><span class="f-range-tips">80%</span></div>
	<div class="f-hk f-hk2" src="images/hk2.png"><span class="f-range-tips">35%</span></div>
	<div class="f-hk f-hk3" src="images/hk3.png"><span class="f-range-tips">25%</span></div>
	<div class="f-hk f-hk4" src="images/hk4.png"><span class="f-range-tips">0%</span></div>
</div>
<!--滑动选区-->
<p class="f-rangeArea clearfix">
	<span class="left">100%</span>
	<span class="right">0%</span>
</p>
<div class="f-mb40">
	<p class="f-range-msg">
		<span class="f-color f-color1">&nbsp;</span>
		<span class="f-color-text">选项1</span>
		<span class="f-color-area"><span class="f-valMax">100%</span>~<span class="f-valMin">70%</span></span>
	</p>
	<p class="f-range-msg">
		<span class="f-color f-color2">&nbsp;</span>
		<span class="f-color-text">选项2</span>
		<span class="f-color-area"><span class="f-valMax">70%</span>~<span class="f-valMin">55%</span></span>
	</p>
	<div class="clear"></div>
	<p class="f-range-msg">
		<span class="f-color f-color3">&nbsp;</span>
		<span class="f-color-text">选项3</span>
		<span class="f-color-area"><span class="f-valMax">55%</span>~<span class="f-valMin">45%</span></span>
	</p>
	<p class="f-range-msg">
		<span class="f-color f-color4">&nbsp;</span>
		<span class="f-color-text">选项4</span>
		<span class="f-color-area"><span class="f-valMax">45%</span>~<span class="f-valMin">35%</span></span>
	</p>
	<div class="clear"></div>
</div>
</div>
</div>
<!--main end-->
<script>
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<minLeft){
					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<$(".f-hk").length;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+"%");
	   }
   }
})
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滑动 滑块 滑动门 触屏滑动 滑动插件 滑块插件 滑动星星打分 其他 滑动选项卡 滑动切换 进度条 进度条插件

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到