Показать сообщение отдельно
  #1 (permalink)  
Старый 02.09.2011, 22:10
Профессор
Отправить личное сообщение для Александр х@к Посмотреть профиль Найти все сообщения от Александр х@к
 
Регистрация: 24.08.2011
Сообщений: 159

Ресайз элементов, как?код есть но не работает
<!DOCTYPE HTML>
<html>
<body>
<div id="block">    <div id="lt" class="angle"></div>
    <div id="tr" class="angle"></div>
    <div id="rb" class="angle"></div>
    <div id="bl" class="angle"></div>
  </div>
<script>
window.onload = function () { 
  function gID(id) { return document.getElementById(id); }
 
  var block = gID('block'),
      lt = gID('lt'),
      tr = gID('tr'),
      rb = gID('rb'),
      bl = gID('bl');
 
 
 
 
  // Ресайз за левый верхний уголок
  function resizeLT(e) {
    if (e.which == 1) {
      var mousePositionX = e.pageX,
          mousePositionY = e.pageY;
 
      function moveOnDocument(e) {
        var moveX = e.pageX - mousePositionX,
            moveY = e.pageY - mousePositionY,
            blockWidth = block.offsetWidth - 2 - moveX,
            blockHeight = block.offsetHeight - 2 - moveY,
            blockLeft = block.offsetLeft + moveX,
            blockTop = block.offsetTop + moveY;
 
        mousePositionX = e.pageX,
        mousePositionY = e.pageY;
 
        block.style.width = blockWidth + 'px';
        block.style.height = blockHeight + 'px';
 
        block.style.left = blockLeft + 'px';
        block.style.top = blockTop + 'px';
      }
 
      document.addEventListener('mousemove', moveOnDocument, false);
 
      function upOnDocument() {
        document.removeEventListener('mousemove', moveOnDocument, false);
      }
 
      document.addEventListener('mouseup', upOnDocument, false);
 
      e.preventDefault();
      e.stopPropagation();
      return false;
    }
  }
  lt.addEventListener('mousedown', resizeLT, false);
 
 
 
 
  // Ресайз за верхний правый уголок
  function resizeTR(e) {
    if (e.which == 1) {
      var mousePositionX = e.pageX,
          mousePositionY = e.pageY;
 
      function moveOnDocument(e) {
        var moveX = e.pageX - mousePositionX,
            moveY = e.pageY - mousePositionY,
            blockWidth = block.offsetWidth - 2 + moveX,
            blockHeight = block.offsetHeight - 2 - moveY,
            //blockLeft = block.offsetLeft + moveX,
            blockTop = block.offsetTop + moveY;
 
 
        mousePositionX = e.pageX,
        mousePositionY = e.pageY;
 
        block.style.width = blockWidth + 'px';
        block.style.height = blockHeight + 'px';
 
        //block.style.left = blockLeft + 'px';
        block.style.top = blockTop + 'px';
      }
 
      document.addEventListener('mousemove', moveOnDocument, false);
 
      function upOnDocument() {
        document.removeEventListener('mousemove', moveOnDocument, false);
      }
 
      document.addEventListener('mouseup', upOnDocument, false);
 
      e.preventDefault();
      e.stopPropagation();
      return false;
    }
  }
  tr.addEventListener('mousedown', resizeTR, false);
 
 
 
 
  // Ресайз за прваый нижний уголок
  function resizeRB(e) {
    if (e.which == 1) {
      var mousePositionX = e.pageX,
          mousePositionY = e.pageY;
 
      function moveOnDocument(e) {
        var moveX = e.pageX - mousePositionX,
            moveY = e.pageY - mousePositionY,
            blockWidth = block.offsetWidth - 2 + moveX,
            blockHeight = block.offsetHeight - 2 + moveY;
            //blockLeft = block.offsetLeft + moveX,
            //blockTop = block.offsetTop + moveY;
 
        mousePositionX = e.pageX,
        mousePositionY = e.pageY;
 
        block.style.width = blockWidth + 'px';
        block.style.height = blockHeight + 'px';
 
        //block.style.left = blockLeft + 'px';
        //block.style.top = blockTop + 'px';
      }
 
      document.addEventListener('mousemove', moveOnDocument, false);
 
      function upOnDocument() {
        document.removeEventListener('mousemove', moveOnDocument, false);
      }
 
      document.addEventListener('mouseup', upOnDocument, false);
 
      e.preventDefault();
      e.stopPropagation();
      return false;
    }
  }
  rb.addEventListener('mousedown', resizeRB, false);
 
 
 
 
  // Ресайз за нижний левый уголок
  function resizeBL(e) {
    if (e.which == 1) {
      var mousePositionX = e.pageX,
          mousePositionY = e.pageY;
 
      function moveOnDocument(e) {
        var moveX = e.pageX - mousePositionX,
            moveY = e.pageY - mousePositionY,
            blockWidth = block.offsetWidth - 2 - moveX,
            blockHeight = block.offsetHeight - 2 + moveY,
            blockLeft = block.offsetLeft + moveX;
            //blockTop = block.offsetTop + moveY;
 
        mousePositionX = e.pageX,
        mousePositionY = e.pageY;
 
        block.style.width = blockWidth + 'px';
        block.style.height = blockHeight + 'px';
 
        block.style.left = blockLeft + 'px';
        //block.style.top = blockTop + 'px';
      }
 
      document.addEventListener('mousemove', moveOnDocument, false);
 
      function upOnDocument() {
        document.removeEventListener('mousemove', moveOnDocument, false);
      }
 
      document.addEventListener('mouseup', upOnDocument, false);
 
      e.preventDefault();
      e.stopPropagation();
      return false;
    }
  }
  bl.addEventListener('mousedown', resizeBL, false);
 
}
</script> 

</body>
</html>


Но блок вообще не выводит
Я хочу,как здесь: http://dl.dropbox.com/u/6001712/demo/resize/index.html
Ответить с цитированием