Показать сообщение отдельно
  #1 (permalink)  
Старый 03.01.2015, 06:01
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

плагин для создания эффекта затемнения всей страницы кроме выбранного элемента DOM
Плагин для 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>

Последний раз редактировалось рони, 06.02.2017 в 19:24.
Ответить с цитированием