代码片段： javascript 的slider
2007-10-24 21:01
316 查看
function Draggable(element) ...{
// initialize drag variable
var x = 0, y = 0, oldMouseMove, oldMouseUp;
this.test = 123;
// get style properties of element
var computedStyle;
if (typeof document.defaultView != "undefined" && typeof document.defaultView.getComputedStyle != "undefined")
computedStyle = document.defaultView.getComputedStyle(element, "");
else if (typeof element.currentStyle != "undefined")
computedStyle = element.currentStyle;
else
computedStyle = element.style;
// prep element for dragging
if (computedStyle.position == "static" || computedStyle.position == "")
element.style.position = "relative";
if (computedStyle.zIndex == "auto" || computedStyle.zIndex == "")
element.style.zIndex = 1;
element.style.left = isNaN(parseInt(computedStyle.left)) ? "0" : computedStyle.left;
element.style.top = isNaN(parseInt(computedStyle.top )) ? "0" : computedStyle.top;
// default event listeners
function onstart(event) ...{
event.dragTarget = element;
x = event.clientX;
y = event.clientY;
// Override preventDefault
event.preventDefault = (function(original) ...{
return function() ...{
element.ownerDocument.onmousemove = oldMouseMove;
element.ownerDocument.onmouseup = oldMouseUp;
original.call(event);
}
})(event.preventDefault || function() ...{});
if (element.onstart) element.onstart(event);
}
function ondrag(event, draggableObj) ...{
event.dragTarget = element;
var elemLeft = parseInt(element.style.left) + event.clientX - x;
if (draggableObj.minLeft)
...{
if (elemLeft < draggableObj.minLeft)
...{
elemLeft = draggableObj.minLeft;
}
}
if (draggableObj.maxLeft)
...{
if (elemLeft > draggableObj.maxLeft)
...{
elemLeft = draggableObj.maxLeft;
}
}
element.style.left = elemLeft + "px";
//element.style.top = parseInt(element.style.top) + event.clientY - y + "px";
x = event.clientX;
y = event.clientY;
Droppable.query(event);
if (element.ondrag) element.ondrag(event);
}
function onstop(event) ...{
event.dragTarget = element;
Droppable.query(event);
if (element.onstop) element.onstop(event);
}
// make listeners active
element.onmousedown = (function(oldMouseDown, draggableObj) ...{
return function() ...{
// Call old listener
if (oldMouseDown) oldMouseDown.apply(this, arguments);
// Store old event handlers
oldMouseMove = this.ownerDocument.onmousemove;
oldMouseUp = this.ownerDocument.onmouseup;
// Setup events
this.ownerDocument.onmousemove = function() ...{
// Call old listener
//if (oldMouseMove) oldMouseMove.apply(this, arguments);
// Call ondrag
ondrag.call(element, arguments[0] || event, draggableObj);
return false;
}
this.ownerDocument.onmouseup = function() ...{
// Call old listener
//if (oldMouseUp) oldMouseUp.apply(this, arguments);
// Call onstop
onstop.call(element, arguments[0] || event);
// Restore old event listeners
this.onmousemove = oldMouseMove;
this.onmouseup = oldMouseUp;
return false;
}
// Call onstart
onstart.call(this, arguments[0] || event);
return false;
}
})(element.onmousedown, this);
// override event attachers
if (element.addEventListener)
element.addEventListener = (function(original) ...{
return function(event, listener, useCapture) ...{
switch (event) ...{
case "start":
onstart = (function(old) ...{
return function(event) ...{ old.call(element,event); listener.call(element,event); }
})(onstart);
break;
case "drag":
ondrag = (function(old) ...{
return function(event) ...{ old.call(element,event); listener.call(element,event); }
})(ondrag);
break;
case "stop":
onstop = (function(old) ...{
return function(event) ...{ old.call(element,event); listener.call(element,event); }
})(onstop);
break;
default:
original.call(element, event, listener, useCapture);
}
}
})(element.addEventListener);
if (element.attachEvent)
element.attachEvent = (function(original) ...{
return function(event, listener) ...{
switch (event) ...{
case "onstart":
onstart = (function(old) ...{
return function(event) ...{ old.call(element,event); listener.call(element,event); }
})(onstart);
break;
case "ondrag":
ondrag = (function(old) ...{
return function(event) ...{ old.call(element,event); listener.call(element,event); }
})(ondrag);
break;
case "onstop":
onstop = (function(old) ...{
return function(event) ...{ old.call(element,event); listener.call(element,event); }
})(onstop);
break;
default:
original.call(element, event, listener);
}
}
})(element.attachEvent);
if (window.attachEvent)
window.attachEvent("onbeforeunload", function() ...{
onstart = ondrag = onstop = element.onmousedown = element.addEventListener = element.attachEvent = null;
element = null;
});
}
// initialize Droppable in the global scope
var Droppable;
(function() ...{
if (document.getBoxObjectFor) ...{
function getOffset(element) ...{
var box = document.getBoxObjectFor(element);
return ...{ x: box.x, y: box.y };
}
}
else if (document.all && navigator.appName == "Microsoft Internet Explorer" && !window.opera) ...{
function getOffset(element) ...{
var range = document.body.createTextRange();
range.moveToElementText(element);
var rect = range.getBoundingClientRect();
return ...{ x: rect.left, y: rect.top };
}
}
else ...{
function getOffset(element) ...{
var accumulator = arguments[1] || ...{ x: 0, y: 0 };
if (element && element != document.body) ...{
accumulator.x += element.offsetLeft;
accumulator.y += element.offsetTop;
return getOffset(element.offsetParent, accumulator);
}
else ...{
return accumulator;
}
}
}
// initialize private pointers to current target information
var cTarget = null, cHover = null, cUnhover = null, cDrop = null;
function hotSpots(x,y) ...{
cTarget = cHover = cUnhover = cDrop = null;
}
// declare Droppable within the private scope
Droppable = function(element) ...{
// Calculate offset
var offset = getOffset(element);
// Calculate other edge offset
var edge = ...{ x: offset.x + element.offsetWidth, y: offset.y + element.offsetHeight };
// Assign a finder function
hotSpots = (function(old) ...{
return function(x,y) ...{
if (offset.x <= x && x <= edge.x && offset.y <= y && y <= edge.y) ...{
cTarget = element;
cHover = onhover;
cUnhover = onunhover;
cDrop = ondrop;
}
else ...{
old(x,y);
}
}
})(hotSpots);
// default event listeners
function onhover(event) ...{
event.dropTarget = element;
if (element.onhover) element.onhover(event);
}
function onunhover(event) ...{
event.dropTarget = element;
if (element.onunhover) element.onunhover(event);
}
function ondrop(event) ...{
event.dropTarget = element;
if (element.ondrop) element.ondrop(event);
}
// override event attachers
if (element.addEventListener)
element.addEventListener = (function(original) ...{
return function(event, listener, useCapture) ...{
switch (event) ...{
case "hover":
onhover = (function(old) ...{
return function(event) ...{ old.call(element,event); listener.call(element,event); }
})(onhover);
break;
case "unhover":
onunhover = (function(old) ...{
return function(event) ...{ old.call(element,event); listener.call(element,event); }
})(onunhover);
break;
case "drop":
ondrop = (function(old) ...{
return function(event) ...{ old.call(element,event); listener.call(element,event); }
})(ondrop);
break;
default:
original.call(element, event, listener, useCapture);
}
}
})(element.addEventListener);
if (element.attachEvent)
element.attachEvent = (function(original) ...{
return function(event, listener) ...{
switch (event) ...{
case "onhover":
onhover = (function(old) ...{
return function(event) ...{ old.call(element,event); listener.call(element,event); }
})(onhover);
break;
case "onunhover":
onunhover = (function(old) ...{
return function(event) ...{ old.call(element,event); listener.call(element,event); }
})(onunhover);
break;
case "ondrop":
ondrop = (function(old) ...{
return function(event) ...{ old.call(element,event); listener.call(element,event); }
})(ondrop);
break;
default:
original.call(element, event, listener);
}
}
})(element.attachEvent);
if (window.attachEvent)
window.attachEvent("onbeforeunload", function() ...{
hotSpots = onhover = onunhover = ondrop = element.addEventListener = element.attachEvent = cTarget = cHover = cUnhover = cDrop = null;
element = null;
});
}
// Setup a query method
Droppable.query = function(event) ...{
var oTarget = cTarget,
oHover = cHover,
oUnhover = cUnhover,
oDrop = cDrop;
var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft,
scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
hotSpots(event.clientX + scrollLeft, event.clientY + scrollTop);
switch (event.type) ...{
case "mousemove": // onhover & onunhover
if (oTarget != null && oTarget != cTarget)
oUnhover.call(oTarget, event);
if (oTarget == null && cTarget != null)
cHover.call(cTarget, event);
break;
case "mouseup": // ondrop
if (cTarget != null) ...{
cUnhover.call(cTarget, event);
cDrop.call(cTarget, event);
}
break;
}
}
Droppable.reset = function() ...{
hotSpots = function(x,y) ...{
cTarget = cHover = cUnhover = cDrop = null;
}
hotSpots();
}
})();
// Fix the function prototype for IE5/Mac
if (typeof Function.prototype.apply == "undefined")
Function.prototype.apply = function(scope, args) ...{
if (!args) args = [];
var index = 0, result;
do ...{ -- index } while (typeof scope[index] != "undefined");
scope[index] = this;
switch (args.length) ...{
case 0:
result = scope[index]();
break;
case 1:
result = scope[index](args[0]);
break;
case 2:
result = scope[index](args[0], args[1]);
break;
case 3:
result = scope[index](args[0], args[1], args[2]);
break;
case 4:
result = scope[index](args[0], args[1], args[2], args[3]);
break;
default:
result = scope[index](args[0], args[1], args[2], args[3], args[4]);
break;
}
delete scope[index];
return result;
}
if (typeof Function.prototype.call == "undefined")
Function.prototype.call = function(scope) ...{
var args = new Array(Math.max(arguments.length-1, 0));
for (var i = 1; i < arguments.length; i++)
args[i-1] = arguments[i];
return this.apply(scope, args);
}
function DoubleSlider(contain, minValue, maxValue, points, initPoints) ...{
this.minValue = minValue;
this.maxValue = maxValue;
this.lenPerStep = parseInt(contain.style.width)/(maxValue-minValue);
this.lenPerStepHalf = this.lenPerStep/2;
this.points = points;
this.pointsPos = new Array();
var nodes = contain.getElementsByTagName("DIV");
for (var i=0; i<points.length; i++)
...{
this.pointsPos.push(this.lenPerStep * points[i]);
nodes[3].innerHTML = nodes[3].innerHTML + "<span style='position:absolute;float:left;left:"+ this.pointsPos[i] + "px;'><img src='slider_h_point.gif' border=0></span>";
}
this.spaceBetweenSlider = nodes[1];
nodes[0].style.left = this.pointsPos[0] - 5 + "px";
nodes[2].style.left = this.pointsPos[points.length-1] - 5 + "px";
this.leftSlider = new Draggable(nodes[0]);
this.rightSlider = new Draggable(nodes[2]);
this.leftSlider.minLeft = this.pointsPos[0] - 5;
this.rightSlider.minLeft = this.pointsPos[1] - 5;
this.leftSlider.maxLeft = this.pointsPos[points.length-2] - 5;
this.rightSlider.maxLeft = this.pointsPos[points.length-1] - 5;
for (var i=0; i<points.length; i++)
...{
if (points[i] == initPoints[0])
...{
nodes[0].style.left = this.pointsPos[i] - 5 + "px";
this.rightSlider.minLeft = this.pointsPos[i+1] - 5;
}
else if (points[i] == initPoints[1])
...{
nodes[2].style.left = this.pointsPos[i] - 5 + "px";
this.leftSlider.maxLeft = this.pointsPos[i-1] - 5;
break;
}
}
this.spaceBetweenSlider.style.left = nodes[0].style.left;
this.spaceBetweenSlider.style.width = parseInt(nodes[2].style.left) - parseInt(nodes[0].style.left) + "px";
nodes[0].ondrag = nodes[2].ondrag = (function(nodes, doubleSlider) ...{
return function() ...{
doubleSlider.spaceBetweenSlider.style.left = nodes[0].style.left;
doubleSlider.spaceBetweenSlider.style.width = parseInt(nodes[2].style.left) - parseInt(nodes[0].style.left) + "px";
return false;
}
})(nodes, this);
nodes[0].onstop = (function(nodes, doubleSlider) ...{
return function() ...{
var elemLeft = parseInt(nodes[0].style.left);
for (var i=0; i<doubleSlider.pointsPos.length-1; i++)
...{
if (elemLeft<doubleSlider.pointsPos[i] + (doubleSlider.pointsPos[i+1]-doubleSlider.pointsPos[i])/2)
...{
nodes[0].style.left = doubleSlider.pointsPos[i] - 5 + "px";
doubleSlider.rightSlider.minLeft = doubleSlider.pointsPos[i+1] - 5;
doubleSlider.spaceBetweenSlider.style.left = nodes[0].style.left;
doubleSlider.spaceBetweenSlider.style.width = parseInt(nodes[2].style.left) - parseInt(nodes[0].style.left) + "px";
break;
}
}
return false;
}
})(nodes, this);
nodes[2].onstop = (function(nodes, doubleSlider) ...{
return function() ...{
var elemLeft = parseInt(nodes[2].style.left);
for (var i=doubleSlider.pointsPos.length-1; i>0; i--)
...{
if (elemLeft>doubleSlider.pointsPos[i] - (doubleSlider.pointsPos[i] - doubleSlider.pointsPos[i-1])/2)
...{
nodes[2].style.left = doubleSlider.pointsPos[i] - 5 + "px";
doubleSlider.leftSlider.maxLeft = doubleSlider.pointsPos[i-1] - 5;
doubleSlider.spaceBetweenSlider.style.left = nodes[0].style.left;
doubleSlider.spaceBetweenSlider.style.width = parseInt(nodes[2].style.left) - parseInt(nodes[0].style.left) + "px";
break;
}
}
return false;
}
})(nodes, this);
}
<html>
<body>
<style>...
.ajax__slider_h_rail {...}{position:relative;background:url("slider_h_rail.gif") repeat-x;height:22px;}
.ajax__slider_h_handle {...}{float:left;position:absolute;background:url("slider_h_handle.gif") no-repeat;height:22px;width:10px;top:0;}
.ajax__slider_h_midSpace {...}{float:left;position:absolute;background:url("slider_h_midBg.gif") no-repeat;top:0;height:22px;}
.ajax__slider_h_point {...}{float:left;position:absolute;background:url("slider_h_point.gif") no-repeat;top:0;}
</style>
<script type="text/javascript" src="dragdrop.js"></script>
<form name="form1" id="form1">
<div style="position:relative;">
<div class="ajax__slider_h_rail" id="Slider1_railElement" style="width:250px;">
<div class="ajax__slider_h_handle" >
<img src="slider_h_handle.gif" />
</div>
<div class="ajax__slider_h_midSpace">
<img src="slider_h_midBg.gif" width="1" />
</div>
<div class="ajax__slider_h_handle" >
<img src="slider_h_handle.gif" />
</div>
<div>
</div>
</div>
</div>
<div id="info"></div>
<script language="JavaScript" type="text/javascript">...
window.onload = function() ...{
var one = document.getElementById("Slider1_railElement");
DoubleSlider(one, 0, 25, [1, 3, 6, 12, 24], [1, 12]);
}
</script>
<div id="one">Drag something onto me</div>
<div id="two">Drag me onto something</div>
</form>
</body>
</html>
Some js CODE
AutoFlex.prototype._getPropertyChangeHandler = function(){
var obj = this;
return function (){
obj._onPropertyChange.call(obj);
}
}
/**//**
*
* Crossbrowser Drag Handler
* http://www.webtoolkit.info/
*
**/
var DragHandler = ...{
// private property.
_oElem : null,
// public method. Attach drag handler to an element.
attach : function(oElem) ...{
oElem.onmousedown = DragHandler._dragBegin;
// callbacks
oElem.dragBegin = new Function();
oElem.drag = new Function();
oElem.dragEnd = new Function();
return oElem;
},
// private method. Begin drag process.
_dragBegin : function(e) ...{
var oElem = DragHandler._oElem = this;
if (isNaN(parseInt(oElem.style.left))) ...{ oElem.style.left = '0px'; }
if (isNaN(parseInt(oElem.style.top))) ...{ oElem.style.top = '0px'; }
var x = parseInt(oElem.style.left);
var y = parseInt(oElem.style.top);
e = e ? e : window.event;
oElem.mouseX = e.clientX;
oElem.mouseY = e.clientY;
oElem.dragBegin(oElem, x, y);
document.onmousemove = DragHandler._drag;
document.onmouseup = DragHandler._dragEnd;
return false;
},
// private method. Drag (move) element.
_drag : function(e) ...{
var oElem = DragHandler._oElem;
var x = parseInt(oElem.style.left);
var y = parseInt(oElem.style.top);
e = e ? e : window.event;
oElem.style.left = x + (e.clientX - oElem.mouseX) + 'px';
oElem.style.top = y + (e.clientY - oElem.mouseY) + 'px';
oElem.mouseX = e.clientX;
oElem.mouseY = e.clientY;
oElem.drag(oElem, x, y);
return false;
},
// private method. Stop drag process.
_dragEnd : function() ...{
var oElem = DragHandler._oElem;
var x = parseInt(oElem.style.left);
var y = parseInt(oElem.style.top);
oElem.dragEnd(oElem, x, y);
document.onmousemove = null;
document.onmouseup = null;
DragHandler._oElem = null;
}
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Javascript实用代码片段（译）
- javascript/js 原生动态引入外部css文件及动态插入css代码片段
- 【代码片段】javascript多个多选框全选或全不选
- JavaScript常用的代码片段
- 95 个超实用的 JavaScript 代码片段（ ES6+ 编写）
- 【代码片段】javascript上传文件并预览
- 超实用的 JavaScript 数组代码片段
- 常用javascript代码片段集锦
- JavaScript URL编码 代码片段记忆
- JavaScript 有用的代码片段和 trick
- 分享5个有趣的 JavaScript 代码片段
- JavaScript和JQuery实用代码片段（一）
- sublime text 3 添加 javascript 代码片段 ( snippet )
- 实用代码片段--Javascript
- JavaScript的漂亮的代码片段
- 几个有用的JavaScript/jQuery代码片段（转）
- 100个直接可以拿来用的JavaScript实用功能代码片段
- JavaScript代码片段
- javascript/js 原生动态插入外部js文件及动态插入js代码片段，兼容ie
- H5中JavaScript常用代码片段