`
aideehorn
  • 浏览: 256479 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

一个滑块的javascript代码

JavaScriptprototype.netHTML 
阅读更多

<html>
<head>
<title>slider tests</title>
<SCRIPT LANGUAGE="JavaScript">
<!--
/*
* Uestc
* [url]www.stuhome.net[/url]
*/
function $(objectId) {
    if(document.getElementById && document.getElementById(objectId)) {
                return document.getElementById(objectId);
    } else if (document.all && document.all(objectId)) {
                return document.all(objectId);
    } else if (document.layers && document.layers[objectId]) {
                return document.layers[objectId];
    } else {
                return false;
    }
};
Number.prototype.NaN0=function(){return isNaN(this)?0:this;}
function getMouseOffset(target, ev){
        ev = ev || window.event;

        var docPos    = getPosition(target);
        var mousePos  = mouseCoords(ev);
        return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};
}

function getPosition(e){
        var left = 0;
        var top  = 0;
        while (e.offsetParent){
                left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0);
                top  += e.offsetTop  + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);
                e     = e.offsetParent;
        }

        left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0);
        top  += e.offsetTop  + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);

        return {x:left, y:top};

}

function mouseCoords(ev){
        if(ev.pageX || ev.pageY){
                return {x:ev.pageX, y:ev.pageY};
        }
        return {
                x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
                y:ev.clientY + document.body.scrollTop  - document.body.clientTop
        };
}
//为元素添加事件
function AddObjectEvent(targetObj,eventName,eventFunc)
{
        if(typeof targetObj == "string")
                targetObj = $(targetObj);
        if(targetObj)
        {
           if(targetObj.attachEvent)
           {
               targetObj.attachEvent(eventName,eventFunc);
           }
           else if(targetObj.addEventListener)
           {
               eventName = eventName.toString().replace(/on(.*)/i,'$1');
               targetObj.addEventListener(eventName,eventFunc,true);
           }
        }  
}
function MakeSlider(track,slider,iniPos,OnMoveFunc,OnUpFunc){
        if(typeof track == "string")
                track = $(track);
        if(typeof slider == "string")
                slider = $(slider);
        if(!slider||!track) return;


        var preLocation  = iniPos;
        var MethodOnMove = OnMoveFunc?OnMoveFunc:function(){};
        var MethodOnUp   = OnUpFunc?OnUpFunc:function(){};

        var iMouseDown  = false;
        var sliderObj  = null;
        var trackObj   = null;
        var preMousePos = null;
        var slideRange  = {min:null,max:null};
        var prePosition = getPosition(slider);
               
        slideRange.min = getPosition(track).x;
        slideRange.max = getPosition(track).x+track.offsetWidth;

        var lengthTrack = track.offsetWidth;
        var lengthSlider = slider.offsetWidth;

        var outInterface = preLocation;

        slider.style.position = "relative";
       
        var OnLoad = function(){

                slider.style.left     = (lengthTrack*preLocation-lengthSlider/2).toString()+"px";
                ReLocate();
        };

        slider.onmousedown = function(ev){
                ev = ev||window.event;

                iMouseDown  = true;
                sliderObj   = this;
                trackObj    = track;
                               
                mouseOffset          = getMouseOffset(this, ev);
                preMousePos          = mouseCoords(ev);
                return false;
        };

        var CheckOut = function(ev){
                ev = ev || window.event;

                var mousePos = mouseCoords(ev);

                if(mousePos.x<=(slideRange.min+mouseOffset.x))
                        return 1;  //左边超界
                if(mousePos.x>=(slideRange.max-(slider.offsetWidth - mouseOffset.x)))
                        return 2;  //右边超界
                return 0;      //没有超界
        };
        var OnSliding = function(ev){                               
                if(!iMouseDown||!sliderObj)return;

                ev         = ev || window.event;
                var mousePos = mouseCoords(ev);
               
                var out = CheckOut(ev);
                if(0 != out){                       

                        if(1 == out){
                                sliderObj.style.left     = "0px";
                                outInterface = 0;
                        }
                        else if(2 == out){
                                sliderObj.style.left     = (lengthTrack-lengthSlider)+"px";
                                outInterface = 1;
                        }
                        MethodOnMove(outInterface);
                        return false;
                }
                if(sliderObj){
                       
                        var reSliderLeft = mousePos.x - slideRange.min - mouseOffset.x;
                        sliderObj.style.left     = (reSliderLeft)+"px";       
                        outInterface  = reSliderLeft/(lengthTrack-lengthSlider);
                        MethodOnMove(outInterface);
                }
                if(trackObj || sliderObj)
                        return false;               
        }
        var OnSlideEnd = function(ev){
                if(sliderObj||trackObj){
                        sliderObj = null;
                        trackObj  = null;
                        iMouseDown = false;
                        MethodOnUp(outInterface);
                }
        }

        var OnTrackDown = function(ev){
                var mousePos = mouseCoords(ev);
                slider.style.left     = (mousePos.x - slideRange.min - slider.offsetWidth/2)+"px";
                ReLocate();
                outInterface = parseInt(slider.style.left.match(/(\d)+/))/(lengthTrack-lengthSlider);
                MethodOnUp(outInterface);
        };
        var ReLocate = function(){
                if(slider.style.left.indexOf("-") >= 0)
                        slider.style.left     = "0px";
                else if(parseInt(slider.style.left.match(/(\d)+/)) >= (lengthTrack-lengthSlider))
                        slider.style.left     = (lengthTrack-lengthSlider)+"px";               
        };

        AddObjectEvent(document,"onmousemove",OnSliding);
        AddObjectEvent(document,"onmouseup",OnSlideEnd);
        AddObjectEvent(track,"onclick",OnTrackDown);
        AddObjectEvent(window,"onload",OnLoad);
}
//-->
</SCRIPT>
</head>

<body> 
<div id="track1" style="width:200px;background-color:#aaa;height:10px;">
        <div id="handle1" style="width:5px;height:10px;background-color:#ff0000;"></div>
</div>
 
<p id="debug1"> </p>
   
<script>
MakeSlider('track1','handle1',0.5,function(v){$('debug1').innerHTML='滑动: '+v},function(v){$('debug1').innerHTML='结束: '+v});
</script>

</body>

</html>

分享到：
| Linux 安装 OpenOffice
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics