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

3D вращение блока с текстом на jQuery
23.06.14, 09:07:42

Скачать файл




Довольно-таки интересный плагин, который вращает блок с любым вашим текстом в 3D (Влево, вправо, вверх или вниз) при нажатии на соответствующую кнопку

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

Установка:

После /head на нужных страницах вставляйте:
Код
<link rel="stylesheet" type="text/css" href="/css/flip.css"/>
  <script src="/js/jquery-ui-1.7.2.custom.min.js"></script>
<script src="/js/jquery.flip.min.js"></script>
<script type="text/javascript">
$(function(){  

$("#flipPad a:not(.revert)").bind("click",function(){  
var $this = $(this);  
$("#flipbox").flip({  
direction: $this.attr("rel"),  
color: $this.attr("rev"),  
content: $this.attr("title"),//(new Date()).getTime(),  
onBefore: function(){$(".revert").show()}  
})  
return false;  
});  

$(".revert").bind("click",function(){  
$("#flipbox").revertFlip();  
return false;  
});  

var changeMailTo = function(){  
var mArr = ["@","smashup","luca",".it"];  
$("#email").attr("href","mailto:"+mArr[2]+mArr[0]+mArr[1]+mArr[3]);  
}  

$(".downloadBtn").click(function(){  
pageTracker._trackPageview('download_flip');  
});

setTimeout(changeMailTo,500);  

});  
</script>


Далее в то место, где будет сам блок:
Код
<div id="flipbox">Hello! I'm a flip-box! :)</div>
<div id="flipPad">
<a href="" class="left" rel="rl" rev="#39AB3E" title="Здесь контент блока с поворотом влево">Налево</a>
<a href="" class="top" rel="bt" rev="#B0EB17" title="Здесь контент блока с поворотом вверх">Вверх</a>
<a href="" class="bottom" rel="tb" rev="#82BD2E" title="Здесь контент блока с поворотом вниз">Вниз</a>
<a href="" class="right" rel="lr" rev="#C8D97E" title="Здесь контент блока с поворотом вправо">Вправо</a>
<a href="" class="revert">Повторить</a>  
</div>


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

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