一个滑块的javascript代码
<html><head>
<title>slider tests</title>
<SCRIPT LANGUAGE="JavaScript">
<!--
/*
* Uestc
* www.stuhome.net
*/
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) {
return document.layers;
} 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>
页:
[1]