не робит следующий код =\
он даже 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>
