Главная » 2011 » Октябрь » 15 » 3D вращение блока с текстом на jQuery (Javascript)
15.10.2011, 22:25

3D вращение блока с текстом на jQuery





ДЕМО МАТЕРИАЛА

Установка:

После /head на нужных страницах вставляйте:
Code
<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>

Далее в то место, где будет сам блок:
Code
<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
Материал взят с сайта infoscript.ru
Теги: Скачать 3D вращение блока с текстом на jQuery
Скачать "3D вращение блока с текстом на jQuery"
Внимание! Копирование данного материала запрещено без указания ссылки на сайт Infoscript.ru
Источник/Автор: siteforsites.ru
Категория: JavaScript's | Просмотров: 2464 | Добавил: manikom-auto | Рейтинг: 5.0/1 |
Теги: Вращение, блока, на, jquery, текстом, 3d
Пока комментариев нет. Ты можешь быть первым!
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]