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

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

input元素的type做了扩展，type=”range”便是其一。

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

HTML5 input元素type=range

5

function change() {

var value = document.getElementById('range').value ;

document.getElementById('value').innerHTML = value;

}

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

在html5时代还为真正来临时，我们还必须照顾到那些老浏览器。

所以用js模拟一个。(也很简单，使用图片的话，模拟起来就像了。)

js滑块

#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;}

5

function change2(o,e){

var e = e ? e : window.event;

if(!window.event) {e.preventDefault();}

var tX=o.offsetLeft,

dx=e.clientX;

document.οnmοusemοve=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.οnmοuseup=function(){

document.οnmοusemοve=null;

document.οnmοuseup=null;

}

}

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

js双滑块区间

#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;}

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.οnmοusemοve=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.οnmοuseup=function(){

document.οnmοusemοve=null;

document.οnmοuseup=null;

}

}

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

您可以留下评论，或者从您的站点trackback。