Слайдинг div
Вложений: 1
Доброго времени суток!
При клике на маленький div (пункт меню) происходит слайд задних больших div'ов. Подскажите, как избежать дрыгания div'ов (файлы во вложении)? Я понимаю, что это происходит из-за некорректного вычисления +10 (например, высота клиентской области равна 743px) при изменении позиции скользящего div'а. Тряска убирается изменением movePix равным 1, но тогда div-слайд двигается очень медленно. Есть ли способ ускорить SetInterval или как избавиться от тряски? |
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>
|
:)
<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>
|
Manyasha, рони - спасибо за ваши изящные решения! Очень круто!
|
| Часовой пояс GMT +3, время: 22:23. |