скроллер для картинок(посмотрите люди)
написал своими силами скроллера для прокрутки изображений
не использующий колесико, может кому пригодится, все вроде более менее просто и тупо :) <?php $w=90; //ширина элементов для скроллинга (у меня картинки) $h=90; //высота элементов для скроллинга (у меня картинки) $q=5; //видимое количество элементов в скроллере $qq=8; // общее количество элементов $scroller_width=$w*$q; // ширина скроллера ?> ----------------------------------------------------------------------- // html код скроллера ----------------------------------------------------------------------- при наведении курсора определяем координату Х скроллера + передаем необходимые параметры для вычислений запускаем скроллер определяем направление и скорость скроллинга при потере фокуса мышью останавливаем скроллинг фоном должна быть 100% прозрачная png иначе в IE не работает <div id="scroller_container" onmouseover="find_out_coordinates('scroller_container',<?=$w?>,<?=$scroller_width?>,<?=$qq?>),start_scrollin()" onmousemove="scroller_cursor_position(event)" onmouseout="stop_scrolling()" 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.marginLeft=+y; } } ну вот у меня работало и в Opera и в Mozilla и в IE7 (с прозрачной картинкой фона) может не особо рационально зато сам и более менее понятно начинающим как я сам другие же лишний раз удостоверятся что они не так уж и плохи в этом :) если кому то поможет буду рад буду рад замечаниям и исправлениям :) |
Часовой пояс GMT +3, время: 09:36. |