15.04.2018 Смена дизайна. Обо всех «неровностях» сообщайте в тему вопросов и жалоб!
Обновились условия набора на роль пиарщиков!
» я знаю о твоих кошмарах

агония
[ заказать ]

Черный кот
[ заказать ]

хороший волшебник
[ заказать ]

White PR

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » White PR » Скрипты » Эффект выпадающего текста


Эффект выпадающего текста

Сообщений 1 страница 2 из 2

1

Сегодня мы рассмотрим очень красивый скрипт jQuerly-эффект выпадающего текста. ПРИМЕР
Чтобы совсем вас не запутать, покажу вам пример целой страницы:

Код:
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<style type="text/css">
#panel {
    background: #a1a1a1;
    color: #000000;
    height: 200px;
    width: 200px;
    padding: 15px;    
    display: none;
}
.btn-slide {
    background: #a1a1a1;
    color: #000000;
}
.active {
    background: #bbbbbb;
}
</style>
</head>

<body>


<script type="text/javascript">
$(document).ready(function(){
    $(".btn-slide").click(function(){
        $("#panel").slideToggle("slow");
        $(this).toggleClass("active"); return false;
    });
});
</script>

<a href="" class="btn-slide">CLICK ME!!!</a>



<div id="panel">
You can see this text:)<br>
Have luck and fun!<br>
nightillusion.ru
</div>

</body>
</html>


А теперь разложим все по полочкам.
Во-первых, надо подключить в раздел head библиотеку jQuerly. Копируем маленький код, данный ниже:

Код:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>

Но одной библиотеки недостаточно. Будем двигаться сверху вниз. Теперь нужно поставить стили, которые вы потом сможете сами отредактировать.

Код:
<style type="text/css">
#panel {
    background: #a1a1a1;
    color: #000000;
    height: 200px;
    width: 200px;
    padding: 15px;    
    display: none;
}
.btn-slide {
    background: #a1a1a1;
    color: #000000;
}
.active {
    background: #bbbbbb;
}
</style>

Теперь пойдем в раздел body. Вставляем туда такой скрипт:

Код:
<script type="text/javascript">
$(document).ready(function(){
    $(".btn-slide").click(function(){
        $("#panel").slideToggle("slow");
        $(this).toggleClass("active"); return false;
    });
});
</script>

Осталось немного. Теперь надо поставить сам текст, который будет разворачиваться, и ссылку, при нажатии которой будет разворачиваться текст.

Код:
<a href="" class="btn-slide">CLICK ME!!!</a>



<div id="panel">
You can see this text:)<br>
Have luck and fun!<br>
nightillusion.ru
</div>

nightillusion

0

2

by all написал(а):

ПРИМЕР

"Объект не найден"

0


Вы здесь » White PR » Скрипты » Эффект выпадающего текста