SliderBar滑动条，网页滑块代码

2024-09-05 12:18:26

字体：大中小

来源：转载

供稿：网友

SliderBar网页滑动条代码，网页滑块代码，拖动上边的三条滑动条可改变色块的颜色值，由此可扩展出取色器。本滑动条代码类自定样式SetStyle()，带有onSroll功能，有setSldPoint（设置位置)接口和getSldPoint(取得位置）接口，可自己设置sliderBar的最大值（不是sliderbar的长度，而是值），并支持自定义微调功能（setIncrement(10))，默认为5。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">            <HTML>            <HEAD>            <TITLE>Slider Bar 网页滑动条</TITLE>            <style>            body { background-color:#fff; text-align:center; font-family:verdana; font-size:9pt; }            .sliderObj { width:350px; height:25px; background-color:#fff; border:1px solid #666666; }            .sliderBar { width:20px; background-color:#666666; border:1px solid #333; }            .sliderBtn { width:30px; background-color:#666666; color:#fff; border:1px solid #000000; }            .r-sliderObj { width:300px; height:25px; background-color:#fff; border:1px solid #CC0000; }            .r-sliderBar { width:20px; background-color:#CC0000; border:1px solid #333; }            .r-sliderBtn { width:20px; background-color:#CC0000; color:#fff; border:1px solid #000000; }            .g-sliderObj { width:300px; height:25px; background-color:#fff; border:1px solid #006600; }            .g-sliderBar { width:20px; background-color:#006600; border:1px solid #333; }            .g-sliderBtn { width:20px; background-color:#006600; color:#fff; border:1px solid #000000; }            .b-sliderObj { width:300px; height:25px; background-color:#fff; border:1px solid #003399; }            .b-sliderBar { width:20px; background-color:#003399; border:1px solid #333; }            .b-sliderBtn { width:20px; background-color:#003399; color:#fff; border:1px solid #000000; }            </style>            </HEAD>            <BODY>            <p>            <div id="s1"></div>            <p>            <div id="d1">r</div>            <p>            <div id="s2"></div>            <p>            <div id="d2">g</div>            <p>            <div id="s3"></div>            <p>            <div id="d3">b</div>            <p>            <div id="color" class="sliderObj"></div>            <SCRIPT LANGUAGE="JavaScript">                        </SCRIPT>           </BODY>            </HTML>

上一篇：鼠标移入改变样式，鼠标移出恢复

下一篇：Js拖拽图片上传，拖拽添加附件