<%
@ 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
阅读(
358)
评论()
编辑
收藏
举报
