Javascript-форум - Маленький эффект

Javascript-форум (https://javascript.ru/forum/)

- Ваши сайты и скрипты (https://javascript.ru/forum/project/)

- - Маленький эффект (https://javascript.ru/forum/project/30756-malenkijj-ehffekt.html)

Маленький эффект

Всем привет :), хочу представить скрипт
имитирующий (не полностью) выделение (как на рабочем столе).
Особой практической ценности он не имеет,
он служит только для того что бы ~~повеселить~~ юзера (пока не более).
В общем функция скрипта (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>

Хочу услышать ваши отзовы :). :yes:
Спасибо за внимание. :) :)

Для онлайнигры подойдет, типа выбрать войска.

Serg_pnz,
:lol: :lol:

Serg_pnz,
ну как эффект думаю катит вообще на все сайты :) , а то сейчас слишком много людей которым "Ооо у этого сайта идет выделение не синим, а желтым цветом - мам клевый сайт!"

Serg_pnz,
наверное самое лучшее в нем - это то что в ИЕ ишаке катит :)

Этим сразу надо было хвалиться ;) А то я забываю постоянно, что такой браузер существует))

Serg_pnz,
Я и хвалилисься в первом посте :) -

Цитата:

Сообщение от Dim@

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

Serg_pnz,
то есть даже в шестом работает (вроде) :dance:

Цитата:

Сообщение от Serg_pnz

А то я забываю постоянно, что такой браузер существует))

:lol: :lol: по идее его никогда нельзя забывать :lol:

Цитата:

Сообщение от Dim@

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

Вот так будет нормально работать(проверил в хроме)

<head>
        <meta endcoding="windows-1751" />
        <style type="text/css">
            body {
                margin:0px;
                padding:0px;
            }
            .sel {
                position:absolute;
                background-color:rgba(0, 30, 150, 0.3);
                border:1px solid rgba(30, 150, 0, 0.4);
            }
        </style>
        <script type="text/javascript">
            var ctx2;

            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 () {
                    var cnv2 = document.getElementById("cnv2");
                    cnv2.setAttribute('width', drags.offsetWidth);
                    cnv2.setAttribute('height', drags.offsetHeight);
                    ctx2.drawImage(document.getElementById("cnv"), drags.offsetLeft, drags.offsetTop, drags.offsetWidth, drags.offsetHeight, 0, 0, drags.offsetWidth, drags.offsetHeight);
                    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);
                var ctx = document.getElementById("cnv").getContext('2d');
                ctx2 = document.getElementById("cnv2").getContext('2d');
               
                for (var i = 1; i < 9; i++) {
                    ctx.strokeStyle = 'black';
                    ctx.font = '16px Ariadna';
                    ctx.strokeText('Блаблабла всем дарова я контент', 5, i * 20);
                };
            }
        </script>
    </head>
    
    <body onselectstart='return false'>
        <canvas id=cnv width=300 height=140 style='border:1px solid black'></canvas>
        <canvas id=cnv2 width=100 height=120 style='border:1px solid black'></canvas>
        <div id="sel" class="sel"></div>
    </body>

vadim5june,
клево!!:dance:
ну а если еще и работает как надо - так вообще клево :dance: :dance:
P.S. вопрос - зачем onselectstart? Я так понимаю что он не делает выделение сначала, а только по отпусканию мыши - верно?

Цитата:

Сообщение от Dim@

зачем onselectstart

Это я запретил выделение а то мигает синим цветом(в конечном варианте надо избирательно запрещать)
Твой пост мне в тему как раз- может буду использовать-+

vadim5june,
ну как говориться все для вас :) я же его писал что бы другие тоже пользовались:)

Прицепил опрос :) .