Нужно изменить направление JS (прокрутка текста)
Ребят, очень нужна помощь!
Добавляю в дополнительный блок портала javascript прокрутку изображений (Пример работы можно посмотреть здесь ). Проблема в том что прокрутка идет горизонтально, а мне обязательно нужно вертикально. Как в этом скрипте сменить направление? Надеюсь на вашу помощь! Скрипт: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script> <style type="text/css"> body { padding: 0px 0 0 0px; } div.sc_menu { /* Set it so we could calculate the offsetLeft */ position: relative; height: 220px; width: 500px; overflow: auto; } ul.sc_menu { display: block; height: 200px; /* max width here, for users without javascript */ width: 1500px; padding: 15px 0 0 15px; /* removing default styling */ margin: 0; background: url('navigation.png'); list-style: none; } .sc_menu li { display: block; float: left; padding: 0 4px; } .sc_menu a { display: block; text-decoration: none; } .sc_menu span { display: none; margin-top: 3px; text-align: center; font-size: 12px; color: #fff; } .sc_menu a:hover span { display: block; } .sc_menu img { border: 3px #fff solid; -webkit-border-radius: 3px; -moz-border-radius: 3px; } .sc_menu a:hover img { filter:alpha(opacity=50); opacity: 0.5; } /* Here are styles for the back button, don't look at them */ #back { display: block; width: 500px; text-align: center; color: #003469; font-size: 16px; } </style> <script type= "text/javascript">/*<![CDATA[*/ $(function(){ //Get our elements for faster access and set overlay width var div = $('div.sc_menu'), ul = $('ul.sc_menu'), ulPadding = 15; //Get menu width var divWidth = div.width(); //Remove scrollbars div.css({overflow: 'hidden'}); //Find last image container var lastLi = ul.find('li:last-child'); //When user move mouse over menu div.mousemove(function(e){ //As images are loaded ul width increases, //so we recalculate it each time var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding; var left = (e.pageX - div.offset().left) * (ulWidth-divWidth) / divWidth; div.scrollLeft(left); }); }); /*]]>*/</script> <div class="sc_menu"> <ul class="sc_menu"> <li><a href="http://www.test1.ru/index.php"> <img src="reliz/bs40.jpg" alt="Test"/><span>Test</span> </a></li> <li><a href="#"> <img src="reliz/bsms.jpg" alt="Navigation"/><span>Navigation</span> </a></li> <li><a href="#"> <img src="reliz/cdb.jpg" alt="Scrolling"/><span>Scrolling</span> </a></li> <li><a href="#"> <img src="reliz/down.gif" alt="jQuery"/><span>jQuery</span> </a></li> </ul> </div> Заранее огромное спасибо!:help: |
Попробуй в JS-коде поменять Width на Height и Left на Top, соответственно =) Разумеется CSS тоже нужно подправить.
|
MaxPayne, спасибо уже разобрался :)
|
Часовой пояс GMT +3, время: 14:27. |