Элементы, разбросанные по экрану через плагин FancyDropper на jQuery
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<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> |
2#: Элементы, которые буду поворачиваться, прописываем следующим образом: 1) Для обычного статичного блока:
1 2 3 4 5 6 7 |
<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> |
1 2 3 4 5 6 7 8 |
<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"/> |