素材网 素材网

jQuery拖动滑块进行百分比例划分选择

下载资源()次

阅读次数()次

发布时间:2017-01-05

jQuery拖动滑块进行百分比例划分选择
分享到:

用法简介:

来源:xw素材网

jQuery拖动滑块进行百分比例划分选择。
文件引用:

<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>


   

相关标签:

上一篇:jquery柱状垂直数据统计图表 下一篇:已经是最后一篇数据

网友评论:

评论

发表 剩余字数:20

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

@ 2013 xwcms.net . All Rights Reserved. xw素材网 | 备案号:晋ICP备13005902号 联系管理员
×

邮箱订阅

什么是邮箱订阅?

邮箱订阅是xw素材网为jquery爱好者与web程序员提供一项以邮箱的方式发送最新jquery资源与素材资源的模式,用户只需在左侧填写正确的邮箱用户名与邮箱地址我们将每天推荐最新优质资源到用户邮箱。当然每份邮箱都会有一个取消订阅按钮,当用户点击取消按钮时我们将会停止对用户发送邮箱资源推送。再次感谢大家对xw素材网的支持与关注。