Скрипты и шаблоны для uCoz - 3aKa4Ka
Каталог файлов | Иконки групп | Видео уроки | Статьи | PSD исходники | SEO софт/программы | SEO новости
логин:
пароль:

Регистрация Забыл пароль
Скрипты для uCoz Шаблоны для uCoz
Меню сайта
Новое на форуме ↓
Новые комментарии
Кто на сайте
Онлайн всего: 1
Гостей: 1
Пользователей: 0

Сайт сегодня посетили:

Очень эффектно выглядит! Плавное увеличение картинки нажатием мышью

Главная » Скрипты для uCoz » Очень эффектно выглядит! Плавное увеличение картинки нажатием мышью
Очень эффектно выглядит! Плавное увеличение картинки нажатием мышью для uCoz
Чтобы увидеть пример работы скрипта зайдите на сайт по ссылке, наведите мышью на рисунок и нажмите на него левой кнопкой.
Данный скрипт работает при помощи двух файлов, которые нужно загрузить в корень сайта (jquery.magnifier.js и magnify.cur).
1. Вставляете код, что ниже на странице, где должна быть картинка между <HEAD> и </HEAD>

Code
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.magnifier.js">
</script>

2. Следующий код необходимо вставить в то место, где будет располагаться Ваша картинка:

Code
<img src="ocean.gif" class="magnify" style="width:100px; height:56px" />

- загружаете картинку и указываете путь к ней (ocean.gif)
- width="100" height="56" - размер картинки в уменьшенном виде (увеличенная картинка должна настраиваться в файле jquery.magnifier.js).

3. Остается только загрузить готовые файлы jquery.magnifier.js и magnify.cur в корень сайта и скрипт работает!

Увеличение картинки, а также скорость настраивается в файле jquery.magnifier.js в коде:

Code
dsettings: {
magnifyby: 3, //default increase factor of enlarged image
duration: 500, //default duration of animation, in millisec
mgopacity: 0.2 //opacify of original image when enlarged image overlays it
},
cursorcss: 'url(magnify.cur), -moz-zoom-in', //Value for CSS's 'cursor' attribute, added to original image

- где 3 - во сколько раз увеличивается картинка от заданного (в нашем примере это 100х56)
- 500 - продолжительность анимации (скорость появления)

Просмотров: 1641 | Комментариев: 5 | Опубликовал: zyxer | Дата: 16.07.2010

 03.12.2009   

 

 Черный мини чат 

 22.12.2010   

 

 Быстрая регистрация... 

 21.01.2011   

 

 Черные, прозрачные ... 

 07.02.2010   

 

 Фон на иконки на фо... 

 08.11.2009   

 

 Иконка поста - u.po... 


Всего комментариев: 5
 
  0 4 The_FactioN 19.10.2010 15:44:11 а где мне скачать jquery файлик? Цитировать | Редактировать | Удалить
 

 
  0 5 DizeL 21.10.2010 14:02:30 Рипни с сайта, на котором пример Цитировать | Редактировать | Удалить
 

 
  0 3 Speret 23.07.2010 17:39:55 DizeL спасибо, попробую себе поставить Цитировать | Редактировать | Удалить
 

 
+1 1 Speret 21.07.2010 21:19:51 Так это просто для одной картинки? Цитировать | Редактировать | Удалить
 

 
+1 2 DizeL 22.07.2010 12:32:49 Этот скрипт стоит у меня тут
1 баг скрипта: иногда картинку увеличивает намного больше ее размеров
Цитировать | Редактировать | Удалить
 

3aKa4Ka.at.ua - портал веб мастеров

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
© 3aka4ka.at.ua 2008 - 2024г. Все материалы размещенные на сайте принадлежат их владельцам и предоставляются исключительно в ознакомительных целях. Администрация ответственности за содержание материала не несет и убытки не возмещает.