至顶网›软件频道 ›应用软件›never sliderbar（js版简单的滑动条控件）
never sliderbar（js版简单的滑动条控件）

扫一扫
分享文章到微信
扫一扫
关注官方公众号
至顶头条
web滑动条，web滚动条，js滚动条，滑动条控件，js Sliderbar
作者：Leave For Back 来源：CSDN 2008年3月23日
已经再次更新：
支持实时监控sliderbar的数据，允许有callback回调的函数，有示例，持续更新中......
1、可自定样式SetStyle()
2、带有onSroll功能
3、有setSldPoint（设置位置)接口
4、有getSldPoint(取得位置）接口
5、可自己设置sliderBar的最大值（不是sliderbar的长度，而是值）
6、自定义微调功能（setIncrement(10))，默认为5；
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> never Slider Bar </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="never-online, blueDestiny">
<META NAME="Keywords" CONTENT="javascript Slider Bar">
<META NAME="Description" CONTENT="javascript Slider Bar">
<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">
<!--
/*===============================================================
//
//    Module     : never SliderBar
//    Script by  : never-online, blueDestiny
//    Updated    : 2006-5-12
//    Copyright  : Miracle technology all reserved
//    Website    : http://www.never-online.net
//    Email      : blueDestiny@126.com
//    Blog       : http://blog.csdn.net/blueDestiny
//    Comment    : if you using never SliderBar please hold
//                 these copyrights.
//
//    compatible : only for IE
//    History    : none
//
================================================================*/

function neverSliderBar(id,callback) { with(this) {
	this.$            = document.getElementById || document.all;
	this.sldID        = id;
	this.sldObj       = null;
	this.instance     = this;
	this.barStyle     = "sliderBar";
	this.objStyle     = "sliderObj";
	this.btnStyle     = "sliderBtn";
	this.sldBar       = null;
	this.sldBtnL      = null;
	this.sldBtnR      = null;
	this.sldPoint     = null;
	this.sldMoved     = false;
	this.sldClicked   = false;
	this.callback     = callback;
	this.sldObjOffset = null;
	this.sldBarOffset = null;
	this.callbackArg  = Array.prototype.slice.call(arguments,2);
	this.sldMax       = 100;
	this.sldIncrement = 5;
	this.sldPoint     = 0;
	//instance.init.call(this,id);
}};
neverSliderBar.prototype.setObjStyle=function(classname) { with(this)
{
	objStyle=classname;
}};
neverSliderBar.prototype.setMaxPoint=function(maxpoint) { with(this)
{
	sldMax=maxpoint;
}};
neverSliderBar.prototype.setBtnStyle=function(classname) { with(this)
{
	btnStyle=classname;
}};
neverSliderBar.prototype.setBarStyle=function(classname) { with(this)
{
	barStyle=classname;
}};
neverSliderBar.prototype.setStyle=function() { with(this)
{
	if (arguments[0]) barStyle=arguments[0];
	if (arguments[1]) btnStyle=arguments[1];
	if (arguments[2]) objStyle=arguments[2];
}};
neverSliderBar.prototype.setIncrement=function(increment) { with(this)
{
	if (isNaN(parseInt(increment))) return;
	sldIncrement = parseInt(increment);
}};
neverSliderBar.prototype.getSldPoint=function() { with(this)
{
	sldBarOffset = Offset(sldBar);
	sldObjOffset = Offset(sldObj);
	var sldObjwidth = sldObjOffset.w-sldBarOffset.w;
	var sldBarwidth = sldBarOffset.l-sldObjOffset.l;
	var sldLocation = parseInt(sldBarwidth/sldObjwidth*sldMax);
	return sldLocation;
}};
neverSliderBar.prototype.setSldPoint=function(point) { with(this)
{
	if (isNaN(parseInt(point))) return;
	if (point<0) point=0;
	if (point>sldMax) point=sldMax;
	var sldObjwidth  = sldObjOffset.w-sldBarOffset.w;
	var sldBarwidth  = sldBarOffset.l-sldObjOffset.l;
	sldPoint  = parseInt(point);
	var p = parseInt(sldPoint*sldObjwidth/sldMax)+sldObjOffset.l+1;
	sldBar.style.left = p;
	instance.getSldPoint();
}};

neverSliderBar.prototype.init=function() { with(this)
{
	if ($(sldID + '__BtnL') && $(sldID + '__BtnR') && $(sldID + '__Bar')) {
		sldBtnL = $(sldID + '__BtnL');
		sldBar  = $(sldID + '__Bar');
		sldBtnR = $(sldID + '__BtnR');
	}
	else {
		sldBtnL    = document.createElement("BUTTON");
		sldBtnL.id = sldID + '__BtnL';
		sldBar     = document.createElement("DIV");
		sldBar.id  = sldID + '__Bar';
		sldBtnR    = document.createElement("BUTTON");
		sldBtnR.id = sldID + '__BtnR';
		document.body.appendChild(sldBtnL);
		document.body.appendChild(sldBar);
		document.body.appendChild(sldBtnR);
	}
	//-------------------------------------------------------------------
	sldObj           = $(sldID);
	sldObj.className = objStyle;
	sldBarOffset     = Offset(sldBar);
	sldObjOffset     = Offset(sldObj);
	//-------------------------------------------------------------------
	sldBtnL.value          = "<<";
	sldBtnL.className      = btnStyle;
	sldBtnL.style.position = "absolute";
	//-------------------------------------------------------------------
	sldBtnR.value          = ">";
	sldBtnR.className      = btnStyle;
	sldBtnR.style.position = "absolute";
	//-------------------------------------------------------------------
	sldBar.className       = barStyle;
	sldBar.style.position  = "absolute";
	sldBar.style.top       = sldObjOffset.t;
	sldBar.style.height    = sldObjOffset.h;	
	sldBar.style.left      = sldObjOffset.l;
	instance.fixed();
	//-------------------------------------------------------------------
	sldObj.onmousedown = function() {instance.handleObjBefore()};
	sldObj.onmouseup   = function() {instance.handleObjAfter()};
	//-------------------------------------------------------------------
	sldBtnL.onmousedown = function() {instance.handleBtnClick('l')};
	sldBtnR.onmousedown = function() {instance.handleBtnClick('r')};
	sldBtnL.onfocus     = function() {this.blur()};
	sldBtnR.onfocus     = function() {this.blur()};
	//-------------------------------------------------------------------
	sldBar.onmousedown = function() {instance.handleSldDragStart()};
	sldBar.onmousemove = function() {instance.handleSldDrag()};
	sldBar.onmouseup   = function() {instance.handleSldDragEnd()};
}};
neverSliderBar.prototype.fixed=function() { with(this)
{
	sldBarOffset = Offset(sldBar);
	sldObjOffset = Offset(sldObj);

	var sldBtnLOffset      = Offset(sldBtnL);
	sldBtnL.style.left     = sldObjOffset.l-sldBtnLOffset.w;
	sldBtnL.style.top      = sldObjOffset.t;
	sldBtnL.style.height   = sldObjOffset.h;
	//-------------------------------------------------------------------
	sldBtnR.style.left     = sldObjOffset.l+sldObjOffset.w;
	sldBtnR.style.top      = sldObjOffset.t;
	sldBtnR.style.height   = sldObjOffset.h;
	//-------------------------------------------------------------------
	sldBar.style.top       = sldObjOffset.t;
	sldBar.style.height    = sldObjOffset.h;
	//-------------------------------------------------------------------
	var p = sldBarOffset.l;
	if (p < sldObjOffset.l) sldBar.style.left=sldObjOffset.l;
	var w = sldObjOffset.l+sldObjOffset.w-sldBarOffset.w;
	if (p > w) sldBar.style.left = w;
	window.setTimeout(function(){instance.fixed()},10)
}};
neverSliderBar.prototype.applyArg=function() { with(this)
{
	if (typeof(callback)=='string') callback=eval(callback);
	if (typeof(callback)=='function') {
		var callbackArguments = [];
		for(var i=0; i<callbackArg.length; i++)
		callbackArguments[i] = callbackArg[i];
		callbackArguments.push(instance.getSldPoint());
		callback.apply(this,callbackArguments);
	} else { return; }
}};
neverSliderBar.prototype.handleObjBefore=function() { with(this)
{

}};
neverSliderBar.prototype.handleObjAfter=function() { with(this)
{

}};
neverSliderBar.prototype.handleBtnClick=function(direction) { with(this)
{
	direction = direction.toLowerCase();
	sldPoint=instance.getSldPoint();
	if(direction == 'l') {
		instance.setSldPoint(this.sldPoint-sldIncrement);
	}
	else if (direction=='r') {
		instance.setSldPoint(this.sldPoint+sldIncrement);
	}
	else {
		return alert('not valid argument ' +direction);
	}
	instance.applyArg();
	instance.getSldPoint();
}};
neverSliderBar.prototype.handleSldDragStart=function() { with(this)
{
	sldBar.setCapture();
	sldMoved = true;
	sldBar.onlosecapture = function(){sldMoved=false;};
	sldPoint = event.clientX-sldBarOffset.l;
}};
neverSliderBar.prototype.handleSldDrag=function() { with(this)
{
	if(!sldMoved) return;
	var p = event.clientX-sldPoint;
	if (p <= sldObjOffset.l) {
		sldBar.style.left = sldObjOffset.l;
	}
	else if (p >= (sldObjOffset.l+sldObjOffset.w-sldBarOffset.w)) {
		sldBar.style.left = sldObjOffset.l+sldObjOffset.w-sldBarOffset.w;
	}
	else sldBar.style.left = p;
	instance.applyArg();
	instance.getSldPoint();
}};
neverSliderBar.prototype.handleSldDragEnd=function() { with(this)
{
	sldBar.releaseCapture();
	sldMoved=false;
}};
function Offset(e) {
	var t = e.offsetTop;
	var l = e.offsetLeft;
	var w = e.offsetWidth;
	var h = e.offsetHeight;
	while(e=e.offsetParent) {
		t+=e.offsetTop;
		l+=e.offsetLeft;
	}
	return { t:t, l:l, w:w, h:h }
}


var r=new neverSliderBar("s1",callback,' <b>neverSliderBar</b> ');
r.sldMax=255;
r.setBtnStyle("r-sliderBtn");
r.setBarStyle("r-sliderBar");
r.setObjStyle("r-sliderObj");
r.init();
r.setSldPoint(100);
var g=new neverSliderBar("s2",callback,' <b>neverSliderBar</b> ');
g.sldMax=255;
g.setStyle("g-sliderBar","g-sliderBtn","g-sliderObj");
g.init();
g.setSldPoint(150);
var b=new neverSliderBar("s3",callback,' <b>neverSliderBar</b> ');
b.sldMax=255;
b.setBtnStyle("b-sliderBtn");
b.setBarStyle("b-sliderBar");
b.setObjStyle("b-sliderObj");
b.setIncrement(10);
b.init();
b.setSldPoint("200");

callback(' <b>neverSliderBar</b> ');
function callback(s) {
	var $=document.getElementById;
	var color_r=r.getSldPoint();
	var color_g=g.getSldPoint();
	var color_b=b.getSldPoint();
	$("color").style.backgroundColor="rgb(" +color_r+ "," +color_g+ "," +color_b+ ")";
	$("d1").innerHTML=s+color_r;
	$("d2").innerHTML=s+color_g;
	$("d3").innerHTML=s+color_b;
}
//-->
</SCRIPT>
<p>
power by never-online, blueDestiny, http://www.never-online.net
</p>
</BODY>
</HTML>
VC++中轻松实现滑动(Slider)控件
VIP专区
VIP用户
普通用户
邮件订阅
如果您非常迫切的想了解IT领域最新产品与技术信息，那么订阅至顶网技术邮件将是您的最佳途径之一。
重磅专题
往期文章
never sliderbar（js版简单的滑动条控件）

业界热点:
