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