Главная » Файлы » Прочие скрипты » jQuery
Эффект увеличения картинки с поворотом при наведении через плагин Twister на jQuery
23.06.14, 11:27:37

Скачать файл



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

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

Установка:

После /head на нужных страницах вставляйте:
Код
<style type="text/css">
.gallery {  
clear: both;  
margin-bottom: 2em;  
width: 100%;  
}  

.gallery .image {  
float: left;  
margin: 12px;  
}  
</style>

<script src="/js/jquery.transform.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/jquery.rotate.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/jquery.twister.js" type="text/javascript" charset="utf-8"></script>


Далее сразу же после предыдущего кода вставляйте:

1) Для эффекта в демо 1 (Поворот внутри картинки):
Код
<script type="text/javascript" charset="utf-8">
$(function(){  
$('#twister-example .image').twister();  
});  
</script>


2) Для эффекта в демо 2 (Поворот всей картинки)
Код
<script type="text/javascript" charset="utf-8">
$(function(){  
$('#twister-example .image').twister({  
overflown: true  
});  
});  
</script>


3) Для эффекта в демо 3 (Поворот на 360 градусов внутри картинки)
Код
<script type="text/javascript" charset="utf-8">
$(function(){  
$('#twister-example .image').twister({  
degrees: 360,  
scale: 1.5  
});  
});  
</script>


4) Для эффекта в демо 4 (Поворот всей картинки на 360 градусов)
Код
<script type="text/javascript" charset="utf-8">
$(function(){  
$('#twister-example .image').twister({  
degrees: 360,  
overflown: true,  
scale: 1  
});  
});  
</script>


Следующий код в то место, где будут сами картинки:
Код
<div class="gallery" id="twister-example">
<div class="image">
<a href="#"><img src="Ссылка на картинку 1" alt="Описание" /></a>
</div>

<div class="image">
<a href="#"><img src="Ссылка на картинку 2" alt="Описание" /></a>
</div>

<div class="image">
<a href="#"><img src="Ссылка на картинку 3" alt="Описание" /></a>
</div>  

<div class="image">
<a href="#"><img src="Ссылка на картинку 4" alt="Описание" /></a>
</div>
</div>
  <br clear="all">


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

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