Плагин для jquery ... идея взята тут
https://github.com/zzarcon/focusable
жмите на посмотреть чтоб увидеть возможности плагина, потом можно покликать то что выделено красным контуром ... замечания пожелания приветствутся ...
<!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>