SliderBar滑动条,网页滑块代码

  • 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">

            <!--

            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. = function() {instance.handleObjBefore()};

            sldObj.   = function() {instance.handleObjAfter()};

            //-------------------------------------------------------------------

            sldBtnL. = function() {instance.handleBtnClick('l')};

            sldBtnR. = function() {instance.handleBtnClick('r')};

            sldBtnL.onfocus     = function() {this.blur()};

            sldBtnR.onfocus     = function() {this.blur()};

            //-------------------------------------------------------------------

            sldBar. = function() {instance.handleSldDragStart()};

            sldBar. = function() {instance.handleSldDrag()};

            sldBar.   = 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>

           </BODY>

            </HTML>            


你可能感兴趣的:(接口,最大值,网页,center)