Launcher
logo  
RSS news bestarchive

Выберите раздел


» »

Красивое увеличение картинки с эффектом вращения при наведении курсора на jQuery
14.12.2011, 23:26





Интересный, качественно реализованный эффект увеличения картинки при наведении курсора мышки.

Для начала посмотрите bestarchive

 



 

Установка:

После /head на нужных страницах вставляйте:

<script src="/js/init.js" type="text/javascript"></script>  
<script src="/js/raphael.js" type="text/javascript">
</script>  
<style>ul.reset,  
ul.reset li {  
display
:block;
  
list-style
:none;
  
padding
:0;
  
margin
:0;
  
}  
.gallery ul li {  
width
:200px;
/* a half of image width */  
height
:200px;
/* a half of image height */  
margin
:0 10px 10px 0;
  
float
:left;
  
position
:relative;
  
}  
.holder {  
position
:absolute;
  
top
:0;
  
left
:0;
  
margin
:-100px 0 0 -100px;
/* margin-left: a half of 'li' width and margin-top: a half of 'li' height */ ; 
}  
</style>

Следующий код в то место, где будет сама картинка:

<div class="gallery">  
<ul class="reset">  
<li><img src="Ссылка на картинку" border="0" /></li>  
</ul>  
</div>

 



При желании и знании css вы легко сможете отредактировать все параметры скрипта под себя

Осталось лишь залить два скрипта из прикреплённого архива в папку js


архив со скриптами тут:    




 
+4








Похожие материалы:





| Категория: | Добавил: Dzheykey | Теги: JQuery, при наведении курсора, увеличение картинки, скрипты, с эффектом вращения
Просмотров: 3484 | Загрузок: | Рейтинг: 5.0/4


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

Язык/Lang


Архив записей

Все

Юзеры

Гости

Онлайн всего: 1
Гостей: 1
Пользователей: 0

Контакты/Contact

Связь с администратором

Друзья сайта

I Love Pink Floyd

Топ пользователей

Именинники


На bestarchive