 Анимированое меню, меню на JQuery |
 |
 |
Здравствуйте, гость ( Вход | Регистрация )
  |
 16.07.2010 - 09:34
Вставить ник | Быстрая цитата | Сообщение
#1
|
|
Новичок Группа: Участник Сообщений: 2 Регистрация: 16.07.2010 Пользователь №: 30947  |
Доброго всем времени суток .Помогите кто может немогу понять в чем проблема скрипт вроде правильный но так как я хочу не работает.
HTML и JQ. <html> <head> <title>Меню</title> <style type="text/css"> * {margin: 0px; padding: 0px;} IMG {border: 0;} #hor_buttons { float:left; height:117px; } #hor_buttons ul {list-style:none;float:left;} #hor_buttons li {margin:0;padding:0;text-align:center;} #hor_buttons li a { display:block; padding:0px; cursor:pointer; color:#FFF; text-decoration:none; border-right:1px solid #bdc0c6; } #hor_buttons #gallery a {background:url('img/bg_gallery.png');} #hor_buttons #process a {background:url('img/bg_gallery.png');} #hor_buttons #about a {background:url('img/bg_gallery.png');} #hor_buttons #resume a {background:url('img/bg_gallery.png');} #hor_buttons #blog a {background:url('img/bg_gallery.png');} </style> <script type="text/javascript" src="jquery-1.3.2.min.js"></script> <script type="text/javascript" src="bg.js"></script> <script type="text/javascript" > $(function(){ $('#hor_buttons a') .css( {backgroundPosition: "0 0"} ) .mouseover(function(){ $(this).stop().animate({backgroundPosition:"(0 -117px)"}, {duration:500}) }) .mouseout(function(){ $(this).stop().animate({backgroundPosition:"(0 0)"}, {duration:500 }) }) }); </script> </head> <body> <div id="hor_buttons"> <ul id="gallery"> <li> <a href="#"><img src="img/but_gallery.png" width="117" height="117"></a> </li> </ul> <ul id="process"> <li> <a href="#"><img src="img/but_gallery.png" width="117" height="117"></a> </li> </ul> <ul id="about"> <li> <a href="#"><img src="img/but_gallery.png" width="117" height="117"></a> </li> </ul> <ul id="resume"> <li> <a href="#"><img src="img/but_gallery.png" width="117" height="117"></a> </li> </ul> <ul id="blog"> <li> <a href="#"><img src="img/but_gallery.png" width="117" height="117"></a> </li> </ul> </div> </body> </html> ]]>http://shublog.ru/examples/asunaro2/2009.11.27.html]]> так как я хочу То что я сделал Сообщение отредактировано rdbn - 16.07.2010 - 09:42
Прикрепленные файлы
|
 |
 
|
|
22.07.2010 - 16:12
Вставить ник | Быстрая цитата | Сообщение
#2
|
|
 Bill rulz ^^  Группа: Участник Сообщений: 1418 Регистрация: 28.09.2003 Пользователь №: 24 |
вы видимо разобрались сами, по линку все работает... Кстати вместо двигания бакграунда можно анимировать фон линка с помощью плагина ]]>http://plugins.jquery.com/project/color]]>
он весит почти так же как 5 картинок, зато более гибок да и загрузится на мгновение быстрее. Сообщение отредактировано SHADE - 22.07.2010 - 16:19 |
|
|
|
|
22.07.2010 - 17:08
Вставить ник | Быстрая цитата | Сообщение
#3
|
|
|
Новичок Группа: Участник Сообщений: 2 Регистрация: 16.07.2010 Пользователь №: 30947 |
Спасибо за совет … просто я решил сделать по другому .
|
|
|
|
|
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0
|
Текстовая версия | Сейчас: 25.04.2024 - 20:56 |