Показать сообщение отдельно
  #5 (permalink)  
Старый 14.10.2016, 13:07
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,050

раскрой материала, динамическое изменение размеров
iorvgoqa, в ie требуется правка. исправлено
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .rez {
     width: 400px;
     height: 300px;
     border: 2px groove #000000;
      position: relative;
      padding: 0;
  }
  .rez span {
    margin: 0;
    position: absolute;
    left 0;
    top: 0;
    background-color: #000000;
  }

  .rez span.v {
    left: 200px;
    width: 1px; height: 300px;
  }
  .rez:before{
     position:  absolute;
     top: 15px;
     left: 20px;
     content: attr(data-a);
  }

   .rez:after{
     position:  absolute;
     top: 15px;
      right: 20px;
     content: attr(data-b);
  }

  .rez span.g {
    width: 200px; height:1px;
    left: 200px; top : 150px;
  }
  .rez span.g:after{
     position:  absolute;
     display: block;
     top: 15px;
     right: 20px;
     content: attr(data-c);
     z-index: 100;
  }

  </style>

  <script>
window.addEventListener('DOMContentLoaded', function() {
  var rez = document.querySelector('.rez'),
      span = document.querySelectorAll('.rez span'),
      range = document.querySelectorAll('input.v,input.g');
      arr = [];
      [].forEach.call(range, function(item, i) {
              arr[i]= +item.value;
              var foo = function() {
              arr[i]= +item.value;
              span[0].style.left = arr[0]+"px";
              span[1].style.left = arr[0]+"px";
              span[1].style.width = (400 - arr[0])+"px";
              span[1].style.top = arr[1]+"px";
              rez.setAttribute("data-a", arr[0] ? arr[0] + " x 300" : "");
              rez.setAttribute("data-b", arr[0] != 400 && arr[1] ? (400 - arr[0]) + " x " + arr[1] : "");
              span[1].setAttribute("data-c", arr[0] != 400 && arr[1] != 300 ?(400 - arr[0]) + " x " + (300 - arr[1]) : "");
              }
              item.addEventListener('change', foo);
              item.addEventListener('input', foo);
      });

    });
  </script>
</head>

<body>

<div class="rez" data-a="200 x 300" data-b="200 x 150" ><span class="v"></span><span class="g" data-c="200 x 150"></span></div>
<input type="range" min="0" max="400" step="10" value="200" class="v">
<input type="range" min="0" max="300" step="10" value="150" class="g">
</body>
</html>

Последний раз редактировалось рони, 14.10.2016 в 14:26.
Ответить с цитированием