Приветствую Вас Прохожий | RSS Вторник, 21.11.2017, 18:47
Меню сайта
ВИДЕО УРОКИ СКРИПТЫ UCOZ ШАБЛОНЫ UCOZ ФОТОШОП UCOZ КАТАЛОГ СТАТЕЙ ВЕБМАСТЕРУ UCOZ ВИДЕО ФОТОШОПА ДОПОЛНЕНИЕ САЙТА РАЗДЕЛ СТУДИИ УСЛУГИ НАШЕГО САЙТА


Мини-чат
Все вопросы задаем в форуме,
здесь они игнорируются!



Статистика
Онлайн всего: 6
Гостей: 5
Пользователей: 1
мир



Главная » Файлы » Скрипты для uCoz » Скрипты Вид новостей

Интересный эффект увеличения изображения

Интересный эффект увеличения изображения


С самого начала документа подключаем фреймворк и функцию::

Код: 
<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.

Код: 
<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>

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

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

Исходники

Автор\Источник: не указан или не известен!

Для того что бы скачать архив необходимо зайти на сайт как пользователь.
Просмотров: 3017 | Комментарии: 1 | Рейтинг: 1.0/1 | |Категория: Скрипты Вид новостей | Добавил: mdbaner | Дата: 08.06.2009 | Скачали: 0
Похожие новости на нашем сайте
Коментарий к новости

Всего комментариев: 1
1 CaMPeR   Дата: 02.09.2010  Время: 12:54   [№ 4306]
a GDe nocTaBuTu??? sad sad sad sad sad pleasee . skype Denixxx16


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

Форма входа
Логин:
Пароль:


Поиск


На форуме

1 Изображение в CSS

1

2 Куплю сайты, с посетите...

0

3 Куплю игровой сайт с по...

2

4 Комплексный прогон сайт...

51

5 Файловый Менеджер - Выс...

2

6 Календарь

0

7 В каких интернет магази...

9

8 Куплю сайт торговой орг...

0

9 400 рублей на аккаунт =...

6

10 Предлагаю проверенный з...

5


Подробней о форуме


Комментарии



Copyright UcozOn.ru™ © 2008-2017


Кнопка 88х31 сайта ucozon.ru