Да, так и сделал.
Еще такой вопрос. Чтобы не лепить новую тему, напишу здесь. Скажите, можно ли прилепить к этому скрипту функцию, в которой, при нажатии/наведении на один из этих блоков появлялась тень у основного контейнера. Или может сделать селект, в котором можно будет выбрать опцию с одной из этих теней и они будут менять тень основного блока. Так, наверное, даже проще и лучше будет. https://jsfiddle.net/d1pj6k1m/ Заранее спасибо. |
Цитата:
|
Рони, прошу прощения, не верно сформулировал. Я пытаюсь связать эти блоки с основным контейнером, чтобы при выборе одного из них в селекте(или наведении на блоки), менялась тень основного контейнера. Набросок кода https://jsfiddle.net/d1pj6k1m/ Что-то вроде демонстрации теней на основном контейнере.
|
Как-то так?
<style> div { display: inline-block; width: 100px; height: 100px; margin: 20px; text-align: center; line-height: 100px; } .block-1, .block-2, .block-11, .block-101, .block-301 { box-shadow: 10px 20px 30px gray; height: 100px; } .content { display: block; width: 96%; height: 150px; background: #fafafa; } </style> <div class="content"> <div class="blocks block-1">1</div> <div class="blocks block-2">2</div> <div class="blocks block-11">11</div> <div class="blocks block-101">101</div> <div class="blocks block-301">301</div> </div> <script> [].forEach.call(document.querySelectorAll('.block-1'), function(node) { var bsh = getComputedStyle(node).boxShadow; node.style.boxShadow = "inset "+bsh; }); [].forEach.call(document.querySelectorAll('.blocks'), function(node) { node.onmouseover = function() { document.querySelector('.content').style.boxShadow = getComputedStyle(node).boxShadow; } node.onmouseleave = function() { document.querySelector('.content').style.boxShadow = ""; } }); </script> |
Не совсем. Еще раз прошу прощения, не верно сформулировал задачу, так как не представляю как это лучше сделать. Сам запутался.
С предыдущим скриптом разобрался. Задача теперь в другом. Вот код https://jsfiddle.net/q2jgymq8/ В нем есть основной контейнер, блок с опциями и блоки, у которых у каждого свое свойство (в данном случае тень). Можно ли сделать так, чтобы при выборе какой-нибудь опции, появлялась/менялась тень у основного контейнера, в соответствии с тенью блоков? |
madeas,
Изменил пример в пост№14 |
С селектором
<style> div { display: inline-block; width: 100px; height: 100px; margin: 20px; text-align: center; line-height: 100px; } .block-1 { box-shadow: 1px 12px 19px gray; height: 100px; } .block-2 { box-shadow: 1px 12px 19px gray; height: 100px; } .block-11 { box-shadow: 0px 2px 30px gray; height: 100px; } .block-101 { box-shadow: 1px 20px 90px gray; height: 100px; } .block-301 { box-shadow: 10px 2px 190px gray; height: 100px; } .content { display: block; display: flex; display: -webkit-flex; width: 96%; height: 150px; background: #fafafa; } .block-select { border: 0; outline: none; } </style> <div class="content"> <p> <select size="6" multiple class="block-select"> <option disabled>Выберите блок</option> <option>block-1</option> <option selected>block-2</option> <option>block-11</option> <option>block-101</option> <option>block-301</option> </select> </p> <div class="block-1">1</div> <div class="block-2">2</div> <div class="block-11">11</div> <div class="block-101">101</div> <div class="block-301">301</div> </div> <script> [].forEach.call(document.querySelectorAll('.block-1'), function(node) { var bsh = getComputedStyle(node).boxShadow; node.style.boxShadow = "inset "+bsh; }); document.querySelector('select').onchange = function() { var node = document.querySelector("." + this.value); document.querySelector('.content').style.boxShadow = getComputedStyle(node).boxShadow; }; </script> |
Да. Спасибо большое. А можно реализовать такое при помощи этого? Задействовать те же блоки, но не связывая скрипты, которые мы брали ранее.
<select size="6" multiple class="block-select"> <option disabled>Выберите блок</option> <option value=".block-1">block-1</option> <option selected value=".block-2">block-2</option> <option value=".block-11">block-11</option> <option value=".block-101">block-101</option> <option value=".block-301">block-301</option> </select> |
madeas,
Пост17 видели? |
Спасибо большое! Можно закрывать.
|
Часовой пояс GMT +3, время: 01:29. |