Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 24.10.2014, 15:37
Интересующийся
Отправить личное сообщение для misterX_ Посмотреть профиль Найти все сообщения от misterX_
 
Регистрация: 24.10.2014
Сообщений: 20

Плавный переход между блоками
В общем есть такой код, целью которого является плавно показать один див и спрятать другой
var links = $('.part a');

links.click(function(){
    var indx = $(this).index();
    var blocks = $(this).siblings('div');
    blocks.animate({
        opacity: 0
    }).eq(indx).animate({
        opacity: 1
    });
});


.blockA {
    position: absolute;
    width: 980px;
    height: 600px;
    line-height: 150px;
    text-align: center;
    color: #FFF;
    opacity: 1;
}

.blockB {
    position: absolute;
    width: 980px;
    height: 600px;
    line-height: 150px;
    text-align: center;
    color: #FFF;
    opacity: 0;
}

.blockA {
    background: #060;
}
.blockB {
    background: #036;
}
.showA , .showB {
    display: inline-block;
    padding: 10px;
}
.part {
    float: left;
    margin-right: 50px;
}
.active {
    margin: 0;
    z-index: 10;
}

<div class="part">
    <a href="#" class="showA">Блок А</a><a href="#" class="showB">Блок Б</a>
    <div class="blockA">Блок А</div>
    <div class="blockB">Блок Б</div>
</div>


Внимание вопрос. Каким образом нужно переделать скрипт, чтобы можно было перелистывать из самих блоков?
Ну т.е. чтобы можно было перейти только на соседний блок.

Если сильно не затруднит, хотелось бы пример.

Да, еще хотел бы организовать перелистывание, т.е. текущий блок уплывает влево, а на его месте возникает или приплывает справа следующий.
Ответить с цитированием
  #2 (permalink)  
Старый 25.10.2014, 19:38
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

misterX_,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .blockA {
    position: absolute;
    width: 980px;
    height: 600px;
    line-height: 150px;
    text-align: center;
    color: #FFF;
    opacity: 1;
    left: 0px;
}

.blockB {
    left: -980px;
    position: absolute;
    width: 980px;
    height: 600px;
    line-height: 150px;
    text-align: center;
    color: #FFF;
    opacity: 1;
    overflow: hidden;
}

.blockA {
    background: #060;
}
.blockB {
    background: #036;
}
.showA , .showB {
    display: inline-block;
    padding: 10px;
}
.part {
    float: left;
    margin-right: 50px;
    position: relative;
    width: 980px;
    height: 600px;
    overflow: hidden;
}
.active {
    margin: 0;
    z-index: 10;
}

  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
  	$(function()
  	  {
  	    var blocks = $('.part div');
  	    blocks.click(function()
  	      {
  	        blocks.stop().not(this).css({left: '-980px'}).animate(
  	          {
  	          left: '0px'
  	          },2000
  	        )
  	        $(this).animate(
  	          {
  	          left: '980px'
  	          },2000
  	        );
  	      }
  	    );
  	  }
  	);
  </script>
</head>

<body>

<div class="part">
    <div class="blockA">Блок А</div>
    <div class="blockB">Блок Б</div>
</div>

</body>

</html>
Ответить с цитированием
  #3 (permalink)  
Старый 27.10.2014, 08:54
Интересующийся
Отправить личное сообщение для misterX_ Посмотреть профиль Найти все сообщения от misterX_
 
Регистрация: 24.10.2014
Сообщений: 20

Спасибо за ответ. Я не совсем верно сформулировал вопрос. Будут две ссылки типа вперед и назад и пять блоков (на них, соответственно, по две этих ссылки - ну кроме первого и последнего), между которыми можно будет перемещаться нажимая на эти ссылки. Если нажимаем Вперед, то следующий блок приплывает справа, если Назад, то предыдущий блок приплывает слева.
Можно какой-нибудь пример в этом роде?

Насколько я понял, нужно определять номер текущего элемента (открытого блока), далее если нажато Назад, то текущий номер -1 и отобразить предыдущий блок, если нажато Далее то +1 и отобразить следующий блок. И так, соответственно, в рамках длинны массива элементов div блока part.
Кстати, в примере выше почему-то блоки прижаты к левому краю экрана, или их надо обернуть в дополнительный див со свойством absolute?

Последний раз редактировалось misterX_, 27.10.2014 в 09:12.
Ответить с цитированием
  #4 (permalink)  
Старый 27.10.2014, 09:12
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

misterX_,
1. слайдеров очень много, поищите с нужными вам функциями.
2. то что сейчас сформулировали, неосилил,(уже понятнее но) да и тема уже неинтересна, приложите свои усилия или в раздел работа.

Последний раз редактировалось рони, 27.10.2014 в 09:14.
Ответить с цитированием
  #5 (permalink)  
Старый 27.10.2014, 09:13
Интересующийся
Отправить личное сообщение для misterX_ Посмотреть профиль Найти все сообщения от misterX_
 
Регистрация: 24.10.2014
Сообщений: 20

Подскажите пожалуйста хотя бы как определить номер текущего открытого блока div?
Ответить с цитированием
  #6 (permalink)  
Старый 27.10.2014, 09:17
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,123

Сообщение от misterX_
Подскажите пожалуйста хотя бы как определить номер текущего открытого блока div?
Он, как правило, первый...
Ответить с цитированием
  #7 (permalink)  
Старый 27.10.2014, 09:19
Интересующийся
Отправить личное сообщение для misterX_ Посмотреть профиль Найти все сообщения от misterX_
 
Регистрация: 24.10.2014
Сообщений: 20

А, понял. А потом в замыкание куда-то записывать текущий при переходе, правильно?
Кстати, в IE8 он отображает почему-то последний.
Ответить с цитированием
  #8 (permalink)  
Старый 27.10.2014, 09:24
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

misterX_,
добавить кнопку next&last
почти готовое решение - добавить только ксс-эффекты
Ответить с цитированием
  #9 (permalink)  
Старый 27.10.2014, 09:39
Интересующийся
Отправить личное сообщение для misterX_ Посмотреть профиль Найти все сообщения от misterX_
 
Регистрация: 24.10.2014
Сообщений: 20

Спасибо
Не совсем то, но пища для размышлений теперь есть.
Кстати, в IE8 не работает. Видимо, не понимает вот эту конструкцию nth-child().

Последний раз редактировалось misterX_, 27.10.2014 в 09:53.
Ответить с цитированием
  #10 (permalink)  
Старый 27.10.2014, 11:01
Интересующийся
Отправить личное сообщение для misterX_ Посмотреть профиль Найти все сообщения от misterX_
 
Регистрация: 24.10.2014
Сообщений: 20

Все написал сам.
Плюс нашел интересный плагин, называется formToWizard. Очень легкий, тоже неплохо решает мои вопросы. Сейчас его только разберу, выкину все ненужное и все...
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
как сделать плавный переход для onmouseover Demidoff Общие вопросы Javascript 3 23.03.2014 12:52
плавный переход через javascript blacklool (X)HTML/CSS 1 19.01.2014 16:04
плавный переход между страницами silveran jQuery 1 31.01.2013 15:13
Плавный переход по страницам cyberx Общие вопросы Javascript 118 05.03.2011 13:57
JS и getURL плавный переход к anchor Blizzart Общие вопросы Javascript 4 16.01.2011 17:48