Модераторы: Sardar, Aliance
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Эффектное появление содержимого div-a 
:(
    Опции темы
Sunvas
Дата 19.9.2007, 17:46 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Соль и сахар
****


Профиль
Группа: Участник
Сообщений: 3388
Регистрация: 12.3.2006
Где: Тосно

Репутация: нет
Всего: 89
На странице есть div со скрытым содержимым:

Код

<div id="allids" style="display: none;">контенты</div>


В опреденный момент содержимое дива показывается при помощи скажем 
Код

style.display = "block";


Однако это просто, скушно и неинтересно. Подскажите, пожалуйста, как можно показ содержимого div-a наполнить каким-то интересным эффектом. Чтобы было красиво.



--------------------
Воспитывая детей по своему образу и подобию, родители почему-то надеются, что они будут лучше их.
PM MAIL   Вверх
Ghirik
Дата 19.9.2007, 19:18 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 919
Регистрация: 26.3.2007

Репутация: 13
Всего: 20
Вот, как раз используются дивы.


--------------------
Отдадим всё клиенту, пускай его машина мучается...
PM MAIL   Вверх
Sunvas
Дата 19.9.2007, 20:20 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Соль и сахар
****


Профиль
Группа: Участник
Сообщений: 3388
Регистрация: 12.3.2006
Где: Тосно

Репутация: нет
Всего: 89
А так, что б появление дива, когда до этого его видно не было?
Код

display: none



--------------------
Воспитывая детей по своему образу и подобию, родители почему-то надеются, что они будут лучше их.
PM MAIL   Вверх
Ghirik
Дата 19.9.2007, 20:31 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 919
Регистрация: 26.3.2007

Репутация: 13
Всего: 20
Вот есть варианты
Если к приведенному мной в этой ссылке примеру открытия таблицы прикрутить плавное появление изображения, будет очень даже эффектно.

Это сообщение отредактировал(а) Ghirik - 19.9.2007, 20:31


--------------------
Отдадим всё клиенту, пускай его машина мучается...
PM MAIL   Вверх
Sunvas
Дата 19.9.2007, 20:45 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Соль и сахар
****


Профиль
Группа: Участник
Сообщений: 3388
Регистрация: 12.3.2006
Где: Тосно

Репутация: нет
Всего: 89
В том-то и дело, что JS я боюсь. Поэтому и задал тему, чтобы найти готовую реализацию.


Ghirik, интересный пример. А можно сделать, чтобы форма появлялась плавно, но вместе с содержимым?


--------------------
Воспитывая детей по своему образу и подобию, родители почему-то надеются, что они будут лучше их.
PM MAIL   Вверх
Ghirik
Дата 19.9.2007, 22:01 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 919
Регистрация: 26.3.2007

Репутация: 13
Всего: 20
Можно сделать всё... smile или почти всё...
Дайте свою страничку, и скажите что нужно плавно выдвигать, попробую сделать.


--------------------
Отдадим всё клиенту, пускай его машина мучается...
PM MAIL   Вверх
Sunvas
Дата 20.9.2007, 10:05 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Соль и сахар
****


Профиль
Группа: Участник
Сообщений: 3388
Регистрация: 12.3.2006
Где: Тосно

Репутация: нет
Всего: 89
В ПМ.


--------------------
Воспитывая детей по своему образу и подобию, родители почему-то надеются, что они будут лучше их.
PM MAIL   Вверх
Ghirik
Дата 20.9.2007, 10:49 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 919
Регистрация: 26.3.2007

Репутация: 13
Всего: 20
Не понял сразу кто такой ПМ. smile 

Счас посмотрю.

Это сообщение отредактировал(а) Ghirik - 20.9.2007, 10:56


--------------------
Отдадим всё клиенту, пускай его машина мучается...
PM MAIL   Вверх
Ghirik
Дата 20.9.2007, 11:40 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 919
Регистрация: 26.3.2007

Репутация: 13
Всего: 20
Сейчас, вынужден уйти от компа, в лучшем случае освобожусь вечером, тогда и займусь.

P.S. Прикольный сайтик. smile 


--------------------
Отдадим всё клиенту, пускай его машина мучается...
PM MAIL   Вверх
Ghirik
Дата 20.9.2007, 23:24 (ссылка) | (голосов:1) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 919
Регистрация: 26.3.2007

Репутация: 13
Всего: 20
Не стал я встраивать скрипт в вашу страничку. Во первых, времени нет, во вторых универсальная функция может пригодится ещё кому нибудь.
Вот так оно выглядит
и
Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Language" content="en-us">
<script language="javascript">
<!--
$=function(id){return document.getElementById(id)}
function load(){ // предварительные настройки стилей
        var os=$('layer1').style
        os.top=$('layer2').offsetTop+'pt'
        os.left=$('layer2').offsetLeft+'pt'
        os.width=$('t1').offsetWidth+'pt'
        os.zIndex=1
    if    ($('t1').filters){
    $('t1').style.filter='alpha(opacity=0)'}
    else{$('t1').opacity=0}
    $('t1').style.height=0+'pt'
}
function flu_op(r){
    var i=100 // максимальный размер раскрытия (pt)
    var t=10 // продолжительность эффекта
    if    (r.style.height==0+('pt')){
    for    (c=0;c<=i;c++){
        setTimeout(function (r,c){return function(){r.style.height=c+'pt'}}(r,c),t*c)}}
    else{
    for (c=i;c>=0;c--){
        setTimeout(function (r,c){return function(){r.style.height=c+'pt'}}(r,c),t*(i-c))}}
}
//-->
</script>
</head>
<body style="margin: 0; padding: 0" onload=load()>
&nbsp;<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type=button value="Открыть" id=b1 onclick="flu_op($('t1'))"> </p>
<div id=layer2 style="position: absolute; z-index: 2; left:27px; top:101px; width:197px">
<table>
    <tr id=t1 height=0>
        <td>
        </td>
    </tr>
</table>
<p lang="ru"  style="background-color:#FFFFFF">
Здесь текст, чтобы видно было как раскрывается ячейка.<br>
Здесь ещё....<br>
И ещё.....<br>
<br>
</p>
</div>
<div id=layer1 style="position: absolute; z-index: 1">
<table>
    <tr>
        <td colspan="2" align="center"><b>Боты</b></td>
    </tr>
    <tr>
        <td title="3 мин. 45 сек.">Google Bot</td>
        <td align="right">Files</td>
    </tr>
    <tr>
        <td title="10 мин. 8 сек.">Yahoo Bot</td>
        <td align="right">Mainpage</td>
    </tr>
</table>
</div>
</body>
</html> 


Сама функция - проще некуда, большая часть кода - настройка начальных установок.


--------------------
Отдадим всё клиенту, пускай его машина мучается...
PM MAIL   Вверх
Sunvas
Дата 21.9.2007, 10:47 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Соль и сахар
****


Профиль
Группа: Участник
Сообщений: 3388
Регистрация: 12.3.2006
Где: Тосно

Репутация: нет
Всего: 89
Прикольно.. Но есть один недочет: действия произвояться не над блоком "Кто онлайн", а над текстом, который его скрывает за собой.
Это порождает две проблемы:
1. Проблематично выделять текст.
2. Невозможно корректно вставить в страницу.

Добавлено через 1 минуту и 5 секунд
Да, и попробуйте очень часто понажимать на кнопку "Открыть". Глюки весьма свирепые.


--------------------
Воспитывая детей по своему образу и подобию, родители почему-то надеются, что они будут лучше их.
PM MAIL   Вверх
Ghirik
Дата 5.2.2008, 14:09 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 919
Регистрация: 26.3.2007

Репутация: 13
Всего: 20
Исправил маленько код, вот:

Код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
//<![CDATA[
var i = 100; // максимальный размер раскрытия (pt)
var t = 10;  // продолжительность эффекта
$=function(id){return document.getElementById(id)};
function load() { // предварительные настройки.
    var os = $('layer1').style;
    os.top = $('layer2').offsetTop + 'pt';
    os.left = $('layer2').offsetLeft + 'pt';
    os.width = $('t1').offsetWidth + 'pt';
    os.zIndex = 1;
    $('t1').style.height = 0 + 'pt';
    $('b1').onclick = flu_op;
}
function flu_op() {
    var r = $('t1');
    if ((r.style.height != 0 + 'pt')&&(r.style.height != 100 + 'pt')) return;
    $('b1').value == 'Открыть' ? $('b1').value = 'Закрыть' : $('b1').value = 'Открыть';
    if (r.style.height == 0 + 'pt') {
        for    (var c = 0; c <= i; c++) {
            setTimeout(function (r, c) {return function() {r.style.height = c + 'pt'}}(r, c), t * c);
        }
    }
    else {
        for (var c = i; c >= 0; c--) {
            setTimeout(function (r, c) {return function() {r.style.height = c + 'pt'}}(r, c), t * (i - c));
        }
    }
}
//]]>
</script>
</head>
<body style="margin: 0; padding: 0" onload="load()">
&nbsp;<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input id="b1" type="button" value="Открыть" /></p>
<div id="layer2" style="position: absolute; z-index: 2; left:27px; top:101px; width:197px">
<table>
    <tr id="t1">
        <td>
        </td>
    </tr>
</table>
<p lang="ru"  style="background-color:#FFFFFF">
Здесь текст, чтобы видно было как раскрывается ячейка.<br />
Здесь ещё....<br />
И ещё.....<br />
<br />
</p>
</div>
<div id="layer1" style="position: absolute; z-index: 1">
<table>
    <tr>
        <td colspan="2" align="center"><b>Боты</b></td>
    </tr>
    <tr>
        <td title="3 мин. 45 сек.">Google Bot</td>
        <td align="right">Files</td>
    </tr>
    <tr>
        <td title="10 мин. 8 сек.">Yahoo Bot</td>
        <td align="right">Mainpage</td>
    </tr>
</table>
</div>
</body>
</html>



Это сообщение отредактировал(а) Ghirik - 6.2.2008, 11:20


--------------------
Отдадим всё клиенту, пускай его машина мучается...
PM MAIL   Вверх
Dr.Zlo
Дата 5.2.2008, 19:44 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 49
Регистрация: 12.11.2007

Репутация: 1
Всего: 2
Sunvas, я бы посоветовал посмотреть эффекты jquery, возможно тебе что-нибудь понравится:
http://docs.jquery.com/Effects
PM MAIL   Вверх
KoLiZeI
Дата 1.8.2008, 11:04 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 88
Регистрация: 6.4.2007
Где: г. Саратов

Репутация: нет
Всего: нет
Подскажите плиз как сделать вот такое меню, только чтобы кнопки вместе с контентом не уезжали и контент аяксом загружался, как например на mail.ru сделано на главной раздел товары, фото и клипы. тут
Или дайте ссылку на подобные скрипты пожалуйста!  smile 
PM MAIL WWW ICQ Skype   Вверх
  
 Ответ в темуСоздание новой темы Создание опроса
Форум для вопросов, которые имеются в справочниках, но их поиск вызвал затруднения, или для разработчика требуется совет или просьба отыскать ошибку. Напоминаем: 1) чётко формулируйте вопрос, 2) приведите пример того, что уже сделано, 3) укажите явно, нужен работающий пример или подсказка о том, где найти информацию.
 
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: Общие вопросы | Следующая тема »

Подписаться на тему | Подписка на этот форум | Скачать/Распечатать тему


 




[ Время генерации скрипта: 0.1015 ]   [ Использовано запросов: 22 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
 По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.