Показать сообщение отдельно
  #1 (permalink)  
Старый 02.04.2012, 19:08
Интересующийся
Отправить личное сообщение для land15 Посмотреть профиль Найти все сообщения от land15
 
Регистрация: 01.12.2011
Сообщений: 14

как убрать выделение рисунка
Это слайдер типа "старое-новое", т.е две картинки одна над другой, мышью двигается ползунок, 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'));

}

Последний раз редактировалось land15, 02.04.2012 в 20:30.
Ответить с цитированием