Форум

webuses · #1 (**permalink**) 25.06.2013, 09:48

<!DOCTYPE HTML>
<head>
<meta charset="UTF-8" />
<title>Полоса</title>
</head>

<body>

<style>
#beg {

}
#polosa {
    border: 1px solid #FFFFFF;
    height: 5px;
    margin: 0 auto;
    position: relative;
    top: 10px;
    width: 150px;
}
#block {
    background: none repeat scroll 0 0 #CCCCCC;
    height: 50px;
    width: 200px;
}
#znach {
    left: 25px; 
    position: relative;
}
</style>
<div id="block">
    <div id="polosa"></div>
    <div id="beg"   style="background: none repeat scroll 0 0 #FFFFFF;
    height: 20px;
    left: 24px;
    position: relative;
    width: 5px;
    cursor: pointer;" onmousedown="begun(this);"></div>
    <div id="znach" >0</div>
</div>
<script>
function begun(el){
    var k = false;
    var event = event || window.event;
    el.onmouseout = function(event){
        if(k==true || parseInt(el.style.left)<24 || parseInt(el.style.left)>90){
            if(parseInt(el.style.left)<24){
                el.style.left = '24px';
                
            }
            if(parseInt(el.style.left)>90){
                el.style.left = '90px';
            }
        return false;}
        else{
            var znach = document.getElementById('znach');
            if(parseInt(el.style.left)<24){
                el.style.left = '24px';
            }
            if(parseInt(el.style.left)>90){
                el.style.left = '90px';
                znach.innerHTML=event.layerX-25;
            }
            
            el.style.left = event.layerX-10+'px';
            znach.innerHTML=event.layerX-25;
        }
    }
    el.onmouseup = function(event){k = true; }
}


</script>
</body>
</html>

Почему у меня иногда отображает не правильно положение мыши то есть прокручиваю бегунком и у меня иногда его отбрасывает далеко назад

skrudjmakdak · #2 (**permalink**) 25.06.2013, 09:54

el.style.left = event.layerX-10+'px';
console.log(event.layerX-10); //отрицательное значение, поэтому и убегает влево
znach.innerHTML=event.layerX-25;
console.log(event.layerX-25);

skrudjmakdak · #3 (**permalink**) 25.06.2013, 10:00

я делал так:
при клике сохранял в переменную значение left (css) (допустим var left = parseInt(this.style.left))
а также координаты мыши при клике. var click_y = ...

и координаты при перемещении var move_y
и теперь все это слепливаем: obj.style.left = left + move_y - click_y;

webuses · #4 (**permalink**) 25.06.2013, 10:04

нет 10 это чтоб его сразу не отбрасывало в бок то есть это отступ не в том дело попробуйте код запусьтить и увидите что иногда он резко и не нат 10 пикселей отлетает влево

Сообщение от skrudjmakdak

el.style.left = event.layerX-10+'px';
console.log(event.layerX-10); //отрицательное значение, поэтому и убегает влево
znach.innerHTML=event.layerX-25;
console.log(event.layerX-25);

skrudjmakdak · #5 (**permalink**) 25.06.2013, 10:19

ну это смотря как вы дерните мышку. ща я немного накидаю..
а вообще есть плагин jquery где это уже реализовано)

webuses · #6 (**permalink**) 25.06.2013, 10:27

да я так чисто для себя решил поучить js ядро) остались события но полной документации найти что то не совсем могу по ним везде кусками

Сообщение от skrudjmakdak

ну это смотря как вы дерните мышку. ща я немного накидаю..
а вообще есть плагин jquery где это уже реализовано)

skrudjmakdak · #7 (**permalink**) 25.06.2013, 10:38

накидал, но криво работает, мне надо было с нуля))
но принцип примерно такой.. и там верстку немного бы переделать

<!DOCTYPE HTML>
<head>
<meta charset="UTF-8" />
<title>Полоса</title>
</head>

<body>

<style>
#beg {

}
#polosa {
    border: 1px solid #FFFFFF;
    height: 5px;
    margin: 0 auto;
    position: relative;
    top: 10px;
    width: 150px;
}
#block {
    background: none repeat scroll 0 0 #CCCCCC;
    height: 50px;
    width: 200px;
}
#znach {
    left: 25px; 
    position: relative;
}
</style>
<div id="block">
    <div id="polosa"></div>
    <div id="beg"   style="background: none repeat scroll 0 0 #FFFFFF;
    height: 20px;
    left: 24px;
    position: relative;
    width: 5px;
    cursor: pointer;" onmousedown="begun(this);"></div>
    <div id="znach" >0</div>
</div>
<script>
var left = -1;
var click_x = -1;

function begun(el)
	{
	var event = event || window.event;
	left = parseInt(el.style.left);
	click_x = event.layerX;

	window.onmousemove = function(event)
		{
		var event = event || window.event;
		console.log(':' + (left) + ':' +  (event.layerX - click_x))
		el.style.left = left + event.layerX - click_x + 'px';
		}
	
	window.onmouseup = function(event)
		{
		window.onmousemove = undefined;
		}
	}


</script>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript