Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Бегунок - как сделать? (https://javascript.ru/forum/dom-window/10143-begunok-kak-sdelat.html)

KonstantinK 21.06.2010 14:27

Бегунок - как сделать?
 
Подскажите идею или скрипт как сделать вот такой бегунок
ячейка для заполнения и
«бегунок» (примерно такой)

exec 21.06.2010 14:35

Вот у меня код для бегунка завалялся:

<div style="cursor: pointer; width: 500px; height: 5px; background: #eee; border: 1px dashed #555;" id="area"></div>
<div style="margin-left: 0px; width: 10px; height: 10px; cursor: pointer; position: absolute; background: #555; margin-top: -8px;" onmousedown="movestart(this);" id="x"></div>
<div id="counter">0</div>

<script type="text/javascript">
function movestart (el) {
document.onmousemove = function (ev) {

e = ev || window.event;

	if (e.pageX == null && e.clientX != null ) { 
		var html = document.documentElement
		var body = document.body
	
		e.pageX = e.clientX + (html && html.scrollLeft || body && body.scrollLeft || 0) - (html.clientLeft || 0)
		e.pageY = e.clientY + (html && html.scrollTop || body && body.scrollTop || 0) - (html.clientTop || 0)
	}

if (e.pageX < 510) {el.style.marginLeft = document.getElementById('counter').innerHTML = e.pageX - 10;
}
}
document.onmouseup = function () {document.onmousemove = null};
}
document.getElementById('area').onclick = function (event) {
document.getElementById('x').style.marginLeft = document.getElementById('counter').innerHTML = event.pageX - 10;
}
</script>


Чтобы сделать цену, просто записывай в поле текущий pageX. В коде есть запись pageX в DIV, что почти одно и то же.

Octane 21.06.2010 14:45

http://fastcoder.org/projects/?id=1

KonstantinK 21.06.2010 17:42

Octane,
exec,
Спасибо начинаю разбираться


Часовой пояс GMT +3, время: 07:32.