Javascript-форум - Показать сообщение отдельно

Dim@ · #1 (**permalink**) 14.08.2012, 16:59

Всем привет

, хочу представить скрипт
имитирующий (не полностью) выделение (как на рабочем столе).
Особой практической ценности он не имеет,
он служит только для того что бы ~~повеселить~~ юзера (пока не более).
В общем функция скрипта (selection) должна вызываться с 2-мя параметрами
1)------>>> на что будем вешать обработчики событий мыши (я решил что бы
программист выбрал сам на что ему вешать - document, document.body,
document.getElementsByTagName("body")[0] и т.д.)
2)------>>> пустой див (на пустоту проверки нет) с обязательным

position:absolute;

Минусы - их нет за исключением нагрузки ЦП юзера (то есть не минус

и работает
не совсем так как хотелось бы (см. пример 2).
Плюсы - их тоже нет за исключением того что юзеру может
понравиться такой ~~прикол~~ эффект

.
Сам скрипт (оптимально работает в хроме, опере, сафари,
у меня слетел файрфокс поэтому не знаю - провертье, и более-менее нормально
в ишаке - у меня то ли 5-ый, то ли 6-ой ишак так что по идее должно в последующих работать

) :

function selection(elem, drags){
 if ((typeof elem != "object") || (typeof drags != "object") || (((drags + "") != "[object HTMLDivElement]") && ((drags + "") != "[object]"))){
  console.log('selection error');
  return;
 };
 drags.style.display = "none";
 elem.onmousedown = function (e){
  drags.style.display = "block";
  var e = e || window.event;
  selection.x = e.clientX;
  selection.y = e.clientY;
  drags.style.left = selection.x;
  drags.style.top = selection.y;
  selection.drags = drags;
  selection.e = e;
  elem.onmousemove = function (e){
   var e = e || window.event;
   if (e.clientX - selection.x > 0){
     selection.drags.style.left = selection.x;
     selection.drags.style.width = e.clientX - selection.x;
   }
   else{
    selection.drags.style.left = e.clientX;
    selection.drags.style.width = selection.x - e.clientX;
   }
   if (e.clientY - selection.y > 0){
    selection.drags.style.height = e.clientY - selection.y;
    selection.drags.style.top = selection.y;
   }
   else{
    selection.drags.style.top = e.clientY;
    selection.drags.style.height = selection.y - e.clientY;
   }
  }
 }
 elem.onmouseup = function (){
  drags.style.display = "none";
  elem.onmousemove = function (){};
  drags.style.width = 0;
  drags.style.height = 0;
 }
}

И собственно пример работы этого скрипта:

<html>
<head>
<meta endcoding="windows-1751" />
<style type="text/css">
.sel{ /* это класс нашего дива - он абсолютно позиционирован, полупрозрачен, и имеет border*/
 position:absolute;
 background-color:rgba(0, 30, 150, 0.3);/*можно задать любой цвет*/
 border:1px solid rgba(30, 150, 0, 0.4);
}
</style>
<script type="text/javascript">
function selection(elem, drags){
 if ((typeof elem != "object") || (typeof drags != "object") || (((drags + "") != "[object HTMLDivElement]") && ((drags + "") != "[object]"))){
  console.log('selection error');
  return;
 };
 drags.style.display = "none";
 elem.onmousedown = function (e){
  drags.style.display = "block";
  var e = e || window.event;
  selection.x = e.clientX;
  selection.y = e.clientY;
  drags.style.left = selection.x;
  drags.style.top = selection.y;
  selection.drags = drags;
  selection.e = e;
  elem.onmousemove = function (e){
   var e = e || window.event;
   if (e.clientX - selection.x > 0){
     selection.drags.style.left = selection.x;
     selection.drags.style.width = e.clientX - selection.x;
   }
   else{
    selection.drags.style.left = e.clientX;
    selection.drags.style.width = selection.x - e.clientX;
   }
   if (e.clientY - selection.y > 0){
    selection.drags.style.height = e.clientY - selection.y;
    selection.drags.style.top = selection.y;
   }
   else{
    selection.drags.style.top = e.clientY;
    selection.drags.style.height = selection.y - e.clientY;
   }
  }
 }
 elem.onmouseup = function (){
  drags.style.display = "none";
  elem.onmousemove = function (){};
  drags.style.width = 0;
  drags.style.height = 0;
 }
}

window.onload = function(){//по онлоад-у ищем див и вызываем функцию selection
 var sel = document.getElementById("sel");
  selection(document, sel);//вешаем обработчики событий мыши на document и передаваем найденный див
}
</script>
</head>
<body>
<div id="sel" class="sel">
</div>
</body>
</html>

Второй пример - недостатки - он работает с контентом не совсем так как этого ожидает пользователь:

<html>
<head>
<meta endcoding="windows-1751" />
<style type="text/css">
.sel{ /* это класс нашего дива - он абсолютно позиционирован, полупрозрачен, и имеет border*/
 position:absolute;
 background-color:rgba(0, 30, 150, 0.3);/*можно задать любой цвет*/
 border:1px solid rgba(30, 150, 0, 0.4);
}
</style>
<script type="text/javascript">
function selection(elem, drags){
 if ((typeof elem != "object") || (typeof drags != "object") || (((drags + "") != "[object HTMLDivElement]") && ((drags + "") != "[object]"))){
  console.log('selection error');
  return;
 };
 drags.style.display = "none";
 elem.onmousedown = function (e){
  drags.style.display = "block";
  var e = e || window.event;
  selection.x = e.clientX;
  selection.y = e.clientY;
  drags.style.left = selection.x;
  drags.style.top = selection.y;
  selection.drags = drags;
  selection.e = e;
  elem.onmousemove = function (e){
   var e = e || window.event;
   if (e.clientX - selection.x > 0){
     selection.drags.style.left = selection.x;
     selection.drags.style.width = e.clientX - selection.x;
   }
   else{
    selection.drags.style.left = e.clientX;
    selection.drags.style.width = selection.x - e.clientX;
   }
   if (e.clientY - selection.y > 0){
    selection.drags.style.height = e.clientY - selection.y;
    selection.drags.style.top = selection.y;
   }
   else{
    selection.drags.style.top = e.clientY;
    selection.drags.style.height = selection.y - e.clientY;
   }
  }
 }
 elem.onmouseup = function (){
  drags.style.display = "none";
  elem.onmousemove = function (){};
  drags.style.width = 0;
  drags.style.height = 0;
 }
}
window.onload = function(){
 var sel = document.getElementById("sel");
 selection(document, sel);
}
</script>
</head>
<body>
Блаблабла всем дарова я контент<br />
Блаблабла всем дарова я контент<br />
Блаблабла всем дарова я контент<br />
Блаблабла всем дарова я контент<br />
Блаблабла всем дарова я контент<br />
Блаблабла всем дарова я контент<br />
Блаблабла всем дарова я контент<br />
Блаблабла всем дарова я контент<br />
<div id="sel" class="sel">
</div>
</body>
</html>

Хочу услышать ваши отзовы

.

Спасибо за внимание.