滑动杆代替输入数字，如何实现？

滑动条页面代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns:stedysoft="http://www.stedy.com">
<head>
<title>2k3Widgets: 2k3Slider Example</title>
<meta name="generator" content="Microsoft Visual Studio .NET 7.1">
<meta name="code_language" content="C#">
<meta name="progid" content="VisualStudio.HTML">
<meta name="vs_defaultClientScript" content="jscript">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
<meta http-equiv="MSThemeCompatible" content="Yes">
<?IMPORT namespace="stedysoft" implementation="2k3Slider.htc"?>
<link rel="stylesheet" type="text/css" href="themes/blue/2k3Slider.css">
<script id="windowFunctions" language="jscript" src="../../scripts/windowFunctions.js"></script>
</head>
<body style="text-align: center;">
<div id="myDiv">
<table class="table3d" border="0" cellspacing="1" cellpadding="2" width="525">
<tr>
<td colspan="2"><stedysoft:2k3Slider id="mySlider" value="50" onchange="jscript: 
sliderValue.value = this.value;" /></td>
</tr>
<tr>
<td width="140px" align="right" valign="top" nowrap>
<font class="small">Value:</font>
</td>
<td>
<input id="sliderValue" class="frmObject" style="width: 368px;" value="50">
</td>
</tr>
</table><br>
</div>
<table class="table3d" border="0" cellspacing="1" cellpadding="2" width="525">
<tr>
<td width="140px" align="right" valign="top" nowrap>
<font class="small">Display:</font>
</td>
<td>
<select class="frmObject" style="width: 368px;" size="1" onchange="jscript: myDiv.style.display = this.value;">
<option value="block" selected>Block</option>
<option value="none">None</option>
</select>
</td>
</tr>
</table><br>
<table class="table3d" border="0" cellspacing="1" cellpadding="2" width="525">
<tr>
<td width="140px" align="right" valign="top" nowrap>
<font class="small">Enabled:</font>
</td>
<td>
<select class="frmObject" style="width: 368px;" size="1" onchange="jscript: mySlider.disabled = (this.value == 0);">
<option value="1" selected>Yes</option>
<option value="0">No</option>
</select>
</td>
</tr>
</table><br>
<table class="table3d" border="0" cellspacing="1" cellpadding="2" width="525" ID="Table1">
<tr>
<td width="140px" align="right" valign="top" nowrap>
<font class="small">Theme:</font>
</td>
<td>
<select class="frmObject" style="width: 368px;" size="1" onchange='jscript: window.document.styleSheets.item(0).href = "themes/" + this.value + "/2k3Slider.css";'>
<option value="blue" selected>Blue [default]</option>
<option value="olive">Olive</option>
<option value="silver">Silver</option>
<option value="classic">Classic Windows</option>
</select>
</td>
</tr>
</table>
</body>
</html>

解决方案 »

  1.   

    引用的HTC文件代码:
    <head>
    <public:component tagName="2k3Slider">
    <meta http-equiv="MSThemeCompatible" content="yes">
    <public:defaults viewLinkContent viewInheritStyle="false" contentEditable="false" tabStop="true" />
    <public:attach event="oncontentready" onevent="initElement()" />
    <public:attach event="onpropertychange" onevent="elementPropertyChange()" />
    <public:attach event="ondetach" onevent="cleanupElement()" />
    <public:property name="value" value="0" />
    <public:event name="onchange" id="onchange" />
    </public:component>

    <style>
    body
    {
    background-color: transparent;
    height: 20px;
    cursor: default;
    position: absolute;
    overflow: hidden;
    }
    #iSlide
    {
    border-top: 1px solid buttonshadow;
    border-right: 1px solid buttonhighlight;
    border-bottom: 1px solid buttonhighlight;
    border-left: 1px solid buttonshadow;
    height: 4px;
    width: 100%;
    margin-top: 8px;
    overflow: hidden;
    cursor: default;
    }
    #iButton
    {
    position: absolute;
    top: 0px;
    cursor: default;
    }
    </style>

    <script language="jscript">
    var startX ;
    var buttonX ;
    var internalSettingProperties = false ;
    function initElement() {
    window.attachEvent("onload", elementOnLoad) ;
    iBody.onselectstart = elementOnSelect ;
    iBody.oncontextmenu = elementOnContextMenu ;
    iButton.setAttribute("src", element.currentStyle.buttonImage) ;
    iButton.onmouseover = buttonOnMouseOver ;
    iButton.onmouseout = buttonOnMouseOut ;
    iButton.onmousedown = buttonOnMouseDown ;
    iButton.onmouseup = buttonOnMouseUp ;
    iBody.onresize = bodyOnResize ;
    iBody.onmouseup = buttonOnMouseUp ;
    }
    function elementOnLoad() {
    try {
    window.document.styleSheets.item(0).owningElement.attachEvent("onload", buttonOnMouseOut) ;
    var newX = ((element.offsetWidth - iButton.offsetWidth) / 100) * parseInt(element.value) ;
    if (newX > 0 || newX > (element.offsetWidth - iButton.offsetWidth)) { iButton.style.left = newX ; }
    }
    catch(e) {
    alert(e) ;
    }
    }
    function cleanupElement() {
    window.document.styleSheets.item(0).owningElement.detachEvent("onload", buttonOnMouseOut) ;
    }
    function elementOnSelect() {
    with (window.event) {
    cancelBubble = true ;
    returnValue = false ;
    }
    return false ;
    } function elementOnContextMenu() {
    with (window.event) {
    cancelBubble = true ;
    returnValue = false ;
    }
    return false ;
    }
    function elementPropertyChange() {
    if (internalSettingProperties) { return ; }
    if (window.event.propertyName == "value") {
    bodyOnResize() ;
    onchange.fire() ;
    }
    }
    function buttonOnMouseOver() {
    iButton.setAttribute("src", element.currentStyle.buttonImageOver) ;
    }
    function buttonOnMouseOut() {
    iButton.setAttribute("src", element.currentStyle.buttonImage) ;
    }
    function buttonOnMouseDown() {
    iButton.setAttribute("src", element.currentStyle.buttonImageDown) ;
    startX = window.event.clientX ;
    buttonX = iButton.offsetLeft ;
    iBody.setCapture() ;
    iBody.onmousemove = bodyOnMouseMove ;
    }
    function buttonOnMouseUp() {
    var clientX = window.event.clientX ;
    var clientY = window.event.clientY ;
    iBody.releaseCapture() ;
    iBody.onmousemove = null ;
    if ((clientX < (iButton.offsetLeft) || clientX > (iButton.offsetLeft + iButton.offsetWidth)) ||
       (clientY < 0 || clientY > (iButton.offsetHeight))) {
    iButton.setAttribute("src", element.currentStyle.buttonImage) ;
    }
    else {
    iButton.setAttribute("src", element.currentStyle.buttonImageOver) ;
    }
    }
    function bodyOnMouseMove() {
    var newX = window.event.clientX - startX + buttonX ;
    if (newX < 0) {
    newX = 0 ;
    }
    if (newX > element.offsetWidth - iButton.offsetWidth) {
    newX = element.offsetWidth - iButton.offsetWidth ;
    }
    iButton.style.left = newX ;
    internalSettingProperties = true ;
    element.value = parseInt(newX / (element.offsetWidth - iButton.offsetWidth) * 100) ;
    internalSettingProperties = false ;
    onchange.fire() ;
    }
    function bodyOnResize() {
    try {
    var newX = ((element.offsetWidth - iButton.offsetWidth) / 100) * parseInt(element.value) ;
    if (newX > 0 || newX > (element.offsetWidth - iButton.offsetWidth)) { iButton.style.left = newX ; }
    }
    catch(e) {
    alert(e) ;
    }
    }
    </script>
    </head><body id="iBody">
    <div id="iSlide"></div>
    <img id="iButton">
    </body>
      

  2.   

    引入的CSS文件代码:
    /* ---------------------------------------------------- */
    /* 2k3Widgets (2k3Slider) Stylesheet                    */
    /*                                                      */
    /* Copyright ?002-2004 Stedy Software and Systems      */
    /* Please see http://www.stedy.com for terms of use.    */
    /* ---------------------------------------------------- *//* ---------------------------------------------------- */
    /* MDI application styles                               */
    /* ---------------------------------------------------- */
    body
    {
    background-color: #F6F6F6;
    margin: 10px;
    }
    .table3d
    {
        border: 1px solid #7F9DB9;
    }
    .small 
    {
        font-family: Verdana, Arial, Helvetica;
        font-size: 8pt;
    }
    .frmObject 
    {
        font-family: Verdana, Arial, Helvetica;
        font-size: 10pt;
    }
    /* ---------------------------------------------------- */
    /* 2k3Slider                                            */
    /* ---------------------------------------------------- */
    stedysoft\:2k3Slider {
    background-color: transparent;
    buttonImage: ../2k3Slider/themes/blue/2k3SliderButton.gif;
    buttonImageOver: ../2k3Slider/themes/blue/2k3SliderButtonOver.gif;
    buttonImageDown: ../2k3Slider/themes/blue/2k3SliderButtonDown.gif;
    width: 100%;
    }
    目录结构如下:
    -main
     |-2k3slider.htm
     |-2k3Slider.htc
     |-themes
       |-blue
         |-2k3Slider.css
         |-2k3SliderButton.gif
         |-2k3SliderButtonDown.gif
         |-2k3SliderButtonOver.gif
      

  3.   

    实现起来这么复杂啊！看不懂，在机器上也没有出现想要的效果不过，还是谢谢你zhaoxiaoyang(梅雪香)
      

  4.   

    我找到这样一个滑动条效果：
    http://www.northsz.com/downym/web/java/view.asp?articleid=299[代码]
    1、将下面的代码加在<body></body>之间
    <STYLE type=text/css>TD {
    FONT-SIZE: 14px
    }
    .outerSlideContainer {
    BORDER-BOTTOM: buttonface 1px inset; BORDER-LEFT: buttonface 1px inset; BORDER-RIGHT: buttonface 1px inset; BORDER-TOP: buttonface 1px inset; HEIGHT: 20px; MARGIN-LEFT: 10px; WIDTH: 300px
    }
    .sliderHandle {
    BACKGROUND: buttonface; BORDER-BOTTOM: white 2px outset; BORDER-LEFT: white 2px outset; BORDER-RIGHT: white 2px outset; BORDER-TOP: white 2px outset; FONT-SIZE: 12px; HEIGHT: 18px; OVERFLOW: hidden; TEXT-ALIGN: center; WIDTH: 33px
    }
    .lineContainer {
    HEIGHT: 18px; POSITION: absolute; WIDTH: 298px
    }
    .line {
    FILTER: alpha(style=1); HEIGHT: 18px; OVERFLOW: hidden; POSITION: relative; WIDTH: 298px
    }
    #colorBox {
    BORDER-BOTTOM: buttonface 1px inset; BORDER-LEFT: buttonface 1px inset; BORDER-RIGHT: buttonface 1px inset; BORDER-TOP: buttonface 1px inset; HEIGHT: 50px; WIDTH: 50px
    }
    </STYLE><SCRIPT type=text/javascript>
    var dragobject = null;
    var type;
    var onchange = "";
    var tx;
    var ty;
    function getReal(el, type, value) {
    temp = el;
    while ((temp != null) && (temp.tagName != "BODY")) {
    if (eval("temp." + type) == value) {
    el = temp;
    return el;
    }
    temp = temp.parentElement;
    }
    return el;
    }function moveme_onmousedown() {
    var tmp = getReal(window.event.srcElement, "className", "sliderHandle"); //Traverse the element tree
    if(tmp.className == "sliderHandle") {
    dragobject = tmp; //This is a global reference to the current dragging object onchange = dragobject.getAttribute("onchange"); //Set the onchange function
    if (onchange == null) onchange = "";
    type = dragobject.getAttribute("type"); //Find the type if (type=="y") //Vertical
    ty = (window.event.clientY - dragobject.style.pixelTop);
    else //Horizontal
    tx = (window.event.clientX - dragobject.style.pixelLeft); window.event.returnValue = false;
    window.event.cancelBubble = true;
    }
    else {
    dragobject = null; //Not draggable
    }
    }function moveme_onmouseup() {
    if(dragobject) {
    dragobject = null;
    }
    }function moveme_onmousemove() {
    if(dragobject) {
    if (type=="y") {
    if(event.clientY >= 0) {
    if ((event.clientY - ty >= 0) && (event.clientY - ty <= dragobject.parentElement.style.pixelHeight - dragobject.style.pixelHeight)) {
    dragobject.style.top = event.clientY - ty;
    }
    if (event.clientY - ty < 0) {
    dragobject.style.top = "0";
    }
    if (event.clientY - ty > dragobject.parentElement.style.pixelHeight - dragobject.style.pixelHeight - 0) {
    dragobject.style.top = dragobject.parentElement.style.pixelHeight - dragobject.style.pixelHeight;
    } dragobject.value = dragobject.style.pixelTop / (dragobject.parentElement.style.pixelHeight - dragobject.style.pixelHeight);
    eval(onchange.replace(/this/g, "dragobject"));
    }
    }
    else {
    if(event.clientX  >= 0) {
    if ((event.clientX  - tx >= 0) && (event.clientX - tx <= dragobject.parentElement.clientWidth - dragobject.style.pixelWidth)) {
    dragobject.style.left = event.clientX - tx;
    }
    if (event.clientX - tx < 0) {
    dragobject.style.left = "0";
    }
    if (event.clientX - tx > dragobject.parentElement.clientWidth - dragobject.style.pixelWidth - 0) {
    dragobject.style.left = dragobject.parentElement.clientWidth - dragobject.style.pixelWidth;
    } dragobject.value = dragobject.style.pixelLeft / (dragobject.parentElement.clientWidth - dragobject.style.pixelWidth);
    eval(onchange.replace(/this/g, "dragobject"));
    }
    }


    window.event.returnValue = false;
    window.event.cancelBubble = true;
    } 
    }function setValue(el, val) {
    el.value = val;
    if (el.getAttribute("TYPE") == "x")
    el.style.left =  val * (el.parentElement.clientWidth - el.style.pixelWidth);
    else
    el.style.top =  val * (el.parentElement.clientHeight - el.style.pixelHeight); eval(el.onchange.replace(/this/g, "el"))
    }document.onmousedown = moveme_onmousedown;
    document.onmouseup = moveme_onmouseup;
    document.onmousemove = moveme_onmousemove;document.write('<style type="text/css">\
    .sliderHandle {position: relative; cursor: default;}\
    </style>');
    </SCRIPT>
    <SCRIPT type=text/javascript>
    <!--
    function update(el) 
    {
    var red   = Math.round(255*redSlider.value);
    var green = Math.round(255*greenSlider.value);
    var blue  = Math.round(255*blueSlider.value);
    var color = "RGB(" + red + "," + green + "," + blue + ")";
    colorBox.style.backgroundColor = color;
    redSlider.innerHTML = red;
    greenSlider.innerHTML = green;
    blueSlider.innerHTML = blue;
    redLeft.style.background = "RGB(" + 0 + "," + green + "," + blue + ")";
    redRight.style.background = "RGB(" + 255 + "," + green + "," + blue + ")";
    greenLeft.style.background = "RGB(" + red + "," + 0 + "," + blue + ")";
    greenRight.style.background = "RGB(" + red + "," + 255 + "," + blue + ")";
    blueLeft.style.background = "RGB(" + red + "," + green + "," + 0 + ")";
    blueRight.style.background = "RGB(" + red + "," + green + "," + 255 + ")";
    }
    function init() 
    {
    setValue(redSlider, 0.5);
    setValue(greenSlider, 0.5);
    setValue(blueSlider, 0.5);
    }
    //-->
    </SCRIPT>
    <TABLE>
      <TBODY>
      <TR>
        <TD align=right>Red:</TD>
        <TD><SPAN class=outerSlideContainer>
          <DIV class=lineContainer id=redRight style="BACKGROUND: rgb(255,0,0)">
          <DIV class=line id=redLeft style="BACKGROUND: rgb(0,0,0)"></DIV></DIV>
          <DIV class=sliderHandle id=redSlider type="x" value="0" 
          onchange="update(this)">0 </DIV></SPAN></TD>
        <TD align=middle rowSpan=3 vAlign=center>
          <DIV id=colorBox></DIV></TD></TR>
      <TR>
        <TD align=right>Green:</TD>
        <TD><SPAN class=outerSlideContainer>
          <DIV class=lineContainer id=greenRight style="BACKGROUND: rgb(0,255,0)">
          <DIV class=line id=greenLeft style="BACKGROUND: rgb(0,0,0)"></DIV></DIV>
          <DIV class=sliderHandle id=greenSlider type="x" value="0" 
          onchange="update(this)">0 </DIV></SPAN></TD></TR>
      <TR>
        <TD align=right>Blue:</TD>
        <TD><SPAN class=outerSlideContainer>
          <DIV class=lineContainer id=blueRight style="BACKGROUND: rgb(0,0,255)">
          <DIV class=line id=blueLeft style="BACKGROUND: rgb(0,0,0)"></DIV></DIV>
          <DIV class=sliderHandle id=blueSlider type="x" value="0" 
          onchange="update(this)">0 </DIV></SPAN></TD></TR></TBODY></TABLE>
    2、将下面的代码加在<body>里(例<body **加代码处**>) 
    <body onload=init()>
    ===========================================================================
    但如何实现数字显示？如何实现调出不同的页面呢？？