|
Эффект выдвигающегося блока
|
|
| RazieL |
|  молчун Группа: Пользователи Пользователь №: 4011 Сообщений: 8
| Не знаю как реализовать, в общем необходим эффект выдвигающегося блока(такой же принцип, как и меню у вас на форуме)
Хотелось бы реализовать с помощью события (onclick или onmouseon), а не прописывания отдельно скрипта...
Код примерно такой:
Code <style> #infoblock. { width: 210px; float:left; position:absolute; left: 215px; display:none; } </style> <div><a href="javascript://" onclick="событие(скрипт) то что сокрыто за покровами тайны для меня)">Инфо</a> <div class="infoblock">Содержимое</div>
Первоначально блок скрыт, при нажатии(на ссылку Инфо) блок с информацией выдвигается вправо, при повторном нажатии(или по таймауту) скрывается обратно.
Стили показаны для примера...
Перерыл много здешней информации, но так и не смог пристроить...
Читал эту тему, но т.к. я не разбираюсь в JS, то никакие силы юпитера, ни волшебство не помогает.
Заранее благодарю)
Сообщение отредактировал RazieL - Суббота, 27.08.2011, 19:49 | | |
|
| dancelot |
|  говорун Группа: Проверенные Пользователь №: 26 Сообщений: 236 Получено оценок: 13
| RazieL, посмотри,может пригодится | | |
|
| RazieL |
| молчун Группа: Пользователи Пользователь №: 4011 Сообщений: 8
| dancelot, Спасибо 
Но тут он уж очень громоздкий, мне уже помогли с решением этой проблемы..
Code <script type="text/javascript"> function on(id){var obj=$('#'+id); if(obj.width()=='0'){obj.animate({width:"210px",opacity:'1'},1000)} else{obj.animate({width:"0px",opacity:'0'},1000);} }; </script> <a href="javascript://" onclick="on('id$ID$');return false;">Инфо</a> <div class="user_info" id="id$ID$">Содержимое</div>
Сообщение отредактировал RazieL - Понедельник, 29.08.2011, 21:38 | | |
|
| RazieL |
| молчун Группа: Пользователи Пользователь №: 4011 Сообщений: 8
| Не стал создавать новую тему, дабы не засорять форум понапрасну
-------------------
В общем такая проблема.
У меня на сайте установлены несколько хедеров, которые при перезагрузке страницы рандомно меняются (спасибо оператору <?rnd( )?> )
Так вот, я хочу сделать, чтобы можно было вручную выбирать хедеры, просто как просмотр(т.е. куки тут не обязательны). Уже сделал блок переключателей, осталось событие клик прописать для каждого линка или скрипт отдельно...
Вот код:
Code <div id="bg-switch" title="Пока не работают :)"> <div id="switcher-left"></div> <div id="switcher-content"> <a href="#" class="active">1</a> <a href="#">2</a> ... <a href="#">11</a> </div> <div id="switcher-right"></div> </div>
Принцип такой, чтобы при клике, этой ссылке задавался класс active, и при этом чтобы изменялся бэкграунд хедера (его айди header)
вот стиль хедера...
Code <style type="text/css">
#header {
background: url(/design/bg-top<? rnd 11 ?>.jpg) no-repeat scroll center top transparent;
}</style>
ЗЫ: если еще транситион (-moz-transition:All 1s ease;) можно будет влепить в это событие, чтобы бэкграунд плавно изменялся, то будет вообще перфектно..
----------------
Собственно, я чуть покопался и смог пока реализовать только назначение класса
Code <script type="text/javascript">
$(document).ready(function(){
$("#switcher-content a").click(function () {
var N = $(this).val();
$(this).toggleClass("active"),
$("#header").css({ "background-image":"url(/design/bg-top+N+.jpg)"})
});
});</script>
Но пока не получается извлечь текст из ссылки ( <a href="#">1</a> - должен извлечь текст 1 ) и вставить его в код скрипта .../design/bg-top+N+.jpg...
И еще 1 нюанс, сейчас у меня все ссылки получают класс active, если по ним кликнуть, а мне необходимо, чтобы только у одной ссылки был класс, у других, чтобы автоматом отключалось... как принцип у radio-button...
Заранее благодарю)
Сообщение отредактировал RazieL - Понедельник, 14.11.2011, 02:15 | | |
|
| RazieL |
| молчун Группа: Пользователи Пользователь №: 4011 Сообщений: 8
| Так мне кто-нибудь поможет?  | | |
|
| Maire |
| Группа: Пользователи Пользователь №: 67707 Сообщений: 10
| Всем спасибо очень полезно | | |
|
