Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 11.08.2010, 21:53
Аспирант
Отправить личное сообщение для morg4n Посмотреть профиль Найти все сообщения от morg4n
 
Регистрация: 02.08.2010
Сообщений: 46

scroll bar (wheel)
не робит следующий код =\
он даже innerHTML не пишет - совсем (
// указываем, что обработчиком колесика будет функция wheel
// для  Mozill`ы
if ($('content').addEventListener) {
	$('content').addEventListener('DOMMouseScroll', wheel, false);
}
//для всех остальных
$('content').onmousewheel = wheel;



function wheel(event) 
{
$('otladka').innerHTML = 'KOLECO MAT EGO';
var wDelta = 0; // значение на сколько покрутилось колесо
   // опять забота о кроссбраузерности
   if (event.wheelDelta)  {
        wDelta = event.wheelDelta/120;
    }   else if (event.detail)   {     
        wDelta = -event.detail/3;
    }
    // тут обрабатываем результат, например:
   alert(wDelta);
   // и заботимся о том, чтобы прокручивание колесика над элементом, не прокручивала скроллы страницы или еще что
    if (event.preventDefault)
    {
        event.preventDefault();
    }
    event.returnValue = false;
}


вот целиковый код . Еще один вопросик. как сделать так чтобы, когда начал тащить slider этот, то чтобы он тащился даже если мышка выше или ниже него..
----------
решено: onMouseMove="scrollDo(event);" в тег body
----------
<script>
var delta = 0;
function setWidth(what)
	{
	$('content').style.width = what * 98 + 'px';
	}
function setWidthSlider()
	{
	delta = parseFloat($('content').style.width) /  parseFloat($('wrapper').offsetWidth);
	$('slider').style.width = parseFloat($('wrapper').offsetWidth) / delta;
	alert(delta);
	}

var scroll = 0;
var posLeft = 0;
var posWidth = 0;
function scrollOff()
	{
	scroll = 0;
	posLeft =0;
	$('otladka').innerHTML = 'scroll = 0 now';
	}
function scrollOn(ev)
	{
	scroll = 1;
	ev = ev || window.event;
	posLeft = ev.clientX - parseFloat($('slider').offsetLeft);
	$('otladka').innerHTML = 'scroll = 1 now ..<br>clientX:'+ev.clientX +'<br>offsetLeft'+$('slider').offsetLeft+'<br> posLeft = ' + posLeft;
	}
function scrollDo(ev)
	{
	$('otladka').innerHTML = 'mouseMove 1';
	if(scroll == 1)
		{
		ev = ev || window.event;
		var moveLeftPx = ev.clientX  - posLeft - parseFloat($('container').offsetLeft) -2;
		if(moveLeftPx >=0 && moveLeftPx + $('slider').offsetWidth < $('container').offsetWidth-3)
			{
			$('slider').style.left = moveLeftPx + 'px';
			$('content').style.marginLeft = -moveLeftPx * delta + 'px';
			}
		$('otladka').innerHTML = 'clientX = '+ev.clientX + ' scroll = ' + scroll + '<br>posleft:' + posLeft;
		}
	}
//KOLECO

// указываем, что обработчиком колесика будет функция wheel
// для  Mozill`ы
if ($('content').addEventListener) {
	$('content').addEventListener('DOMMouseScroll', wheel, false);
}
//для всех остальных
$('content').onmousewheel = wheel;



function wheel(event) 
{
$('otladka').innerHTML = 'KOLECO MAT EGO';
var wDelta = 0; // значение на сколько покрутилось колесо
   // опять забота о кроссбраузерности
   if (event.wheelDelta)  {
        wDelta = event.wheelDelta/120;
    }   else if (event.detail)   {     
        wDelta = -event.detail/3;
    }
    // тут обрабатываем результат, например:
   alert(wDelta);
   // и заботимся о том, чтобы прокручивание колесика над элементом, не прокручивала скроллы страницы или еще что
    if (event.preventDefault)
    {
        event.preventDefault();
    }
    event.returnValue = false;
}





function $( el )
	{
	return  typeof el == 'string' ? document.getElementById(el) : el;
	}
</script>
<style>
body {margin:0px; padding:0px;}
#container
	{
	width:500px;
	height:8px;
	border:2px solid black;
	}
#slider
	{
	height:8px;
	background:red;
	-moz-user-select: none;
	-khtml-user-select: none;
	user-select: none;
	position:relative;
	}
#content {height:130px;}

#wrapper {width:504px;overflow:hidden;margin:50px; border:1px darkgrey solid;height:142px;}

.img {float:left;width:98px; height:130px;}
.ClearBoth {clear:both;}
</style>
<body onMouseUp="scrollOff();" onLoad="setWidthSlider();" onMouseMove="scrollDo(event);">
<div id="wrapper" >
	<div id="content">
		<div class="img"><img src="img/1.jpg"></div>
		<div class="img"><img src="img/2.jpg"></div>
		<div class="img"><img src="img/3.jpg"></div>
		<div class="img"><img src="img/4.jpg"></div>
		<div class="img"><img src="img/5.jpg"></div>
		<div class="img"><img src="img/6.jpg"></div>
		<div class="img"><img src="img/7.jpg"></div>
		<div class="img"><img src="img/8.jpg"></div>
		<div class="img"><img src="img/1.jpg"></div>
		<div class="img"><img src="img/2.jpg"></div>
		<div class="img"><img src="img/3.jpg"></div>
		<div class="img"><img src="img/4.jpg"></div>
		<div class="img"><img src="img/5.jpg"></div>
		<div class="img"><img src="img/6.jpg"></div>
		<div class="img"><img src="img/7.jpg"></div>
		<div class="img"><img src="img/8.jpg"></div>
	<script>setWidth(16);</script>
	</div>

	<div id="container">
		<div id="slider" onMouseDown="scrollOn(event);"  onMouseMove="scrollDo(event);"> </div>
	</div>

</div>
<div id="otladka"></div>
</body>

Последний раз редактировалось morg4n, 11.08.2010 в 22:03.
Ответить с цитированием
  #2 (permalink)  
Старый 13.08.2010, 01:22
Аспирант
Отправить личное сообщение для morg4n Посмотреть профиль Найти все сообщения от morg4n
 
Регистрация: 02.08.2010
Сообщений: 46

Решено: ввел функцию
makeWheelWork(what)
{
if (what.addEventListener) {
	   what.addEventListener('DOMMouseScroll', wheel, false);
	}
	//для всех остальных
	what.onmousewheel = wheel;

}

и вызов функции повесил на элемент
<div id=something onMouseOver='makeWheelWork(this);'></div>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как изменить положение scroll? PAMAC Общие вопросы Javascript 3 25.11.2010 18:22
Scroll Clock Kolyaj Оффтопик 1 20.11.2009 13:04
проблема с Scroll Pane kokosanka Библиотеки/Тулкиты/Фреймворки 0 25.09.2009 12:54
div с overflow-y: scroll; + большой контент + Opera/Firefox bug no. Общие вопросы Javascript 2 24.02.2009 11:20
Scroll Фрейма LamUser Общие вопросы Javascript 3 25.08.2008 09:26