Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 29.01.2014, 23:46
Новичок на форуме
Отправить личное сообщение для Павлихин Сергей Посмотреть профиль Найти все сообщения от Павлихин Сергей
 
Регистрация: 31.03.2013
Сообщений: 4

В одном div есть большой div, в котором маленькие div'ы, при сдвиге пропадают маленьк
С самого начала, у меня большое разрешение, есть внешний div, размеры которого 100% на 100% (т.е. 1920х955). Внутри него содержится другой div размеры которого в 3 раза больше. А внутри этого div 9 div'ов размерами 1920х955. Ну то есть вот:
<div style="overflow:hidden; width: 1920px; height:955px;">
		<div id="Blocks" style="position:absolute; width:300%; height: 300%; top: 0px; left:0px; z-index: 5;" >
			<div class ="Block "id = "1" style="background-color:red; position:absolute; top:0px; left:0px; z-index:100;"></div>
			<div class ="Block "id = "2" style="background-color:green; position:absolute; top:0px; left:1920px;"></div>
			<div class ="Block "id = "3" style="background-color:red; position:absolute; top:0px; left:0px; z-index:100;"></div>
			<div class ="Block "id = "4" style="background-color:green; position:absolute; top:0px; left:1920px;"></div>
			<div class ="Block "id = "5" style="background-color:red; position:absolute; top:0px; left:0px; z-index:100;"></div>
			<div class ="Block "id = "6" style="background-color:green; position:absolute; top:0px; left:1920px;"></div>
		</div>
	</div>


при срабатывание события клик, большой div "Blocks" должен двигаться влево, но на выходе код становится следующим:
<div style="overflow:hidden; width: 1920px; height:955px;">
	<div id="Blocks" style="position: absolute; width: 300%; height: 300%; top: 0px; left: -100px; z-index: 5;">NaN</div>
		</div>


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

Прошу прощения, всё заработало, когда удалил первоначальную задумку. Ну тогда вот продолжение, движение должно быть по прокрутке колёсика , код для прокрутки, взял из учебника
var elem = window;
			if (elem.addEventListener) {
			  if ('onwheel' in document) {
			    // IE9+, FF17+
			    elem.addEventListener ("wheel", onWheel, false);
			  } else if ('onmousewheel' in document) {
			    // устаревший вариант события
			    elem.addEventListener ("mousewheel", onWheel, false);
			  } else {
			    // 3.5 <= Firefox < 17, более старое событие DOMMouseScroll пропустим
			    elem.addEventListener ("MozMousePixelScroll", onWheel, false);
			  }
			} else { // IE<9
			  elem.attachEvent ("onmousewheel", onWheel);
			}


			function onWheel(e) {
			  e = e || window.event;
			  // deltaY, detail содержат пиксели
			  // wheelDelta не дает возможность узнать количество пикселей
			  // onwheel || MozMousePixelScroll || onmousewheel
			  var delta = e.deltaY || e.detail || e.wheelDelta;
			  var info = document.getElementById('Blocks');	
			 info.style.left = +((getComputedStyle(info, "").left).substring(0, (getComputedStyle(info, "").left).indexOf("p"))) - delta + "px";

			  e.preventDefault ? e.preventDefault() : (e.returnValue = false);
			}

Сначала делал через прокрутку, когда не работало так, пробовал через клик

Последний раз редактировалось Павлихин Сергей, 30.01.2014 в 00:29. Причина: забыл
Ответить с цитированием
  #2 (permalink)  
Старый 30.01.2014, 00:11
Аватар для Zuenf
Кандидат Javascript-наук
Отправить личное сообщение для Zuenf Посмотреть профиль Найти все сообщения от Zuenf
 
Регистрация: 27.01.2012
Сообщений: 134

Павлихин Сергей, ну раз выходит что-то не правильное после выполнения функции, значит в ней что-то делается не так и соответственно нужно выложить код или ссылку где можно увидеть ее действие.

Последний раз редактировалось Zuenf, 30.01.2014 в 00:13.
Ответить с цитированием
  #3 (permalink)  
Старый 30.01.2014, 00:12
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от Павлихин Сергей
Надеюсь понятно изложил
нет!
Сообщение от Павлихин Сергей
внутри этого div 9 div'ов
у вас их 6
Сообщение от Павлихин Сергей
при срабатывание события клик, большой div "Blocks" должен двигаться влево
это заклинание нужно произнести?
Сообщение от Павлихин Сергей
событие своё делает
мрак!!!
Ответить с цитированием
  #4 (permalink)  
Старый 30.01.2014, 00:38
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

прокрутка на jquery без клика без шума )))
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .Block {
   width: 400px; height:200px;
  }
  </style>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script>
$(function () {
      function go() {
          $('#Blocks').animate({
              left: '-=400'
          }, 2000).animate({
              left: '-=400'
          }, 2000).animate({
              top: '-=200'
          }, 2000)
              .animate({
                  left: '+=400'
              }, 2000).animate({
                  left: '+=400'
              }, 2000).animate({
                  top: '-=200'
              }, 2000)
              .animate({
                  left: '-=400'
              }, 2000).animate({
                  left: '-=400'
              }, 2000).animate({
                  top: '+=400',
                  left: '+=800'
              }, 2000, go)
      }
      go()
  })
  </script>
</head>

<body>
<div style="overflow:hidden; width: 400px; height:200px; position: relative ">
		<div id="Blocks" style="position:absolute; width:1200px; height: 600px; top: 0px; left:0px; z-index: 5; background-color: #00BFFF" >
			<div class ="Block "id = "1" style="background-color:red; position:absolute; top:0px; left:0px; ">1</div>
			<div class ="Block "id = "2" style="background-color:green; position:absolute; top:0px; left:400px;">2</div>
			<div class ="Block "id = "3" style="background-color:red; position:absolute; top:0px; left:800px; ">3</div>
			<div class ="Block "id = "4" style="background-color:green; position:absolute; top:200px; left:0px;">4</div>
			<div class ="Block "id = "5" style="background-color:red; position:absolute; top:200px; left:400px; ">5</div>
			<div class ="Block "id = "6" style="background-color:green; position:absolute; top:200px; left:800px;">6</div>
            <div class ="Block "id = "7" style="background-color:red; position:absolute; top:400px; left:0px; ">7</div>
			<div class ="Block "id = "8" style="background-color:green; position:absolute; top:400px; left:400px;">8</div>
            <div class ="Block "id = "9" style="background-color:red; position:absolute; top:400px; left:800px;">9</div>
		</div>
	</div>

</body>

</html>
Ответить с цитированием
  #5 (permalink)  
Старый 30.01.2014, 00:48
Новичок на форуме
Отправить личное сообщение для Павлихин Сергей Посмотреть профиль Найти все сообщения от Павлихин Сергей
 
Регистрация: 31.03.2013
Сообщений: 4

Спасибо за хорошую анимацию, я попробовал делать прокрутку через квери, но результат не изменился Даже если сделал размеры меньше в 10 раз... Как бы нужно, что только при прокручивании колёсика, что-то происходило

Последний раз редактировалось Павлихин Сергей, 30.01.2014 в 00:51.
Ответить с цитированием
  #6 (permalink)  
Старый 30.01.2014, 00:59
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Павлихин Сергей,
попробуйте обьяснить попроще что вы хотите сделать и что не получается лучше с живым примером ... так вам быстрее подскажут.
Ответить с цитированием
  #7 (permalink)  
Старый 30.01.2014, 01:02
Новичок на форуме
Отправить личное сообщение для Павлихин Сергей Посмотреть профиль Найти все сообщения от Павлихин Сергей
 
Регистрация: 31.03.2013
Сообщений: 4

Хочу, чтобы когда я кручу колёсико мышки вниз, div двигался влево, на то значение, на сколько прокрутилось колёсико. Как будто прокрутка страницы вправо.
Ответить с цитированием
  #8 (permalink)  
Старый 30.01.2014, 01:31
Новичок на форуме
Отправить личное сообщение для Павлихин Сергей Посмотреть профиль Найти все сообщения от Павлихин Сергей
 
Регистрация: 31.03.2013
Сообщений: 4

Всё нормально, всё исправил. Собственные ошибки. Можно тему закрывать. Всем спасибо)
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
глюк форума Gvozd Сайт Javascript.ru 11 18.03.2009 14:37