Главная » Файлы » Прочие скрипты » jQuery
Элементы, расположенные под произвольным углом через плагин FancyDropper на jQuery 1.4.3 для uCoz
23.06.14, 14:19:39

Скачать файл



Данный плагин позволяет выбранным элементам размещаться под произвольным углом. При наведении элементы также меняют угол поворота

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

Установка:

После /head на нужных страницах вставляйте:
Код
<script type="text/javascript" src="/js/jquery-1.4.3.min.js"></script>  
  <script type="text/javascript" src="/js/jquery.rotate.js"></script>  
  <script type="text/javascript" src="/js/jquery.fancydropper.js"></script>  
  <script type="text/javascript">  
  $(document).ready(function (){  
  $(document).ready(function(){  
  $('#test').fancydropper({fullscreen: false});  
  $('#reshuffle').click(function(){  
  $('#test1').fancydropper();  
  $('#reshuffle').attr({value: 'Перемешать'})  
  });  
  });  
  });  
  </script>


Элементы, которые буду поворачиваться, прописываем следующим образом:

1) Для обычного статичного блока:
Код
<div id="test" style="top: 100px; left: 200px; border: 2px #f00 solid; width: 600px; height:400px; position: absolute">  
  <h1>Простой блок</h1>  
  <a href="#" >Контент 1</a>  
  <a href="#" >Контент 2</a>  
  <a href="#" >Контент 3</a>  
  <a href="#" >Контент 4</a>  
  </div>


2) Для полноэкранного режима:
Код
<div id="test1" style="top: 100px; left: 900px; border: 2px #f00 solid; width: 600px; height:400px; position: absolute">  
  <h1>Полноэкранная анимация</h1>  
  <a href="#" >Контент 1</a>  
  <a href="#" >Контент 2</a>  
  <a href="#" >Контент 3</a>  
  <a href="#" >Контент 4</a>  
  </div>  
  <input type="button" value="Запустить полноэкранно" id="reshuffle"/>


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

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