Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 13.07.2021, 06:40
Новичок на форуме
Отправить личное сообщение для Sanny333 Посмотреть профиль Найти все сообщения от Sanny333
 
Регистрация: 21.02.2021
Сообщений: 7

Загрузка прогресс бара со сменой цвета
сайт https://xn----7sbbb7bbx7alc6h.xn--p1ai/

раздел Проекты.

Вместе с наведением на картинку загружается горизонтальный прогесс голубым (before) элемент. Как сделеать чтоб он синхронно так же с текстом спан менял цвет?

например: случайно загружется фиолетовый в спан и горизонтальный ползунок загрузки тоже становится фиолетовым при наведении на картинку. логика - при навденении на картинку цвет меняется синхронно и у ползунка загрузки и у span вместе.


Я пробую но че то не алё

let img = document.querySelectorAll('.portfolio__bl img');
            let span = getComputedStyle(document.querySelectorAll('.portfolio__bl__img'), ':before');
            let colors = ['#8d67c3', '#f376a2', '#4263a8', '#19b4ee'];
             
            for(let i = 0; i < img.length; i++) {
                span[i].dataset.current = 0;
                img[i].addEventListener('mouseover', function () {
                    span[i].style.backgroundColor = colors[span[i].dataset.current];
                    span[i].dataset.current++;
                    if (span[i].dataset.current >= colors.length) {
                        span[i].dataset.current = 0;
                    }
                });
                img[i].addEventListener('mouseout', function () {
                    span[i].style.backgroundColor = '';
 
                });
            }


css

.portfolio__bl__img {
margin-bottom: 20px;
overflow: hidden;
position: relative;
width: 400px;

}

.portfolio__bl__img::before {
content: '';
position: absolute;
background-color: #19b4ee;
-webkit-transition: 0.25s all ease-in-out;
-o-transition: 0.25s all ease-in-out;
transition: 0.25s all ease-in-out;
height: 7px;
width: 0;
bottom: 0;
right: 0;
left: 0;
}

.portfolio__bl__img:hover::before {
width: 400px;
}
Изображения:
Тип файла: jpg 2021-07-12_154448.jpg (60.5 Кб, 1 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 13.07.2021, 07:37
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,978

Sanny333,
сделали бы минимальный макет целиком, а не куски кода.
например:
[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
Ответить с цитированием
  #3 (permalink)  
Старый 13.07.2021, 09:45
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,978

Sanny333,
<!DOCTYPE html>

<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <base href="https://xn----7sbbb7bbx7alc6h.xn--p1ai/" />
    <style type="text/css">
        body {
            display: flex;
            flex-wrap: wrap;
            justify-content:  space-around;
        }

        .portfolio__bl__img {
            margin-bottom: 20px;
            overflow: hidden;
            position: relative;
            width: 200px;
            height: 250px;
        }

        .portfolio__bl__img::before {
            content: '';
            position: absolute;
            background-color: #19b4ee;
            -webkit-transition: 0.25s all ease-in-out;
            -o-transition: 0.25s all ease-in-out;
            transition: 0.25s all ease-in-out;
            height: 7px;
            width: 0;
            bottom: 0;
            right: 0;
            left: 0;
        }

        .portfolio__bl:hover .portfolio__bl__img::before {
            width: 200px;
            background-color: var(--color, #19b4ee);

        }


        .portfolio__bl:hover .portfolio__bl__title>span {
            background-color: var(--color, #19b4ee);

        }

        .portfolio__bl:hover a.portfolio__cont__in {
            text-decoration: none;
            color: rgba(255, 255, 255, 1);
        }

        .portfolio__bl a.portfolio__cont__in {
            line-height: 1;
            text-align: center;
        }

        .portfolio__bl {
            width: 200px;
        }
    </style>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const colors = ['#8d67c3', '#f376a2', '#4263a8', '#19b4ee'],
                len = colors.length;
            document.querySelectorAll(".portfolio__bl").forEach((div, i) =>{
            i = 0;
            div.addEventListener("mouseenter", _ => div.style.setProperty("--color", colors[i++ % len]))
            });
        });
    </script>
</head>

<body>
    <div class="portfolio__bl wow slideInUp" style="visibility: visible; animation-name: slideInUp;">
        <a href="#" class="portfolio__cont__in">
            <div class="portfolio__bl__img">
                <img class="lazy" data-src="/images/portfolio/sarmat2.jpg" alt="Продвмжение ЖК «Сармат»" src="/images/portfolio/sarmat2.jpg">
            </div>
            <div class="portfolio__bl__title">
                <span data-current="0" style="">Комплексное продвижение застройщика с первого этапа проектирования</span>
            </div>
        </a>
    </div>
    <div class="portfolio__bl wow slideInUp" style="visibility: visible; animation-name: slideInUp;">
        <a href="#" class="portfolio__cont__in">
            <div class="portfolio__bl__img">
                <img class="lazy" data-src="/images/portfolio/sarmat2.jpg" alt="Продвмжение ЖК «Сармат»" src="/images/portfolio/sarmat2.jpg">
            </div>
            <div class="portfolio__bl__title">
                <span data-current="0" style="">Комплексное продвижение застройщика с первого этапа проектирования</span>
            </div>
        </a>
    </div>
    <div class="portfolio__bl wow slideInUp" style="visibility: visible; animation-name: slideInUp;">
        <a href="#" class="portfolio__cont__in">
            <div class="portfolio__bl__img">
                <img class="lazy" data-src="/images/portfolio/sarmat2.jpg" alt="Продвмжение ЖК «Сармат»" src="/images/portfolio/sarmat2.jpg">
            </div>
            <div class="portfolio__bl__title">
                <span data-current="0" style="">Комплексное продвижение застройщика с первого этапа проектирования</span>
            </div>
        </a>
    </div>
    <div class="portfolio__bl wow slideInUp" style="visibility: visible; animation-name: slideInUp;">
        <a href="#" class="portfolio__cont__in">
            <div class="portfolio__bl__img">
                <img class="lazy" data-src="/images/portfolio/sarmat2.jpg" alt="Продвмжение ЖК «Сармат»" src="/images/portfolio/sarmat2.jpg">
            </div>
            <div class="portfolio__bl__title">
                <span data-current="0" style="">Комплексное продвижение застройщика с первого этапа проектирования</span>
            </div>
        </a>
    </div>
    <div class="portfolio__bl wow slideInUp" style="visibility: visible; animation-name: slideInUp;">
        <a href="#" class="portfolio__cont__in">
            <div class="portfolio__bl__img">
                <img class="lazy" data-src="/images/portfolio/sarmat2.jpg" alt="Продвмжение ЖК «Сармат»" src="/images/portfolio/sarmat2.jpg">
            </div>
            <div class="portfolio__bl__title">
                <span data-current="0" style="">Комплексное продвижение застройщика с первого этапа проектирования</span>
            </div>
        </a>
    </div>
    <div class="portfolio__bl wow slideInUp" style="visibility: visible; animation-name: slideInUp;">
        <a href="#" class="portfolio__cont__in">
            <div class="portfolio__bl__img">
                <img class="lazy" data-src="/images/portfolio/sarmat2.jpg" alt="Продвмжение ЖК «Сармат»" src="/images/portfolio/sarmat2.jpg">
            </div>
            <div class="portfolio__bl__title">
                <span data-current="0" style="">Комплексное продвижение застройщика с первого этапа проектирования</span>
            </div>
        </a>
    </div>
</body>

</html>

Последний раз редактировалось рони, 13.07.2021 в 17:30.
Ответить с цитированием
  #4 (permalink)  
Старый 13.07.2021, 16:28
Новичок на форуме
Отправить личное сообщение для Sanny333 Посмотреть профиль Найти все сообщения от Sanny333
 
Регистрация: 21.02.2021
Сообщений: 7

Поставил. Цвета должны каждый раз меняться при наведении на каждый portfolio__bl

А они просто разноцветные стали, логика - навожу на каждое отдельно фото и при каждом наведении меняется цвет (цвета заданные в цикле).
Ответить с цитированием
  #5 (permalink)  
Старый 13.07.2021, 17:31
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,978

Сообщение от Sanny333
при каждом наведении меняется цвет
добавлено.
Ответить с цитированием
  #6 (permalink)  
Старый 14.07.2021, 09:11
Новичок на форуме
Отправить личное сообщение для Sanny333 Посмотреть профиль Найти все сообщения от Sanny333
 
Регистрация: 21.02.2021
Сообщений: 7

Спасибо. И подскажите как у всех span сохранять color: #fff при наведении (цвет текста)
Изображения:
Тип файла: jpg 2021-07-14_091741.jpg (13.9 Кб, 2 просмотров)
Ответить с цитированием
  #7 (permalink)  
Старый 14.07.2021, 09:47
Новичок на форуме
Отправить личное сообщение для Sanny333 Посмотреть профиль Найти все сообщения от Sanny333
 
Регистрация: 21.02.2021
Сообщений: 7

разобрался.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Нужно поправить скрипт прогресс бара. John S Элементы интерфейса 0 20.08.2020 12:57
Как добиться, чтобы прогресс бар в модальном окне запускался после клика по ссылке да Lefseq Общие вопросы Javascript 3 06.10.2019 20:39
Прогресс бар. Что поменять? massimo_pazzi Элементы интерфейса 1 16.01.2015 09:13