Маленький эффект
Всем привет :), хочу представить скрипт
имитирующий (не полностью) выделение (как на рабочем столе). Особой практической ценности он не имеет, он служит только для того что бы В общем функция скрипта (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,
Я и хвалилисься в первом посте :) - Цитата:
|
Serg_pnz,
то есть даже в шестом работает (вроде) :dance: |
Цитата:
|
Цитата:
<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>
|
| Часовой пояс GMT +3, время: 07:18. |