volume滑动块——html5中input type=’range’的模拟

volume滑动块——html5中input type=’range’的模拟
作者：Neoxone 发表时间： 2010年08月13号，星期五阅读：19,034 次

为了面向web application，html5在elements上做了很多增强。包括新增了很多元素，如progress，datagrid，video等等，也如包括对input等一些元素做了扩展。
input元素的type做了扩展，type=”range”便是其一。

直接看效果(chrome/safari/opera支持)

<!DOCTYPE html>
<html>
<head>
<meta  charset="utf-8" />
<title> HTML5 input元素type=range </title>
</head>
<body>
<input id="range" type="range" min="5" max="25" value="5" onchange="change()">
<span id="value">5</span>
<script type='text/javascript'>
function change() {
  var value = document.getElementById('range').value ;
  document.getElementById('value').innerHTML = value;
}
</script>
</body>
</html>

作为一个调节量值的滑动块，在未来的应用当中将会很使用的很频繁。

在html5时代还为真正来临时，我们还必须照顾到那些老浏览器。
所以用js模拟一个。(也很简单，使用图片的话，模拟起来就像了。)

<!DOCTYPE html>
<html>
<head>
<meta  charset="utf-8" />
<title> js滑块 </title>
<style type='text/css'>
#range2{position:relative;width:148px;height:2px;font-size:0;line-height:0;background:#eee;border:1px inset #9C9B97}
#mea{position:absolute;top:-5px;left:0;width:2px;height:10px;border:3px solid #fff;border-top:13px solid #3f8e55;}
</style>
</head>
<body>
<div id='range2'>
     <div id='mea' onmousedown="change2(this,event)" ></div>
</div>
<br />
<span id="value2">5</span>
<script type='text/javascript'>
function change2(o,e){
	var e = e ? e : window.event;
	if(!window.event) {e.preventDefault();}
	var tX=o.offsetLeft,
		dx=e.clientX;
	document.onmousemove=function(e){
		var e = e ? e : window.event;
		var len=tX+e.clientX-dx;
		if(len>=0 && len<=140){
			o.style.left=len+"px";
			document.getElementById('value2').innerHTML =5 + Math.round(len/7);
		}
	}
	document.onmouseup=function(){
		document.onmousemove=null;
		document.onmouseup=null;
	}
}
</script>
</body>
</html>

附加一个新效果:两个滑块确定一个区间范围。

<!DOCTYPE html>
<html>
<head>
<meta  charset="utf-8" />
<title> js双滑块区间 </title>
<style type='text/css'>
#range{position:relative;width:148px;height:2px;font-size:0;line-height:0;background:#fff;border:1px inset #9C9B97}
#meaBox{position:absolute;width:148px;height:4px;background:#ccc;top:-2px;border:1px inset #9C9B97;border-left:0;border-right:0;}
.mea{position:absolute;top:-5px;width:2px;height:10px;border:3px solid #fff;border-top:13px solid #3f8e55;}
#mea_l{left:0;}
#mea_r{right:0;border-top:13px solid #ff0000;}
</style>
</head>
<body>
<div id='range'>
	 <div id='meaBox' onmousedown="change(this,event)"> </div>
     <div id='mea_l' class='mea' onmousedown="change(this,event)" ></div>
	 <div id='mea_r' class='mea' onmousedown="change(this,event)" ></div>
</div>
<script type='text/javascript'>
var $id=function(o){return document.getElementById(o) || o;}
var change=function(o,e){
	var e = e ? e : window.event;
	if(!window.event) {e.preventDefault();}
	var init={
		mX: o.offsetLeft,
		lX: $id('mea_l').offsetLeft,
		rX: $id('mea_r').offsetLeft,
		dX: e.clientX
	};
	document.onmousemove=function(e){
		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 (o.id){
			case 'mea_l':
				l_x=init.lX + dist;
				move();
				break;
			case 'mea_r':
				r_x=init.rX + dist;
				move();
				break;
			case 'meaBox':
				l_x=init.lX + dist;
				r_x=init.rX + dist;
				move2();
				break;
			default: break;
		}
		function move(){
			if(r_x > l_x + 20 && len>=0 && len<=140 ) {
				o.style.left=len+"px";
				$id('meaBox').style.left= l_x + 'px';
				$id('meaBox').style.width=r_x - l_x + 'px';
			}
		};
		function move2(){
			if(l_x>=0 && r_x <=140 ) {
				o.style.left=len+"px";
				$id('mea_l').style.left= l_x + "px";
				$id('mea_r').style.left= r_x +"px";
			}
		};
	}
	document.onmouseup=function(){
		document.onmousemove=null;
		document.onmouseup=null;
	}
}
</script>
</body>
</html>

标签： HTML5, range

这篇文章发布于 2010年08月13号，星期五，17:25，归类于 HTML5, 浏览器与兼容。您可以跟踪这篇文章的评论通过 RSS 2.0 feed。您可以留下评论，或者从您的站点trackback。

CSSASSCSSASS

volume滑动块——html5中input type=’range’的模拟
作者：Neoxone 发表时间： 2010年08月13号，星期五阅读：19,034 次

相关文章:

留下回复

volume滑动块——html5中input type=’range’的模拟作者：Neoxone 发表时间： 2010年08月13号，星期五 阅读：19,034 次

相关文章:

留下回复

volume滑动块——html5中input type=’range’的模拟
作者：Neoxone 发表时间： 2010年08月13号，星期五阅读：19,034 次