|
Всем доброго времени суток.
В общем, есть слайдер (на домен не обращайте внимание, просто надо было на какой нибудь из сайтов залить в ftp страницу, дабы все смогли увидить и почувствовать всю соль проблемы), работает подобно разблокировке айфона, однако, если курсор выходит за пределы темного фона (.slider) при нажатии на ползунок, он (.thumb), при отпускании мыши, не возвращается на место.
Вот сам код:
Из end.html
| Код: |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="lib.js"></script>
<style>
.slider {
border-radius: 6px;
background: url('background-btn.png');
background: -moz-linear-gradient(left top , url('background-btn.png'), url('background-btn.png')) repeat scroll 0 0 transparent;
background: -webkit-gradient(linear, left top, right bottom, from(url('background-btn.png')), to(url('background-btn.png')));
background: linear-gradient(left top, url('background-btn.png'), url('background-btn.png'));
width: 200px;
height: 37px;
}
.thumb {
width: 50px;
height: 33px;
border-radius: 4px;
position: relative;
left: 2px;
top: 2px;
background: url('polzunok.png');
cursor: pointer;
}
</style>
</head>
<body>
<div id="slider" class="slider">
<div class="thumb" onMouseUp="this.style.left='2px'"></div>
</div>
<script language="JavaScript">
var sliderElem = document.getElementById('slider');
var thumbElem = sliderElem.children[0];
thumbElem.ondragstart = function() { return false; };
thumbElem.onmousedown = function(e) {
e = fixEvent(e);
var thumbCoords = getCoords(thumbElem);
var shiftX = e.pageX - thumbCoords.left;
var shiftY = e.pageY - thumbCoords.top;
var sliderCoords = getCoords(sliderElem);
document.onmousemove = function(e) {
e = fixEvent(e);
// вычесть координату родителя, т.к. position: relative
var newLeft = e.pageX - shiftX - sliderCoords.left;
// курсор ушёл вне слайдера
if (newLeft < 0) {
newLeft = 0;
}
var rightEdge = sliderElem.offsetWidth - thumbElem.offsetWidth;
if (newLeft > rightEdge) {
newLeft = rightEdge;
}
thumbElem.style.left = newLeft + 'px';
}
document.onmouseup = function() {
document.onmousemove = document.onmouseup = null;
};
return false; // disable selection start (cursor change)
};
</script>
</body>
</html>
|
И из lib.js
| Код: |
function fixEvent(e) {
e = e || window.event;
if (!e.target) e.target = e.srcElement;
if (e.pageX == null && e.clientX != null ) { // если нет pageX..
var html = document.documentElement;
var body = document.body;
e.pageX = e.clientX + (html.scrollLeft || body && body.scrollLeft || 0);
e.pageX -= html.clientLeft || 0;
e.pageY = e.clientY + (html.scrollTop || body && body.scrollTop || 0);
e.pageY -= html.clientTop || 0;
}
if (!e.which && e.button) {
e.which = e.button & 1 ? 1 : ( e.button & 2 ? 3 : ( e.button & 4 ? 2 : 0 ) )
}
return e;
}
function getCoords(elem) {
var box = elem.getBoundingClientRect();
var body = document.body;
var docElem = document.documentElement;
var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop;
var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft;
var clientTop = docElem.clientTop || body.clientTop || 0;
var clientLeft = docElem.clientLeft || body.clientLeft || 0;
var top = box.top + scrollTop - clientTop;
var left = box.left + scrollLeft - clientLeft;
return { top: Math.round(top), left: Math.round(left) };
}
|
Буду признателен за помощь! |
|
|
|
|
