Новое
На Зефире прошла небольшая реорганизация. Подробности читайте в теме Вестника

● Смена дизайна! Выражаем благодарность tørst vinden!

Зефир

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Зефир » Архив выполненной верстки » [Таблица]Время вперёд


[Таблица]Время вперёд

Сообщений 1 страница 8 из 8

1

1. Название ролевой, ссылка: Время вперёд
2. Что требуется: таблица в объявление
3. Дополнительно:
Макет таблицы при загрузке главной страницы:
http://sa.uploads.ru/t/TmOai.png
Исходники:

Фон объявления

http://sa.uploads.ru/t/9LxQd.png

Кнопки левой части в обычном состоянии

http://sa.uploads.ru/t/Xk8pR.jpg
http://sa.uploads.ru/t/9Woxe.jpg
http://sa.uploads.ru/t/Gjyfk.jpg
http://sa.uploads.ru/t/Wc9pj.jpg

Кнопки правой части в активном состоянии

http://sa.uploads.ru/t/6tcey.jpg
http://sa.uploads.ru/t/ROtcq.jpg
http://sa.uploads.ru/t/smaf1.jpg
http://sa.uploads.ru/t/zej7b.jpg

Кнопки серединной части в обычном состоянии

http://sa.uploads.ru/t/Y3NJ5.png

Кнопки серединной части в активном состоянии

http://sa.uploads.ru/t/TuybR.png

Всё остальное в принципе могу вставить сам, наверное.

Описание:
1. Левая часть таблицы - таблица с переключаемыми кнопками, они меняются при нажатии.
При нажатии на первую кнопку появляется текст (он также появляется при загрузке главной страницы форума).
При нажатии на вторую кнопку появляется текст.
При нажатии на третью кнопку - картинки (вставлю сам).
При нажатии на четвёртую кнопку - баннеры (-//-)
2. Серединная часть таблицы - слайдер с переключаемыми кнопками внизу, также меняются при нажатии.
При нажатии на каждую кнопку вылетает картинка (вставлю сам).
Большое и важное пожелание: хочется, чтобы эта часть таблицы автоматически плавно переключалась через какое-то время (как на Зефире в объявлении, например).
Ну вроде всё.

0

2

Подскажите тогда, пожалуйста, кто-нибудь знает человека, который мог бы сделать таблицу? Готов за небольшую цену даже.

0

3

Faceless Void написал(а):

Готов за небольшую цену даже.

На нашем форуме все выполняется бесплатно. Но нужно подождать немного, верстальщики сейчас заняты.

0

4

Нафаня, прошу меня простить за назойливость, просто мне таблица нужна в срочном порядке. Знаю, что вы выполняете работу бесплатно - я имел ввиду, знает ли кто-нибудь человека, даже не обязательно с Зефира, который мог бы быстро сделать таблицу.Потому что я искал очень долго в Интернете - и так и не нашёл.
Не подскажите ли Вы, какое время мне необходимо ждать? Хотя бы примерно, как минимум.

0

5

Faceless Void, Как минимум 3 дня нужно ждать.

0

6

Нафаня, благодарю.

0

7

Добрый вечер)

Демо

Таблица:

Код:
<div class="anonce-table">
    <div class="anon-table-col coll">
      <ul class="tabs">
        <li id="tabs1" class="active" ><a href="#tab1"><img src="http://sa.uploads.ru/t/6tcey.jpg" width="35px"></a></li>
        <li id="tabs2"><a href="#tab2"><img src="http://sa.uploads.ru/t/zej7b.jpg" width="35px"></a></li>
        <li id="tabs3"><a href="#tab3"><img src="http://sa.uploads.ru/t/smaf1.jpg" width="35px"></a></li>
        <li id="tabs4"><a href="#tab4"><img src="http://sa.uploads.ru/t/ROtcq.jpg" width="35px"></a></li>
      </ul>
      <div style="display: block;" id="tab1" class="tab_content">
        Контект вкладки 1
      </div>
      <div style="display: block;" id="tab2" class="tab_content">
        Контект вкладки 2
      </div>
      <div style="display: block;" id="tab3" class="tab_content">
        Контект вкладки 3
      </div>
      <div style="display: block;" id="tab4" class="tab_content">
        Контект вкладки 4
      </div>
    </div>
    <div class="anon-table-slider coll">
       <div id="slider-wrap">
        <div id="slider">
          <div class="slide">Контент 1</div>
          <div class="slide">Контент 2</div>
          <div class="slide">Контент 3</div>
          <div class="slide">Контент 4</div>
        </div>
      </div>
    </div>
    <div class="anon-table-simple coll">
      Текст
    </div>

</div>

HTML-низ

Код:
<!--Вкладки и слайдер-->
<script type="text/javascript">
$(document).ready(function() {


	$(".tab_content").hide(); 
	$("ul.tabs li:first").addClass("active").show();
	$(".tab_content:first").show();
	
	$("ul.tabs li").click(function() {
    $("ul.tabs li").removeClass("active");
    $(this).addClass("active");
    $(".tab_content").hide();
    var activeTab = $(this).find("a").attr("href");
    $(activeTab).fadeIn(700);
    return false;
	});

  
  (function ($) {
var hwSlideSpeed = 700;
var hwTimeOut = 3000;
var hwNeedLinks = false;

$(document).ready(function(e) {
	$('.slide').css(
    {"position" : "absolute",
     "top":'0', "left": '0'}).hide().eq(0).show();
	var slideNum = 0;
	var slideTime;
	slideCount = $("#slider .slide").size();
	var animSlide = function(arrow){
    clearTimeout(slideTime);
    $('.slide').eq(slideNum).fadeOut(hwSlideSpeed);
    if(arrow == "next"){
    	if(slideNum == (slideCount-1)){slideNum=0;}
    	else{slideNum++}
    	}
    else if(arrow == "prew")
    {
    	if(slideNum == 0){slideNum=slideCount-1;}
    	else{slideNum-=1}
    }
    else{
    	slideNum = arrow;
    	}
    $('.slide').eq(slideNum).fadeIn(hwSlideSpeed, rotator);
    $(".control-slide.active").removeClass("active");
    $('.control-slide').eq(slideNum).addClass('active');
    }

	var $adderSpan = '';
	$('.slide').each(function(index) {
    	$adderSpan += '<span class = "control-slide">' + index + '</span>';
    });
	$('<div class ="sli-links">' + $adderSpan +'</div>').appendTo('#slider-wrap');
	$(".control-slide:first").addClass("active");
	$('.control-slide').click(function(){
	var goToNum = parseFloat($(this).text());
	animSlide(goToNum);
	});
	var pause = false;
	var rotator = function(){
    	if(!pause){slideTime = setTimeout(function(){animSlide('next')}, hwTimeOut);}
    	}
	$('#slider-wrap').hover(	
    function(){clearTimeout(slideTime); pause = true;},
    function(){pause = false; rotator();
    });
	rotator();
});
})(jQuery);
  
});
</script>

В свой стиль

Код:
.anonce-table {
  background: url("http://sa.uploads.ru/t/9LxQd.png") no-repeat;
  height:300px;
  width:100%;
  clear:both;
}

.anonce-table .coll {
  float:left;
  overflow:hidden;
}
.anon-table-col {
  width:165px;
  height:185px;
  margin:20px 20px;
}
.anon-table-slider {
  width:185px;
  margin:30px 30px;
  height: 140px;
}
.anon-table-simple {
  width:130px;
  margin:20px 10px;
  height: 160px;
}

.anonce-table ul li {
  list-style:none;
  display: inline;
}

.anonce-table .tabs li {
  opacity:0.6;
}

.anonce-table .tabs li:hover {
  opacity:0.8; 
  transition:1s;
}

.anonce-table .tabs .active {
  opacity:1;
}

.anonce-table ul {
  padding:0 5px;
  margin:0;
}


#slider {
height:115px;
	overflow: hidden;
	position:relative;
}
.sli-links {
  margin-left: 40px;
}

.sli-links .control-slide {
  opacity: 0.8;
	background: #8D8F8D;
	margin: 0 8px 0 0;
	width: 16px;
	height: 16px;
	border-radius: 8px;
	cursor: pointer;
	overflow: hidden;
	display: block;
	float: left;
	box-shadow: 0 1px 2px #000;
  text-indent:-9999px;
}

.sli-links .control-slide:hover, .sli-links .control-slide.active {
	background:#464746;
  transition:1s;
}

Отредактировано Патему (2014-12-02 20:25:37)

0

8

http://zephyr.f-rpg.ru/files/0013/e6/99/52870.png
Спасибо, Faceless Void, что воспользовались нашими услугами! Если вам понравилась работа Верстальщика или же наоборот, оставьте свой отзыв в теме "Отзывы заказчиков о выполненной работе", нам важно знать ваше мнение.

0


Вы здесь » Зефир » Архив выполненной верстки » [Таблица]Время вперёд


Рейтинг форумов | Создать форум бесплатно © 2007–2017 «QuadroSystems» LLC