用戶登錄  |  用戶注冊
首 頁源碼下載網絡學院最新源碼源碼排行屏蔽廣告
當前位置:新興網絡 > 網絡學院 > 網頁制作 > HTML

Javascript 實現滑塊以及拖動滑塊功能

減小字體 增大字體 作者:佚名  來源:本站整理  發布時間:2011-01-17 23:12:06
JS 實現滑塊功能,在網頁放置一個帶標尺的滑塊,用鼠標拖動滑塊可選擇數值的范圍,一個人性化的應用,代碼關鍵處有注釋,請認真參閱。
HTML code運行代碼復制代碼編輯
<!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>Javascript 實現滑塊以及拖動滑塊功能</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,oMaxResult
function CreateSlideBar(cTargetObj,cMinResult,cMaxResult) {
    var oTargetObj=$(cTargetObj);
    oMinResult=$(cMinResult);
    oMaxResult=$(cMaxResult);
    var oSbContainer=document.createElement('div');  
    oSbContainer.style.cssText='overflow:auto;background: url(/img/20110117/calib.gif) no-repeat 10px 30px;width:220px;height:100%;';
    oTargetObj.appendChild(oSbContainer);
    oSbContainer.innerHTML='<div id="lineCont"><div id="SbLine"></div></div>    <div id="minArw" onmousedown="RecoMove(this,event);"></div>    <div id="maxArw" onmousedown="RecoMove(this,event);"></div>    <div style="float:left;">'+nMinBound+'</div><div style="float: right">'+nMaxBound+'</div><div 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(/img/20110117/line.gif) repeat-x;height:5px;';
    $('minArw').style.cssText='position:absolute;background: url(/img/20110117/arrows.gif) no-repeat;cursor:pointer;width:10px;height:20px;';
    $('maxArw').style.cssText='position:absolute;background: url(/img/20110117/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 id="egDiv" style="margin:auto;width: 500px;">
    <button type="button" onclick="alert('您選擇的范圍是:'+$('minBound').value+'到'+$('maxBound').value+'!');">查看結果</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;//結束位置
var nStep=5;//步長
CreateSlideBar('egDiv','minBound','maxBound');
//添加的父對象,賦值的對象(最小,最大)
</SCRIPT>
</body>
</html>

Tags:JS 滑塊 拖動

作者:佚名
  • 好的評價 如果您覺得此文章好,就請您
      100%(4)
  • 差的評價 如果您覺得此文章差,就請您
      0%(0)

網絡學院評論評論內容只代表網友觀點,與本站立場無關!

   評論摘要(共 0 條,得分 0 分,平均 0 分) 查看完整評論
秒速时时彩