pc 端区间滑块

最新推荐文章于 2022-09-29 10:25:37 发布

Zoe_Wang_ing

最新推荐文章于 2022-09-29 10:25:37 发布

阅读量695

点赞数

分类专栏： js

js 专栏收录该内容

70 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta  charset="utf-8" />
<title> js双滑块区间 </title>
<style type='text/css'>
#nhkBookbox{position:relative;width:428px;height:15px;font-size:0;line-height:0;background:#fff;border:1px solid #9C9B97}
#nhkBookrod{position:absolute;width:428px;height:8px;background:#CCC;top:3px;cursor:pointer;}
.rodstyle{position:absolute;top:-1px;width:9px;height:17px;}
#nhkBookrodleft{left:0;background:red}
#nhkBookrodright{right:0;background:blue}
</style>
</head>
<body>
<div id='nhkBookbox'>
	 <div id='nhkBookrod' οnmοusedοwn="nhkBook(this,event)"> </div>
     <div id='nhkBookrodleft' class='rodstyle' οnmοusedοwn="nhkBook(this,event)" ></div>
	 <div id='nhkBookrodright' class='rodstyle' οnmοusedοwn="nhkBook(this,event)" ></div>
</div>
<div id="v1">0</div>
<div id="v2">60</div>
<script type='text/javascript'>
var $id=function(o){return document.getElementById(o) || o;}
var nhkBook=function(o,e){
	var e = e ? e : window.event;
	if(!window.event) {e.preventDefault();}
	var init={
		mX: o.offsetLeft,
		lX: $id('nhkBookrodleft').offsetLeft,
		rX: $id('nhkBookrodright').offsetLeft,
		dX: e.clientX

	};

	document.οnmοusemοve=function(e){
		// console.log(init.dX);
		// console.log('***');
		// console.log(e.clientX);
		// console.log('###');
		// console.log(init.mX);
		// console.log('===');
		//console.log(init.lX);
		var e = e ? e : window.event;
		var dist=e.clientX-init.dX,
			len=init.mX + dist,
			l_x=init.lX,
			r_x=init.rX;
		switch ($id(o).id){
			case 'nhkBookrodleft':
				l_x=init.lX + dist;
				nhkmove('l');
				break;
			case 'nhkBookrodright':
				r_x=init.rX + dist;
				nhkmove('r');
				break;
			case 'nhkBookrod':
				l_x=init.lX + dist;
				r_x=init.rX + dist;
				nhkrodmove();
				break;
			default: break;
		}
		
		function nhkmove(d){
			if(r_x > l_x + 15 && len>=0 && len<=420 ) {
				o.style.left=len+"px";
				$id('nhkBookrod').style.left= l_x + 'px';
				$id('nhkBookrod').style.width=r_x - l_x + 'px';
				if(d=='l')	document.getElementById('v1').innerHTML =Math.round(len/7);
				else	document.getElementById('v2').innerHTML =Math.round(len/7);
			}
		};
		function nhkrodmove(){
			//console.log(o);
			if(l_x>=0 && r_x <=420 ) {
				o.style.left=len+"px";
				$id('nhkBookrodleft').style.left= l_x + "px";
				$id('nhkBookrodright').style.left= r_x +"px";
				document.getElementById('v1').innerHTML =Math.round(l_x/7);
				document.getElementById('v2').innerHTML =Math.round(r_x/7);
			}
		};
	}
	document.οnmοuseup=function(){
		document.οnmοusemοve=null;
		document.οnmοuseup=null;
	}
}
</script>
</body>
</html>

忘记在哪里看到的了。