В одном 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);
}
Сначала делал через прокрутку, когда не работало так, пробовал через клик |
Павлихин Сергей, ну раз выходит что-то не правильное после выполнения функции, значит в ней что-то делается не так и соответственно нужно выложить код или ссылку где можно увидеть ее действие.
|
Цитата:
Цитата:
Цитата:
Цитата:
|
:write: прокрутка на 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>
|
Спасибо за хорошую анимацию, я попробовал делать прокрутку через квери, но результат не изменился:cray: Даже если сделал размеры меньше в 10 раз... Как бы нужно, что только при прокручивании колёсика, что-то происходило
|
Павлихин Сергей,
попробуйте обьяснить попроще что вы хотите сделать и что не получается лучше с живым примером ... так вам быстрее подскажут. |
Хочу, чтобы когда я кручу колёсико мышки вниз, div двигался влево, на то значение, на сколько прокрутилось колёсико. Как будто прокрутка страницы вправо.
|
Всё нормально, всё исправил. Собственные ошибки. Можно тему закрывать. Всем спасибо)
|
| Часовой пояс GMT +3, время: 11:27. |