Показать сообщение отдельно
  #3 (permalink)  
Старый 22.08.2016, 18:09
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,112


<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>
Ответить с цитированием