拖動(dòng)滑塊選擇范圍的網(wǎng)頁插件代碼

2024-09-05 12:22:27

字體：大中小

供稿：網(wǎng)友

在網(wǎng)頁放置一個(gè)帶標(biāo)尺的滑塊，用鼠標(biāo)拖動(dòng)滑塊可選擇數(shù)值的范圍，一個(gè)人性化的應(yīng)用，代碼關(guān)鍵處有注釋，請(qǐng)認(rèn)真參閱。本效果在IE8下測(cè)試通過，運(yùn)行一切良好，在IE6/7及火狐下沒有測(cè)試，有時(shí)間的測(cè)試一下。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>拖動(dòng)滑塊選擇范圍的網(wǎng)頁插件代碼</title><script type="text/javascript">function $(cID) {	return document.getElementById(cID);}function SeekTp(oObj,nLorT) {	if (nLorT==0) {		var nPosition=oObj.offsetLeft;	}	else {		var nPosition=oObj.offsetTop;	}	if(oObj.offsetParent!=null){		nPosition+=SeekTp(oObj.offsetParent,nLorT);	}	return nPosition;}function StopMove() {	document.onmousemove=null;}function RecoMove(oObj,e) {	ev=e?e:window.event;	var nOldX=ev.clientX;	var nOldP=oObj.offsetLeft;	var nSPpx=nStep/(nMaxBound-nMinBound)*$('lineCont').offsetWidth;	nSPpx=nSPpx<6?(5):nSPpx;	document.onmouseup=StopMove;	document.onmousemove=function(e) {		ev=e?e:window.event;		var nTemX=ev.clientX-nOldX;		var cOpc=nTemX<0?'-':'+';		nMove=Math.round(Math.abs(nTemX)/nSPpx)*nSPpx;		nMove=nTemX<0?nMove*-1:nMove*1;		$('minBound').value=nMove;		if ((oObj.offsetLeft>=SeekTp($('lineCont'),0)-5)&&(oObj.offsetLeft<=SeekTp($('lineCont'),0)+$('lineCont').offsetWidth-5)) {			var oTemE=oObj.id=='minArw'?$('maxArw'):$('minArw');			var lEva;			if (oTemE==$('maxArw')) {				lEva=eval(oObj.offsetLeft+5+nSPpx<oTemE.offsetLeft);				if (nMove+SeekTp($('lineCont'),0)<oObj.offsetLeft) {					lEva=true;				}			}			else {				lEva=eval(oObj.offsetLeft>=oTemE.offsetLeft+5+nSPpx);				if (oObj.offsetLeft+5<SeekTp($('lineCont'),0)+$('lineCont').offsetWidth+nMove) {					lEva=true;				}			}			if (lEva) {				oObj.style.left=nOldP+nMove+'px';			}		}		if (oObj.offsetLeft<SeekTp($('lineCont'),0)-5) {			oObj.style.left=SeekTp($('lineCont'),0)-5+'px';		}		if (oObj.offsetLeft>SeekTp($('lineCont'),0)+$('lineCont').offsetWidth-5) {			oObj.style.left=SeekTp($('lineCont'),0)+$('lineCont').offsetWidth-5+'px';		}		$('SbLine').style.left=$('minArw').offsetLeft+5+'px';		$('SbLine').style.width=$('maxArw').offsetLeft-$('minArw').offsetLeft+'px';		oMinResult.value=parseInt(($('SbLine').offsetLeft-SeekTp($('lineCont'),0))/$('lineCont').offsetWidth*(nMaxBound-nMinBound)+nMinBound);		oMaxResult.value=parseInt(($('SbLine').offsetLeft-SeekTp($('lineCont'),0)+$('SbLine').offsetWidth)/$('lineCont').offsetWidth*(nMaxBound-nMinBound)+nMinBound);		$('LiveValue').innerHTML=oMinResult.value+' - '+oMaxResult.value;	}}var oMinResult,oMaxResultfunction CreateSlideBar(cTargetObj,cMinResult,cMaxResult) {	var oTargetObj=$(cTargetObj);	oMinResult=$(cMinResult);	oMaxResult=$(cMaxResult);	var oSbContainer=document.createElement('div');		oSbContainer.style.cssText='overflow:auto;background: url(/jscss/demoimg/201101/calib.gif) no-repeat 10px 30px;width:220px;height:100%;';	oTargetObj.appendChild(oSbContainer);	oSbContainer.innerHTML='<div   class="70qarhlowxag"   id="lineCont"><div   class="70qarhlowxag"   id="SbLine"></div></div>	<div   class="70qarhlowxag"   id="minArw" onmousedown="RecoMove(this,event);"></div>	<div   class="70qarhlowxag"   id="maxArw" onmousedown="RecoMove(this,event);"></div>	<div style="float:left;">'+nMinBound+'</div><div style="float: right">'+nMaxBound+'</div><div   class="70qarhlowxag"   id="LiveValue" style="text-align:center;font-weight:bold;"></div>';	$('lineCont').style.cssText='margin:10px 10px 20px;border:#666 solid 1px;width:198px;height:5px;';	$('SbLine').style.cssText='position:absolute;background: url(/jscss/demoimg/201101/line.gif) repeat-x;height:5px;';	$('minArw').style.cssText='position:absolute;background: url(/jscss/demoimg/201101/arrows.gif) no-repeat;cursor:pointer;width:10px;height:20px;';	$('maxArw').style.cssText='position:absolute;background: url(/jscss/demoimg/201101/arrows.gif) no-repeat;cursor:pointer;width:10px;height:20px;';	$('minArw').style.left=SeekTp($('lineCont'),0)-5+'px';	$('minArw').style.top=SeekTp($('lineCont'),1)-5+'px';	$('maxArw').style.left=SeekTp($('lineCont'),0)+$('lineCont').offsetWidth-5+'px';	$('maxArw').style.top=SeekTp($('lineCont'),1)-5+'px';	$('SbLine').style.width=$('lineCont').offsetWidth+'px';	oMinResult.value=nMinBound;	oMaxResult.value=nMaxBound;}</script></head><body><div   class="70qarhlowxag"   id="egDiv" style="margin:auto;width: 500px;">	<button type="button" onclick="alert('您選擇的范圍是：'+$('minBound').value+'到'+$('maxBound').value+'！');">查看結(jié)果</button>	<input type="hidden" id="minBound" value="0" size="6">	<input type="hidden" id="maxBound" value="100" size="6"></div><script type="text/javascript">var nMinBound=0;//開始位置var nMaxBound=100;//結(jié)束位置var nStep=5;//步長(zhǎng)CreateSlideBar('egDiv','minBound','maxBound');//添加的父對(duì)象,賦值的對(duì)象(最小,最大)</script></body></html>

上一篇：給網(wǎng)頁定義快捷鍵演示代碼

下一篇：隨滾動(dòng)條滾動(dòng)的在線客服工具條