Это слайдер типа "старое-новое", т.е две картинки одна над другой, мышью двигается ползунок, clipает часть верхнюю, показывая таким образом часть нижней.
в FF часто один из рисунков или оба выделяются синеватым цветом, Я так понимаю, оттого, что ползунок не успевает за мышкой, а она под mousedown, и она пытается перетащить сам рисунок. Как можно отменить это поведение?
#box {
position:relative;
left:100px;
overflow:hidden;
width:900px;
height:500px;
}
#LowerPic {
position:absolute;
}
#UpperPic {
position:absolute;
overflow:hidden;
}
#pointer {
position:absolute;
left:50%;
width:0px;
height:100%;
border:1px solid;
}
#rectangle {
position:absolute;
top:50%;
left:-5px;
width:10px;
height:30px;
background-color:green;
}
<div id="box">
<div id="LowerPic">
<img src="images/1/1.jpg">
</div>
<div id="UpperPic">
<img src="images/1/2.jpg">
</div>
<div id="pointer">
<div id="rectangle"></div>
</div>
</div>
var Slicer = function (pointer) {
var obj = pointer,
pic = document.getElementById('UpperPic'),
mouseOffset = {},
x = tools.getCoords(obj).left - tools.getCoords(obj.parentNode).left;
function mouseDown(e) {
var e = tools.fixEvent(e);
if (e.which!=1) return
obj = this;
mouseOffset.X = e.pageX - tools.getCoords(obj).left;
mouseOffset.Y = e.pageY - tools.getCoords(obj).top;
document.onmousemove = mouseMove;
document.onmouseup = mouseUp;
document.ondragstart = function() { return false }
document.body.onselectstart = function() { return false }
}
function mouseMove(e) {
var e = tools.fixEvent(e);
obj.style.left = e.pageX - mouseOffset.X - tools.getCoords(obj.parentNode).left + 'px';
//obj.style.top = e.pageY - mouseOffset.Y - tools.getCoords(obj.parentNode).top + 'px';
x = e.pageX - mouseOffset.X - tools.getCoords(obj.parentNode).left;
pic.style.clip = "rect(0px," + x + "px," + pic.clientHeight + "px," + "0px)";
return false;
}
function mouseUp() {
obj = null;
document.onmousemove = null;
document.onmouseup = null;
document.ondragstart = null;
document.body.onselectstart;
}
pic.style.clip = "rect(0px," + x + "px," + pic.clientHeight + "px," + "0px)";
obj.onmousedown = mouseDown;
}
window.onload = function() {
Slicer(document.getElementById('pointer'));
}
