滑动杆代替输入数字,如何实现?

hyh20000 2004-09-18 01:46:38
请教:
如何在HTML中生成一个滑动杆,滑动杆旁边有一个数字显示框。左右移动滑动杆,旁边的数字框就会随着变大或者变小数字(数字在0~100之间,最左侧为0,右侧100)。
并且:::
当选择好了数字后,点击页面中的一个“确认”按纽,则相应的调出一个页面出来!!比如,选0~30之间,则打开aaa.html;数字在31~60之间,则打开bbb.html....


请高手施教。
...全文
141 7 打赏 收藏 举报
写回复
7 条回复
切换为时间正序
请发表友善的回复…
发表回复
hyh20000 2004-09-18
  • 打赏
  • 举报
回复
我找到这样一个滑动条效果:
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()>


===========================================================================
但如何实现数字显示?如何实现调出不同的页面呢??
mrshelly 2004-09-18
  • 打赏
  • 举报
回复
做一个可拖动的层。
再判断层的位置以确定数值。
hyh20000 2004-09-18
  • 打赏
  • 举报
回复
实现起来这么复杂啊!

看不懂,在机器上也没有出现想要的效果。。。

不过,还是谢谢你zhaoxiaoyang(梅雪香)
梅雪香 2004-09-18
  • 打赏
  • 举报
回复
引入的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
梅雪香 2004-09-18
  • 打赏
  • 举报
回复
引用的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>
梅雪香 2004-09-18
  • 打赏
  • 举报
回复
滑动条页面代码:
<!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>
hyh20000 2004-09-18
  • 打赏
  • 举报
回复
期待中
期待中
期待中。。。
发帖
JavaScript

8.7w+

社区成员

Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
帖子事件
创建了帖子
2004-09-18 01:46
社区公告
暂无公告