Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.03.2017, 21:25
Новичок на форуме
Отправить личное сообщение для Alex.prog.1994 Посмотреть профиль Найти все сообщения от Alex.prog.1994
 
Регистрация: 18.03.2017
Сообщений: 4

Наложение фона на картинку с разных сторон
Здравствуйте, проблема следующая, есть несколько блоков div в них лежат картинки, как сделать эффект наложения полупрозрачного фона и чтоб этот полупрозрачный фон выпадал с той стороны с которой был наведен курсор мышки, т.е. навел на картинку с верху наложение идет с верху, навел на картинку с права наложение идет с права, в этом духе что-то... Заранее спасибо!!
Ответить с цитированием
  #2 (permalink)  
Старый 20.03.2017, 08:52
Аватар для ksa
ksa ksa на форуме
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 11,553

Сначала делаешь все как нужно, но как будто навели на все... Потом настраиваешь ЦСС-стили так, что бы эти наложения были видны только при наведении мыши.
Вот как-то так...
Ответить с цитированием
  #3 (permalink)  
Старый 20.03.2017, 16:31
Новичок на форуме
Отправить личное сообщение для Alex.prog.1994 Посмотреть профиль Найти все сообщения от Alex.prog.1994
 
Регистрация: 18.03.2017
Сообщений: 4

а можно по-подробнее? или код для примера.
Ответить с цитированием
  #4 (permalink)  
Старый 20.03.2017, 16:51
Новичок на форуме
Отправить личное сообщение для Alex.prog.1994 Посмотреть профиль Найти все сообщения от Alex.prog.1994
 
Регистрация: 18.03.2017
Сообщений: 4

В CSS у меня получилось сделать с помощью multi-hover класса, но мне нужно на js т.к. CSS тормозит немного, в общем не устраивает
Ответить с цитированием
  #5 (permalink)  
Старый 20.03.2017, 18:24
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 21,452

Alex.prog.1994,
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
   body {
  width: 90vw;
  height: 90vh;
  background-color: #8A2BE2;

}

.test{  margin: 0;
    top: 100px; left: 100px;
    height: 100px; width: 100px; opacity: .4; background-color: #DBDBDB; position: absolute;
}
 .hot{    overflow: hidden;
          padding: 0
         border: 1px dashed Gray; height: 100px; width: 100px; margin: 100px;
         background-image: url(http://img-fotki.yandex.ru/get/5306/102699435.2e4/0_6a606_5fdbe51b_S.jpg);
         background-size: 100px 100px;
         background-repeat: no-repeat;
         position: relative;
    }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

  <script>
  $(function() {
    var hot = $(".hot");
    hot.on("mouseenter", function(e) {
        var pos = $(this).offset(),
            h = $(this).height(),
            w = $(this).width();
        var x = e.pageX - pos.left - w / 2;
        var y = e.pageY - pos.top - h / 2;
        var from = Math.abs(x) > Math.abs(y) ? x > 0 ? {
            top: 0,
            left: w
        } : {
            top: 0,
            left: -w
        } : y > 0 ? {
            top: h,
            left: 0
        } : {
            top: -h,
            left: 0
        };
        $("div", this).stop(true, true).css(from).animate({
            top: 0,
            left: 0
        }, 800)
    }).on("mouseleave", function(e) {
        var pos = $(this).offset(),
            h = $(this).height(),
            w = $(this).width();
        var x = e.pageX - pos.left - w / 2;
        var y = e.pageY - pos.top - h / 2;
        var to = Math.abs(x) > Math.abs(y) ? x > 0 ? {
                left: w
            } : {
                left: -w
            } : y > 0 ? {
                top: h
            } : {
                top: -h
            };
        $("div", this).stop(true, true).animate(to, 500)
    })
});
  </script>
</head>

<body>
 <div class="hot"><div class="test"></div></div>
</body>

</html>

Последний раз редактировалось рони, 20.03.2017 в 19:58.
Ответить с цитированием
  #6 (permalink)  
Старый 21.03.2017, 01:28
Новичок на форуме
Отправить личное сообщение для Alex.prog.1994 Посмотреть профиль Найти все сообщения от Alex.prog.1994
 
Регистрация: 18.03.2017
Сообщений: 4

Вот это прям то что мне было нужно, огромное спасибо за помощь , неделю искал не мог найти то что нужно
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Про картинку в качестве фона Ahterknica Элементы интерфейса 47 16.03.2013 18:14
Смен фона форума по ссылки на картинку lyamon4ik Элементы интерфейса 6 17.01.2013 13:25