Пятница, 17.05.2024, 11:04
Меню сайта
    Форма входа
    Категории раздела
    скрипты для ucoz сайта [3099]
    шаблоны для ucoz скачать [2660]
    Иконки групп для форума [25]
    Графика для сайта [1953]
    шаблоны psd для фотошопа [27]
    кисти для фотошопа [39]
    уроки фотошопа на русском языке [4]
    стили для фотошопа [3]
    шрифты для фотошопа cs4 [12]
    Web-master [3058]
    Поиск
    Календарь
    Архив записей
    Наш опрос
    Умеете ли вы писать скрипты для ucoz?
    Всего ответов: 73
    Мини-чат
    200
    Друзья сайта
  • Официальный блог
  • Сообщество uCoz
  • FAQ по системе
  • Инструкции для uCoz
  • Статистика

    Онлайн всего: 1
    Гостей: 1
    Пользователей: 0
    Главная » 2009 » Апрель » 7 » Красивый переход из блока к блоку
    10:11
    Красивый переход из блока к блоку
    Итак. Сейчас я покажу и расскажу как сделать красивый переход от блока к блоку и назад. Это отлично подходит по например "Мини-профиль" и скажем так Любой информер. Такую вичу я недавно замутил и на forucoz.com, перевидите взгляд вправо и посмотрите в своем мини-профиле. Такое реализовать на простом js можно, но код скрипта будет километровый. Поэтому здесь идеально подходит библиотека JQuery. Для начала нужно ее подключить. Как это сделать? Заходим на официальный сайт этой библиотеки и качаем скрипт. Если по каким-то причинам вы это сделать не можете/не хотите, то просто поставьте этот код к себе на сайт, желательно в head
    Code
    <script src="http://forucoz.com/jquery.js" language="javascript"></script>

    JQuery подключен! 50% дела сделано. Теперь ставим этот код, желательно повыше (рядом с предыдущим)
    Code
    <script type="text/javascript">
    $(document).ready(function(){$("#doskapocheta").click(function(){$("div#doskapoch").show("slow"); $("div#userminiprof").hide("slow");});});// by forucoz.com
    $(document).ready(function(){$("#backprofil").click(function(){$("div#userminiprof").show("slow"); $("div#doskapoch").hide("slow");});});
    </script>

    75% дела сделано! Теперь включаем фантазию и делаем свои скрипты или что вам взбредет на ум.
    Вот основа.
    Code
    <div id="userminiprof">
    <!-- Содержимое первого блока -->
    <br>

    тут пишем содержимое первого блока, например мини-профиль. Он будет на странице по умолчинию.

    <center>[ <a href="javascript://" id="doskapocheta">Блок 2</a> ]</center>
    <!-- //Конец содержимого первого блока -->
    </div>
    <div id="doskapoch" style="display:none;">
    <!-- Содержимое второго блока -->
    <br>

    А тут ставим любой другой код. Например мини-игры или информера. Включаем фантазию ;-)

    <center>[ <a href="javascript://" id="backprofil">Назад в блок 1</a> ]</center>
    <!-- //Конец содержимого второго блока -->
    </div>

    Я пометил где содержимое какого блока. Разобраться легко или даже легче ;-) Таким образом вы можете написать кучу скриптов и реализовать кучу своих идей. Ограничиваемся только своей фантазией. И конечно без дополнительного примера тут не обойтись ;-)


    Автор: Copyright © ForuCoz.com

    Категория: скрипты для ucoz сайта | Просмотров: 1353 | Добавил: Bogdan4eg | Рейтинг: 5.0/2
    Всего комментариев: 191 2 »
    19 Web-Master_Bolt  
    0
    супер!

    18 NoName74  
    -1
    что за... ?! нажимаю мол ПЕРЕЙТИ ВО ВТОРОЙ БЛОК, клац, и все внутренность шлобального блока исчезают =\ даже нельзя в ПЕРВЫЙ БЛОК вернуться =(((

    17 NoName74  
    0
    суперски

    16 Reysler  
    0
    Volk, между тегами <head> и </head> biggrin

    15 Volk  
    -1
    в head всмысле?

    14 Zinich  
    4
    А можно делать не 2 а 3 или 4 блока с этой библиотекой) я то я что растерялся... сам не могу сделать)

    13 bpion  
    -1
    СПС сделано хорошо я такой переход сделал между блоками статистики,и у меня возникла проблема у меня не добавляться материал,что делать,срипт убираю добавляется

    12 Lobster  
    0
    круто спс biggrin

    11 TjoMa  
    0
    прикольная темка,!)

    10 Reysler  
    0
    Bogdan4eg, ты себе этот скрипт поставил в мини-профиль, как я заметил, кульно получилось, спс! biggrin

    1-10 11-18
    Добавлять комментарии могут только зарегистрированные пользователи.
    [ Регистрация | Вход ]