Javascript.RU

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

плагин для создания эффекта затемнения всей страницы кроме выбранного элемента 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 в 18:24.
Ответить с цитированием
  #2 (permalink)  
Старый 03.01.2015, 13:21
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,220

Cимпот, в Опере 12.16 ниже освещенного прямоугольника, в процессе быстрого перемещения освещённости,
бежит какая -то линия в ширину экрана: http://sf.uploads.ru/VqDp1.jpg
(Ощущение, что подгон затемнённого низа запаздывает к перемещению боковушек)
Проверил на всех кнопках теста. При медленных перемещениях подобного нет.

Иногда по кликам на кнопки и картинки выскакивает такое: http://sf.uploads.ru/JoSWf.jpg

Последний раз редактировалось Deff, 03.01.2015 в 13:38.
Ответить с цитированием
  #3 (permalink)  
Старый 03.01.2015, 13:54
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,220

Ксать как идея: можно использовать такую картинку с дыркой нужной прозрачностью и типоразмером по х - y c позицией fixed http://sf.uploads.ru/obfRz.png
Ответить с цитированием
  #4 (permalink)  
Старый 03.01.2015, 13:59
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,914

Сообщение от Deff
выскакивает такое
Callback на кнопку Test no animate и div class=options или этот Callback лезет по иным элементам?
Сообщение от Deff
бежит какая -то линия
это есть -- как согласовать анимацию на быстрых скоростях ... думаю )))
Ответить с цитированием
  #5 (permalink)  
Старый 03.01.2015, 14:08
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,220

Сообщение от рони Посмотреть сообщение
Callback на кнопку Test no animate и div class=options или этот Callback лезет по иным элементам?
Не присматривался, просто потыкал
это есть -- как согласовать анимацию на быстрых скоростях ... думаю )))
ну лучше на больших скоростях делать анимацию с наползанием(более тёмное менее заметно), или идея про картинку, она изначально два экрана по ширине и по высоте, дырка в центре думаю 5х5px (меньше наверно элементов не будет)
(объём картинки маленький - менее 10кб)
Ксать мон наверно и канвас приспособить

Последний раз редактировалось Deff, 03.01.2015 в 14:16.
Ответить с цитированием
  #6 (permalink)  
Старый 03.01.2015, 16:30
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,220

Во еще идея, более интересная , чем картинка
DIV c полупрозрачными бордерами, которые высотой в экран(верхний - нижний)
и шириной в экран(левый - правый) (его вставить в неподвижный div c overflow:hidden по размеру экрана)
Тогда проблемы со скорость. отпадут, посколь перемещаем лишь единственный элемент и задание ширины высоты элемента(DIV ) много проще

Последний раз редактировалось Deff, 03.01.2015 в 16:34.
Ответить с цитированием
  #7 (permalink)  
Старый 03.01.2015, 17:38
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,914

Deff,
перекрывают доступ к элементу
Ответить с цитированием
  #8 (permalink)  
Старый 03.01.2015, 17:55
Аватар для Safort
Профессор
Отправить личное сообщение для Safort Посмотреть профиль Найти все сообщения от Safort
 
Регистрация: 22.12.2013
Сообщений: 1,856

У меня 2 скромных предложения:
1. Переписать на ES6
2. Выложить на Гитхаб/Битбакет
Ответить с цитированием
  #9 (permalink)  
Старый 03.01.2015, 18:01
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,745

Сообщение от рони
Deff,
перекрывают доступ к элементу
сильно не вникал
Сворачивание окна по клику в любом месте окна браузера...
Ответить с цитированием
  #10 (permalink)  
Старый 03.01.2015, 19:06
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,914

Сообщение от Safort
У меня 2 скромных предложения:
1. Переписать на ES6
2. Выложить на Гитхаб/Битбакет
для меня это из разряда фантастики ...
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
onClick эвент для всего документа, кроме отдельно взятого элемента DOM el_erizo Events/DOM/Window 5 19.03.2010 14:09