Показать сообщение отдельно
  #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. Причина: забыл
Ответить с цитированием