Javascript.RU

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

Слайдинг div
Доброго времени суток!
При клике на маленький div (пункт меню) происходит слайд задних больших div'ов.
Подскажите, как избежать дрыгания div'ов (файлы во вложении)?
Я понимаю, что это происходит из-за некорректного вычисления +10 (например, высота клиентской области равна 743px) при изменении позиции скользящего div'а. Тряска убирается изменением movePix равным 1, но тогда div-слайд двигается очень медленно. Есть ли способ ускорить SetInterval или как избавиться от тряски?
Вложения:
Тип файла: zip div.zip (1.0 Кб, 3 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 22.08.2016, 17:46
Профессор
Отправить личное сообщение для Manyasha Посмотреть профиль Найти все сообщения от Manyasha
 
Регистрация: 21.09.2015
Сообщений: 196

endloz, попробуйте так:
В примере 10 на 5 исправила, а то очень быстро прокручивается
<html>
	<head>
		<style>
			body{margin: 0 0 0 0; overflow:hidden;}
			.slider{width: 100%; height: 100%}
			.slider1{background-color: faa;}
			.slider2{background-color: afa;}
			.slider3{background-color: aaf;}
			.slider4{background-color: faf;}
			.menu{width: 15%; height: 50%; position: fixed; top: 25%; left: 2%; border: 2px solid; border-color: ffa;}
			.item{width:100%; height:25%; }
		</style>
		<script type="text/javascript" language="javascript">
var sliding=false;

function move_div(items, elem)
{
	//movePix=10;
       movePix=5;
	getId = document.getElementById(elem);
	window.nowPos = (-1) * parseInt(getId.style.marginTop);
	window.newPos = (items * (document.body.clientHeight));
	if (newPos!=nowPos)
	{
		//alert(document.body.clientHeight);
		slideIt();
		//getId.style.marginTop = "-"+newPos+"px";
	}
}

function slideIt()
{
	sliding = clearInterval(sliding);
	sliding = setInterval(function()
	{
//добавила
		var diff = Math.abs(newPos-nowPos);
		if (nowPos<newPos)
		{
//исправила 
			nowPos+=Math.min(movePix, diff);
			getId.style.marginTop ="-" + nowPos + "px";
		}
		else if (nowPos>newPos)
		{
//исправила 
			nowPos-=Math.min(movePix, diff);
			getId.style.marginTop ="-" + nowPos + "px";
		}
	},1);
}
</script>
	</head>
	<body scroll="no">
		<div class="menu">
			<div class="item slider1" onClick="move_div(0,'divSlider');">div1</div>
			<div class="item slider2" onClick="move_div(1,'divSlider');">div2</div>
			<div class="item slider3" onClick="move_div(2,'divSlider');">div3</div>
			<div class="item slider4" onClick="move_div(3,'divSlider');">div4</div>
		</div>
		<div id="divSlider" style="margin-top:0px;">
			<div class="slider slider1">
				DIV1
			</div>
			<div class="slider slider2">
				DIV2
			</div>
			<div class="slider slider3">
				DIV3
			</div>
			<div class="slider slider4">
				DIV4
			</div>
		</div>
	</body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 22.08.2016, 18:09
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,108


<html>
  <head>
    <style>
      body,html{
        height: 100%;
      }

      body{margin: 0 0 0 0; overflow:hidden;}
      .slider{width: 100%; height: 100%}
      .slider1{background-color: faa;}
      .slider2{background-color: afa;}
      .slider3{background-color: aaf;}
      .slider4{background-color: faf;}
      .menu{width: 15%; height: 50%; position: fixed; top: 25%; left: 2%; border: 2px solid; border-color: ffa;}
      .item{width:100%; height:25%; }
      #divSlider{

        transition: all 1.2s ease-in-out;
      }

    </style>
    <script>


function move_div(items, elem)
{

  var getId = document.getElementById(elem);
  getId.style.marginTop = -items * window.innerHeight +"px";
}


</script>
  </head>
  <body scroll="no">
    <div class="menu">
      <div class="item slider1" onClick="move_div(0,'divSlider');">div1</div>
      <div class="item slider2" onClick="move_div(1,'divSlider');">div2</div>
      <div class="item slider3" onClick="move_div(2,'divSlider');">div3</div>
      <div class="item slider4" onClick="move_div(3,'divSlider');">div4</div>
    </div>
    <div id="divSlider" style="margin-top:0px;">
      <div class="slider slider1">
        DIV1
      </div>
      <div class="slider slider2">
        DIV2
      </div>
      <div class="slider slider3">
        DIV3
      </div>
      <div class="slider slider4">
        DIV4
      </div>
    </div>
  </body>
</html>
Ответить с цитированием
  #4 (permalink)  
Старый 22.08.2016, 22:13
Новичок на форуме
Отправить личное сообщение для endloz Посмотреть профиль Найти все сообщения от endloz
 
Регистрация: 22.08.2016
Сообщений: 2

Manyasha, рони - спасибо за ваши изящные решения! Очень круто!
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
обработчик событий для динамически добавленных элементов Tecvid Events/DOM/Window 28 25.06.2018 13:49
Закрыть DIV при клике в нем на ссылку или баннер xavibeat Общие вопросы Javascript 1 30.03.2016 20:41
Показать div при наведении / jQuery updaite Элементы интерфейса 4 28.07.2014 03:45
Проблемы с div обновлённым через (#id).load erlcat jQuery 4 03.03.2013 03:41
проблема с div И animate g00000dman jQuery 2 24.03.2011 23:34