Здравствуйте. Я бы хотела задать один вопрос, ибо не нашла где правильнее его будет задавать. В общем мне нужен код таблицы как вот на этой роле http://murmuring.anihub.ru/ Где я могу похожий найти? У вас на форуме он есть? Если вопрос не корректный укажите это. Постараюсь исправиться.
Вопрос по таблице
Страница: 1
Тема закрыта
Сообщений 1 страница 3 из 3
Поделиться114.01.12 11:41
- Бестелесный дух прошлого
- Уважение: +57
Поделиться214.01.12 13:56
- Жерар Депардье
- Уважение: +3482
- Достижения/подарки: cake 4 emoji_events 4
- Наградные баллы: 122
Flekso
Кроме резиновой анимации для навигации - забавного ничо нет - таблица на три ячейки - две строки, в последней строке, ячейки объединены.
Анимашка, вставляемая в нижнюю ячейку - така:
Код:
<style>
.menu {
width:80%;
height:34px!important;
}
.flekso{
margin-right:12px;
display:block!important;
float:left;
padding:1em;
height:24px!important;
border:red solid 2px;
border-radius:15px;
-webkit-border-radius:15px;
-khtml-border-radius:15px;
-moz-border-radius:15px;
-o-border-radius:15px;
box-shadow: 0px 5px 18px #000;
-webkit-box-shadow:0px 5px 18px #000;
-khtml-box-shadow:0px 5px 18px #000;
-moz-box-shadow:0px 5px 18px #000;
}
.flekso_content {
display:none;
}
</style>
<div class="menu">
<div class="flekso" style="overflow-x: hidden; overflow-y: hidden; width: 65px">
<div class="flekso_content">
Тут что-то
</div></div>
<div class="flekso" style="overflow-x: hidden; overflow-y: hidden; width: 65px">
<div class="flekso_content">
Тут что-то
</div></div>
<div class="flekso" style="overflow-x: hidden; overflow-y: hidden; width: 65px">
<div class="flekso_content">
Тут что-то
</div></div>
<div class="flekso" style="overflow-x: hidden; overflow-y: hidden; width: 65px">
<div class="flekso_content">
Тут что-то
</div></div>
</div>
<!--Таба-->
<script>
$('.flekso').hover(
function(){
var $this = $(this);
expand($this);
},
function(){
var $this = $(this);
collapse($this);
}
);
function expand($elem){
var angle = 0;
var t = setInterval(function () {
if(angle == 1440){
clearInterval(t);
return;
}
angle += 40;
$('.link',$elem).stop().animate({rotate: '+=-40deg'}, 0);
},10);
$elem.stop().animate({width:'215px'}, 1000)
.find('.flekso_content').fadeIn(400,function(){
$(this).find('p').stop(true,true).fadeIn(600);
});
}
function collapse($elem){
var angle = 1440;
var t = setInterval(function () {
if(angle == 0){
clearInterval(t);
return;
}
angle -= 40;
$('.link',$elem).stop().animate({rotate: '+=40deg'}, 0);
},10);
$elem.stop().animate({width:'65px'}, 1000)
.find('.flekso_content').stop(true,true).fadeOut().find('p').stop(true,true).fadeOut();
}
</script>Отредактировано Deff (14.01.12 14:39)
Поделиться314.01.12 14:40
- Бестелесный дух прошлого
- Уважение: +57
Deff
Спасибо Вам большое)
Тема закрыта
Страница: 1
