плагин для создания эффекта затемнения всей страницы кроме выбранного элемента DOM
Плагин для jquery ... идея взята тут https://github.com/zzarcon/focusable
жмите на посмотреть чтоб увидеть возможности плагина, потом можно покликать то что выделено красным контуром ... замечания пожелания приветствутся ... :write:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>elementOverlay</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style>
body{text-align:center;padding:30px}
ul{padding:0px}
li{list-style:none;border:1px solid #ccc;margin:5px}
img{margin-top:10px;height:150px;border:1px solid #ccc}
.example{float:left;width:70%}
.options{float:right;width:30%;background:#ccc;border-radius:5px}
.options ul{text-align:left;margin-left:10px}
input{text-align:center}
#test{width:150px}
.focusable{border:rgb(0,51,255) 2px solid}
.focusable-column{margin:0;padding:0}
</style>
<script>
$.fn.elementOverlay = function(g) {
var def = {
speed: 1500, //скорость анимации, отключение анимации 0
elem: null, //селектор или элемент для выделенияя
activeClass: "focusable", //класс для элемента на время выделения
columnClass: "focusable-column", //класс для затемнения
esc: true, //выход по Esc
init: true, //начало анимации от периметра страницы или предыдущего элемента выделения
hideCallback: null, //функция после скрытия затемнения
showCallback: null // функция после анимации выделения
};
var h = jQuery.extend({}, def, g);
function hide(event) {
var elem = $(getActiveElement());
getActiveElement(' ');
var data = elem.data("overlay");
var speed = data.speed;
var fn = data.hideCallback;
var n = 0;
$("." + h.columnClass).stop(true, true).fadeOut(speed, function() {
n++;
if (n == 4) {
elem.removeClass(data.activeClass);
fn && fn()
}
});
}
function keyupHandler(event) {
$(getActiveElement()).data("overlay").esc && event.keyCode === 27 && hide()
}
function getActiveElement() {
var temp;
return function(el) {
if (el) temp = el;
return temp
}
}
function resizeHandler(event, speed) {
var column = $("." + h.columnClass);
var $element = $(getActiveElement());
if (!$element.length) return;
var data = $element.data("overlay"),
offset = $element.offset(),
tp = Math.round(offset.top),
lf = Math.round(offset.left),
width = $(document).width(),
height = $(document).height(),
heightEl = Math.round($element.outerHeight()),
widthEl = Math.ceil($element.outerWidth());
data.init && init();
var arr = [{
"width": width,
"height": tp,
"top": 0,
"left": 0
}, {
"width": lf,
"height": heightEl,
"top": tp,
"left": 0
}, {
"width": width - (lf + widthEl),
"height": heightEl,
"top": tp,
"left": lf + widthEl
}, {
"width": width,
"height": height - (tp + heightEl),
"top": tp + heightEl,
"left": 0
}];
var n = 0;
var fn = data.showCallback;
$.each(arr, function(indx, el) {
var opt = $.extend({
opacity: 1
}, el);
column.eq(indx).stop(true, true).css({
"display": "",
"opacity": data.init ? 0 : 1
}).animate(opt, {
duration: speed || 0,
easing : "swing",
complete: function() {
n++;
if (n == 4) fn && fn()
}
})
})
}
function init() {
var column = $("." + h.columnClass);
var width = $(document).width(),
height = $(document).height(),
from = [{
"width": width,
"height": 0,
"top": 0,
"left": 0
}, {
"width": 0,
"height": height,
"top": 0,
"left": 0
}, {
"width": 0,
"height": height,
"top": 0,
"left": width
}, {
"width": width,
"height": 0,
"top": height,
"left": 0
}];
$.each(from, function(indx, el) {
var opt = $.extend({
"position": "absolute",
"z-index": 9999,
"background": "rgba(0,0,0,0.8)",
"display": "none"
}, el);
if (!column.length) $("<div/>", {
"css": opt,
"class": h.columnClass,
"on": {
"click": hide
}
}).appendTo("body");
else column.eq(indx).css(opt)
})
}
function clickHandler() {
var elem = $(getActiveElement());
if (elem.length) {
var data = elem.data("overlay");
elem.removeClass(data.activeClass)
}
elem = $(getActiveElement(this));
data = elem.data("overlay");
elem.addClass(data.activeClass);
$(window).trigger("resize", [data.speed])
}
var column = $("." + h.columnClass);
if (!column.length) {
getActiveElement = getActiveElement();
init();
$.elementOverlay = function(g) {
if (g == "hide") {hide(); return}
var h = jQuery.extend({}, def, g);
var elem = $(h.elem);
elem.data({
"overlay": h
});
clickHandler.call(elem)
};
$(window).on({
"resize": resizeHandler,
"keyup": keyupHandler
})
}
return this.each(function(i, elem) {
var el = h.elem || $(elem).data("selector") || $(elem);
var hh = jQuery.extend({}, h, {
elem: el
});
$(elem).on({
"click": function(event) {
event.preventDefault();
event.stopPropagation();
$.elementOverlay(hh)
}
})
})
};
$(window).load(function() {
$(".show").elementOverlay({
speed: 2E3
}).css({
"border": "1px solid rgb(255, 0, 51)"
});
$("#x, .options").elementOverlay({
speed: 0,
hideCallback: function() {
alert("hideCallback")
}
}).css({
"border": "5px solid rgb(255, 0, 51)"
});
var sel = ["li:eq(1)", "li:eq(2)", "li:eq(3)", "img:eq(0)", "img:eq(1)", "img:eq(2)", "img:eq(1)", "img:eq(0)"];
! function go() {
var el = sel.shift();
if (el) $.elementOverlay({
elem: el,
speed: 1E3,
activeClass: "red",
init: false,
showCallback: function() {
window.setTimeout(go, 2E3)
}
});
else $.elementOverlay("hide")
}()
});
</script>
</head>
<body>
<div class="example">
<header> <button type="button" id="x" >Test no animate</button>
<button class="show" data-selector="header" id="test2">Focus header</button>
<button class="show" data-selector="ul">Focus list</button>
<button class="show" data-selector="li:first">Focus first item</button>
<button class="show" data-selector="img:eq(1)">Focus image</button>
</header>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<img src="http://elitefon.ru/download.php?file=201211/800x600/elitefon.ru-27151.jpg">
<img src="http://awabe.com/uploads/posts/2011-03/1300452670_sbtsag9elqjyvqf.jpeg">
<img src="http://img0.liveinternet.ru/images/attach/c/4/79/125/79125894_large_ff6f52c9a9848aab63958b7766780446.jpg">
</div>
<div class="options">
<h2>Options:</h2>
</div>
</body>
</html>
|
Cимпот, в Опере 12.16 ниже освещенного прямоугольника, в процессе быстрого перемещения освещённости,
бежит какая -то линия в ширину экрана: http://sf.uploads.ru/VqDp1.jpg (Ощущение, что подгон затемнённого низа запаздывает к перемещению боковушек) Проверил на всех кнопках теста. При медленных перемещениях подобного нет. Иногда по кликам на кнопки и картинки выскакивает такое: http://sf.uploads.ru/JoSWf.jpg |
Ксать как идея: можно использовать такую картинку с дыркой нужной прозрачностью и типоразмером по х - y c позицией fixed http://sf.uploads.ru/obfRz.png
|
Цитата:
Цитата:
|
Цитата:
(объём картинки маленький - менее 10кб) Ксать мон наверно и канвас приспособить |
Во еще идея, более интересная , чем картинка
DIV c полупрозрачными бордерами, которые высотой в экран(верхний - нижний) и шириной в экран(левый - правый) (его вставить в неподвижный div c overflow:hidden по размеру экрана) Тогда проблемы со скорость. отпадут, посколь перемещаем лишь единственный элемент и задание ширины высоты элемента(DIV ) много проще |
Deff,
перекрывают доступ к элементу :( |
У меня 2 скромных предложения:
1. Переписать на ES6 2. Выложить на Гитхаб/Битбакет |
Цитата:
http://javascript.ru/forum/dom-windo...tml#post263176 |
Цитата:
|
рони,
это почему? На ES5, значит, написал, а на ES6 совсем никак?) Давай-ка выйди из своей зоны комфорта, уже 2015 год на дворе) Ну а Гитхаб даже я осиливаю. |
Цитата:
Я в этом году поставил цель нормально освоить сам Git, т.е. разобраться со всякими cherry-pick, pull --rebase и т.д., а то не солидно уже как то :) |
kobezzza,
помню когда-то давно случайно сделал несколько форков крутых фреймворков :D |
kobezzza,
Safort, судя по вашим сообщениям я незнаю и десятой части, того что вы осилили :) |
Цитата:
Запоминая предыдущую position и z-index(если есть). Ксать если position не static, её не трогаем, только крутим z-index |
рони,
Если говорить о ES6, то там в основном всё довольно легко. Сам посмотри, как такое может быть сложным для человека более-менее знающего ES5?
var numb = 100500;
var es5String = 'numb = ' + numb;
var es6String = `numb = ${numb}`;
//или так
let es6String = `numb = ${numb}`;
//---------------------------------
window.onclick = function(e) {
//ES5
};
window.onclick = (e) => {
//ES6
};
//---------------------------------
setTimeout(function() {
//ES5
}, 1000);
setTimeout(() => {
//ES6
}, 1000);
//---------------------------------
var name = 'Name';
var mess = 'Mess';
var es5Data = {
name: name,
mess: mess
};
var es6Data = {name, mess};
Если тебе не хочется развиваться как js-программисту(решил сменить специальность, надоел JS или ещё что-то), то единственное, что может мешать - это лень) |
Цитата:
Цитата:
|
Deff,
может есть решение на ксс чтоб нижний блок сам подстраивался и занимал всё пустое пространство снизу и ещё интересно, почему первые три блока всегда синхронно и только четвёртый неуспевает. |
рони,
я что-то не понял к чему эта цитата. Разонравилось программирование? |
Safort, что-то запутанный какой-то ES6 получается, от function одни скобки и ищи их потом в коде :D а этот знак ` ваще имхо бред какой-то, читать код не возможно будет с этими малозаметными символами.
|
Safort,
К примеру , есть вариант иного кредо, не спеша заниматься тем чем нравится, по мере углубления практики, возникает и необходимость в освоении нового, менее быстро, но в итоге большое понимание текущего объема и прыжки на новое, лишь при подходе к границам возможного. Иначе часто наблюдаются сверхсложные решения при наличии более простых |
Rise,
Цитата:
|
рони,
Цитата:
//обсуждение не читал |
Deff,
Цитата:
А так, в общем, согласен. |
Safort, лучше бы var убрали ;)
|
Цитата:
|
Цитата:
|
Цитата:
|
Rise,
Цитата:
|
Цитата:
|
bes,
Цитата:
рони, Цитата:
Пожалуй, я закончу оффтопить, а то как-то не хорошо получается. |
на самом деле, понимаю, переработал наш рони, в новогодние праздники вообще грешно работать :yes:
|
Прикольно, но лучше на чистом JS + CSS3 сделать. :)
|
Ruslan_xDD,
по CSS3 не уточнишь какие части сделать и чтобы ты применил. |
Цитата:
|
Интересно потестить длинное перемещение по ширине экрана.
Т.е переход от мелкого объекта слево, к мелкому объекту справо на экране в 1400 - 1900 пиксел шириной |
Deff,
:-? http://learn.javascript.ru/play/vmjRfb |
рони,
Боковых отслоений на большой скорости нет. <pre>Ксать если сейчас обрамление такого вида, <img src=http://sf.uploads.ru/0RBab.png> и боковых отслоений на большой скорости -нет, то возможно переход к такому обрамлению <img src=http://sf.uploads.ru/fDvuy.png> возможно решит вопрос об отслоении на высоких скоростях снизу Или к такому: <img src=http://sf.uploads.ru/vJnVG.png> </pre> |
Deff,
:thanks: :write: непомогло ... дефект сверху перешёл вправо http://learn.javascript.ru/play/GIIoF |
рони,
Тест на клик<br><br><br><br><br>
<a href="#" style="position:relative;z-index:20;margin-left:70px;" onclick=alert('a')>asdasda</a><br>
<span style="position:relative;z-index:20;margin-left:70px;"onclick=alert('span')>Тест2</span>
<div class="wrap" style="position:fixed;z-index:10;top:0;left:0;width:100%;height:100%;overflow:hidden;">
<div style="border:solid 1200px rgba(0,0,0,0.7);/*Смещаем на border*/margin-top:-1200px;margin-left:-1200px;position:absolute; width:150px;height:60px;/*Устанавливаем позицию окна*/top:90px;left:30px;"></div>
</div>
|
| Часовой пояс GMT +3, время: 10:07. |