скроллер для картинок(мой пример)
не использующий колесико, без всяких скроллбаров
может кому пригодится, все вроде более менее просто и тупо
<?php
$w=90; //ширина элементов для скроллинга (у меня картинки)
$h=90; //высота элементов для скроллинга (у меня картинки)
$q=5; //видимое количество элементов в скроллере
$qq=8; // общее количество элементов
$scroller_width=$w*$q; // ширина скроллера
?>
-----------------------------------------------------------------------
// html код скроллера
-----------------------------------------------------------------------
<div id="scroller_container"
//при наведении курсора определяем координату Х скроллера +
//передаем необходимые параметры для вычислений
//запускаем скроллер
onmouseover="find_out_coordinates('scroller_contai ner',<?=$w?>,<?=$scroller_width?>,<?=$qq?>),start_ scrolling()"
// определяем направление и скорость скроллинга
onmousemove="scroller_cursor_position(event)"
// при потере фокуса мышью останавливаем скроллинг
onmouseout="stop_scrolling()"
// фоном должна быть 100% прозрачная png иначе в IE не работает
style="position:absolute;z-index:101;left:200px;width:<?=$scroller_width?>px; height:<?=$h?>px;border:1px solid #000;overflow:hidden;background-image : url(../images/back.png); background-repeat : repeat;"></div>
<div style="position:absolute;z-index:100;left:200px;width:<?=$scroller_width?>px; height:<?=$h?>px;overflow:hidden;">
// сами элементы для скроллинга
<div style="width:<?=$w*$qq;?>;" id="scroller">
<img src="1.jpg" >
<img src="2.jpg" >
<img src="3.jpg" >
<img src="4.jpg" >
<img src="5.jpg" >
<img src="6.jpg" >
<img src="7.jpg" >
<img src="8.jpg" >
</div>
</div>
-------------------------------------------------------------------
// java скрипты
-------------------------------------------------------------------
// определяем координаты скроллера
// получаем необходимые параметры
function find_out_coordinates(elemId,ew,sw,eq)
{var elem = document.getElementById(elemId);
l = 0;
while (elem)
{
l += elem.offsetLeft;
elem = elem.offsetParent;
}
scroller_left=l;
elem_width=ew
scroller_width=sw
elem_quantity=eq
// определяем центр скроллера который есть отсчет скорости скроллинга
scroller_center =scroller_width/2
// определяем конец элементов скроллинга
very_end=(elem_width*elem_quantity)-scroller_width;
}
--------------------------------------------
// вычисляем направление и скорость скроллинга
function scroller_cursor_position(event){
xpos=event.clientX
xpos=xpos-scroller_left
xpos=xpos-scroller_center;
xpos=xpos*-1;
// далее определяем скорость
acceleration=xpos/100; // заменив 100 на другое число можно
// регулировать скорость
}
------------------------------------
function start_scrolling(){
ww=window.setInterval('scrolling()',10);
}
function stop_scrolling(){
window.clearInterval(ww);
}
function scrolling(){
// проверяем достигнут ли конец или начало в зависимости от направления, если нет то крутим
if(((y*-1<=very_end) && acceleration<0) || ((y<3) && acceleration>0)) {
// далее намудрил с приростом
yy=yy+acceleration
y=yy*2
document.getElementById("scroller").style.marginLe ft=+y;
}
}
ну вот у меня работало и в Opera и в Mozilla и в IE7 (с прозрачной картинкой фона)
может не особо рационально зато сам и более менее понятно начинающим как я сам
другие же лишний раз удостоверятся что они не так уж и плохи в этом
если кому то поможет буду рад
буду рад замечаниям и исправлениям