Суббота, 26.07.2025, 18:45
Меню сайта
    Форма входа
    Категории раздела
    скрипты для 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 » Июнь » 8 » Интересный эффект увеличения изображения
    22:47
    Интересный эффект увеличения изображения
    С самого начала документа подключаем фреймворк и функцию::

    Code
    <script src="jquery.tools.min.js"></script>
      <script>
      /*
      perform JavaScript after document is scriptable, see:
      http://docs.jquery.com/How_jQuery_Works#Launching_Code_on_Document_Ready
      */
      $(function() {
       
      // setup exposing
      $("#ball").expose({
      // a custom mask ID
      maskId:'mask',
      // grow the ball when exposing starts
      onBeforeLoad: function() {
      this.getExposed().animate({width: 298});

      },
      // shrink the ball when exposing closes
      onBeforeClose: function() {
      this.getExposed().animate({width: 130});
      }
       
      // perform exposing when image is clicked
      }).click(function() {
      $(this).expose().load();
      });
    });
      </script>

    Далее подключаем стили оформления. Буквально пару строк и все готово. К эффекту увеличения имеет отношение только класс #mask.

    Code
    <style>
      body {
      padding:150px 50px;
      font-family:"Lucida Grande","Lucida Sans Unicode","bitstream vera sans","trebuchet ms",verdana;
      }
    #mask {
      background:#072a88 url(mask_star_1600px.jpg) no-repeat scroll 50% -274px;
      }
      </style>

    И в документе вставляем изображение:

    Code
    <div style="margin:0 auto;width:300px">
      <img src="ball_large.png" id="ball" style="width:130px" />
    </div>

    Исходники

    пример

    Источник: www.ruseller.com

    P.S если было не обесутте smile

    Категория: скрипты для ucoz сайта | Просмотров: 724 | Добавил: B-look | Рейтинг: 0.0/0
    Всего комментариев: 3
    2 liubomir1  
    3
    Скрин


    3 raider023  
    0
    + те в репу за скрин

    1 stars  
    0
    Круто +1

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