页面导航：首页 → 网络编程 → AJAX相关 → 正文内容

AjaxUI：滑动条

发布：dxy 字体：[增加减小] 类型：转载

点击运行可以看到效果:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
<HEAD> 
<TITLE> New Document </TITLE> 
<META NAME="Generator" CONTENT="EditPlus"> 
<META NAME="Author" CONTENT=""> 
<META NAME="Keywords" CONTENT=""> 
<META NAME="Description" CONTENT=""> 
<meta content-type="text/html" charset="gb2312"/> 
<style type="text/css"> 
body{text-align:center;font:12px Arial;} 
#bg{width:600px;height:20px;background:#099;margin:auto;padding:3px;text-align:left;} 
#drag{width:20px;height:20px;background:#0ff;} 
p{width:600px;text-align:left;} 
</style> 
<script type="text/javascript"> 
 var Parameter; 
 var first=true; 
//创建鼠标对象 
var Cursor=new Object();

//设置鼠标对象的方法 
Cursor.getCrusorCoordinate=function(event){ 
        var event=event || window.event; 
        var x=0; 
        var y=0; 
        if(event.pageX) 
        { 
            x=event.pageX; 
            y=event.pageY; 
        } 
        else 
        { 
            x=event.clientX+document.body.scrollLeft-document.body.clientLeft; 
            y=event.clientY+document.body.scrollTop-document.body.clientTop; 
         } 
        return {x:x,y:y}; 
}

//创建元素对象 
function Element(id) 
{ 
    this.obj=document.getElementById(id); 
}

Element.prototype={

//获得对象 
    getElement:function() 
    { 
        if(this.obj!=null||this.obj!=undefined) 
        { 
            return this.obj; 
        } 
        else 
        { 
            return "no such Element"; 
        } 
    },

//获得对象的父节点的id,如果没有则设置一个 
    getElementParent:function() 
    { 
        if(this.obj!=null||this.obj!=undefined) 
        { 
            var obj=this.obj.parentNode; 
            if(obj!=null||obj!=undefined) 
            { 
                if(obj.id==null||obj.id==undefined) 
                { 
                 obj.setAttribute("id",this.obj.id+"_parent"); 
                } 
                return obj.id; 
            } 
            else 
            { 
                return "no such parentNode"; 
            } 
        } 
        else 
        { 
            return "no such ParentNode"; 
        } 
    }, 
     
    //获得对象的页面坐标 
    getElementOffset:function() 
    { 
        if(this.obj!=null||this.obj!=undefined) 
        { 
            var left=0; 
            var top=0; 
            var obj=this.obj; 
            while(obj.offsetParent) 
            { 
                left+=obj.offsetLeft; 
                top+=obj.offsetTop; 
                obj=obj.offsetParent; 
            } 
            return{offsetLeft:left,offsetTop:top}; 
        } 
        else 
        { 
            return{offsetLeft:"no such Element",offsetTop:"no such Element"}; 
        } 
    },

//获得对象的自身尺寸 
    getElementSize:function() 
    { 
        if(this.obj!=null||this.obj!=undefined) 
        { 
            return {width:this.obj.offsetWidth,height:this.obj.offsetHeight} 
        } 
        else 
        { 
            return{width:"no such Element",height:"no such Element"}; 
        } 
    } 
}

//开始拖动并设置初始参数 
function startDrag(event,obj) 
{ 
    if(first) 
    { 
        var childElement=obj; 
        var parentElement=new Element(childElement.getElementParent()); 
        var cL=childElement.getElementOffset().offsetLeft; 
        var pL=parentElement.getElementOffset().offsetLeft; 
        var minLeft=cL-pL; 
        var maxLeft=parentElement.getElementSize().width-minLeft-childElement.getElementSize().width; 
        var difX=Cursor.getCrusorCoordinate(event).x-childElement.getElementOffset().offsetLeft; 
        Parameter={obj:childElement.getElement(),pL:pL,minLeft:minLeft,maxLeft:maxLeft,difX:difX}; 
        first=false; 
    } 
     
    if(document.attachEvent) 
    { 
        document.attachEvent("onmousemove",startMove); 
    } 
    else if(document.addEventListener) 
    { 
        document.addEventListener("mousemove",startMove,false); 
    } 
}

function stopDrag() 
{ 
    if(document.detachEvent) 
    { 
        document.detachEvent("onmousemove",startMove); 
    } 
    else if(document.removeEventListener) 
    { 
        document.removeEventListener("mousemove",startMove,false); 
    } 
}

//设置拖动监听 
function dragBind() 
{ 
    var element=new Element("drag"); 
    var childElement=element.getElement(); 
    childElement.onmousedown=function(event){startDrag(event,element);}; 
    childElement.onmouseup=function(){stopDrag();}; 
}

window.onload=dragBind; 
</script> 
</HEAD> 
<BODY> 
<div id="bg"><div id="drag" style="margin-left:0px;"></div></div>

滑动条，采用OO的方式来写这段代码,类、对象、方法、感觉很好，有个小bug，当鼠标在滑块外边释放时，无法停止对鼠标移动的监听，将mouseup事件绑定到document即可解决，当然代码要做一些相应的修改。mozilla下定位略微不准。可以纠正，不过就这样吧。 
</BODY> 
</HTML>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

Tags：AjaxUI：滑动条