my slide bar

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="SlideBar.aspx.cs" Inherits="SlideBar" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
<script type="text/javascript">
//if (navigator.appName == "Microsoft Internet Explorer") 
//{
//    var Browser = "IE";
//}
//else 
//{
//    var Browser = "FF";
//}

var leftPointerDoDrag = false;
var rightPointerDoDrag = false;
var currentLeftPointer;
var currentRightPointer;
var currentBar;
var leftPointerMouseOffset;
var rightPointerMouseOffset;

function MouseDownHandler(e, pointer, bar)
{
    if(!e)//for IE
    {
        e = window.event;
    }
    
    var number = pointer.id.substring(pointer.id.length-1);
    if(number == "1")
    {
        currentLeftPointer = pointer;
        currentRightPointer = document.getElementById(pointer.id.substring(0, pointer.id.length-1)+"2");
        currentBar = bar;
        leftPointerMouseOffset = e.clientX - currentLeftPointer.offsetLeft;
        leftPointerDoDrag = true;
    }
    else if(number == "2")
    {
        currentRightPointer = pointer;
        currentLeftPointer = document.getElementById(pointer.id.substring(0, pointer.id.length-1)+"1");
        currentBar = bar;
        rightPointerMouseOffset = e.clientX - currentRightPointer.offsetLeft;
        rightPointerDoDrag = true;
    }
}

function MouseMoveHandler(e)
{
    if(!e)//for IE
    {
        e = window.event;
    }
    if(leftPointerDoDrag)
    {
        var newPosition = e.clientX - leftPointerMouseOffset;
        var minLeft = getAbsoluteLeftPosition(currentBar);
        var maxLeft = getAbsoluteLeftPosition(currentBar) + (currentRightPointer.offsetLeft - currentLeftPointer.offsetWidth);
        if(newPosition <= minLeft)
        {
            newPosition = minLeft;
        }
        if(newPosition >= maxLeft)
        {
            newPosition = maxLeft;
        }
        setPosition(currentLeftPointer,(newPosition - minLeft));
    }
    else if(rightPointerDoDrag)
    {
        var newPosition = e.clientX - rightPointerMouseOffset;
        var minLeft = getAbsoluteLeftPosition(currentBar) + currentLeftPointer.offsetLeft + currentLeftPointer.offsetWidth;
        var maxLeft = getAbsoluteLeftPosition(currentBar) + (currentBar.offsetWidth - currentRightPointer.offsetWidth);
        if(newPosition <= minLeft)
        {
            newPosition = minLeft;
        }
        if(newPosition >= maxLeft)
        {
            newPosition = maxLeft;
        }
        setPosition(currentRightPointer,(newPosition - minLeft + currentLeftPointer.offsetLeft + currentLeftPointer.offsetWidth));
    }
    return false;
}

function MouseUpHandler(e)
{
    if(!e)//for IE
    {
        e = window.event;
    }
    leftPointerDoDrag = false;
    rightPointerDoDrag = false;
}

document.onmousemove = MouseMoveHandler;
document.onmouseup = MouseUpHandler;


function getAbsoluteLeftPosition(object) 
{
    var count = object.offsetLeft;
    while(object.offsetParent!=null) //recursive way to get the absolute location value
    {
        var parent = object.offsetParent;
        count = count + parent.offsetLeft;
        object = parent;
    }
    return count;
}

function setPosition(object,relativeLeftPosition) 
{
    object.style.left = relativeLeftPosition + "px";//relative
}
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="bar" style="position:absolute;top:4px;left:4px;width:500px;height:8px;background-color:#0099ff">
      <div id="pointer1" style="position:absolute;top:0px;left:0px;width:8px;height:8px;cursor:pointer;cursor:hand;float:right;background-image: url(http://www.diplok.com/1ppl/demo/img/head.gif)" onmousedown="MouseDownHandler(event, this, this.offsetParent)"></div>
      <div id="pointer2" style="position:absolute;top:0px;left:492px;width:8px;height:8px;cursor:pointer;cursor:hand;float:right;background-image: url(http://www.pandacares.org/images/PawPointer-green.gif)" onmousedown="MouseDownHandler(event, this, this.offsetParent)"></div>
    </div>
    </form>
</body>
</html>
posted @ 2008-01-30 07:48  N/A2011  阅读(364)  评论(0)    收藏  举报