Главная » Файлы » Прочие скрипты » jQuery

Красивое увеличение картинки с эффектом вращения при наведении курсора на jQuery
23.06.14, 13:48:31

Скачать файл




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

Для начала посмотрите ДЕМО



Установка:

После /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

Источник материала: http://u1.do.am

Материал подготовлен Apocalypse

Категория: jQuery | Добавил: Apocalypse | Теги: красивое, при, вращения, курсора, на, увеличение, JQuery, наведении, эффектом, картинки
Просмотров: 201 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: