Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Дополнить код (https://javascript.ru/forum/jquery/83339-dopolnit-kod.html)

рони 19.11.2021 16:08

Сергей Ракипов,
<!DOCTYPE html>
<html lang="ru_RU">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <style>
        body {
            background: #000;
            font-family: Verdana;
            font-size: 16px;
        }

        .blok {
            margin: 40px 40px 40px 40px;
            display: flex;
            align-items: center;
        }

        .tekst {
            margin: 0px 20px 0px 0px;
        }

        .tekst a {
            color: #22AD1D;
        }

        .tekst a:hover {
            color: #fff;
        }

        .ikonka {
            width: 94px;
            height: 94px;
        }

        .ikonka_pryas {
            background-image: url(http://rakipov.ru/files/ikonka_prais_6.svg);
            background-repeat: no-repeat;
            background-position: center;
            background-size: 100%;
        }

        @media (max-width:640px) {
            .ikonka {
                width: 64px;
                height: 64px;
            }
            .ikonka_pryas {
                background-image: url(http://rakipov.ru/files/ikonka_prais_9.svg);
                background-repeat: no-repeat;
                background-position: center;
                background-size: 100%;
            }
        }
    </style>
    <script>
        jQuery(document).ready(function($) {
            [8, 10].forEach(n => {
                let img = new Image();
                img.src = `http://rakipov.ru/files/ikonka_prais_${n}.svg`;
            }); //предзагрузка картинок для  hover, чтоб иконка не "прыгала", по желанию
            $('.ssilka_prays').hover(function() {
                // навели мышь на элемент
                let n = window.matchMedia('(min-width: 640px)').matches ? 8 : 10;
                let url = `url(http://rakipov.ru/files/ikonka_prais_${n}.svg)`;
                $('.ikonka_pryas').css('background-image', url);
            }, function() {
                // убрали мышь с элемента
                $('.ikonka_pryas').css('background-image', '');
            });
        });
    </script>
</head>

<body>
    <div class="blok">
        <div class="tekst">
            <a href="#" class="ssilka_prays">ПРАЙС ЛИСТ</a>
        </div>
        <div class="ikonka ikonka_pryas">
        </div>
    </div>
</body>

</html>

voraa 19.11.2021 16:08

Кошмарный код.
Вот вы повесили на ssilka_prays события mouseover и mouseout.
Затем, если изменится размер опять вызовется ваша функция ssilka и на этот элемент опять будут вешаться те же события но с другими функциями. С другими, даже если будет выполняться то же условие, ведь эти функции заново определяются, и это будут уже совсем другие функции.
Но addEventListener не отменяет предыдущие обработчики, а добавляет.
Т.е в конце концов может случиться так, что у вас будет определено 100500 одинаковых функций и все они будут назначены, как обработчики событий, и будут выполняться последовательно при наступлении события.

Это я писал про код Сергей Ракипов

рони 19.11.2021 16:11

Цитата:

Сообщение от Сергей Ракипов
И у меня дополнительный вопрос а почему иногда иконка мигает,

попробовал добавить предзагрузку картинок, может частично пропадёт мигание, если нет то к специалистам по css.

ksa 19.11.2021 16:39

Чтобы иконки не "мигали" можно использовать подход со "спрайтами"...
https://learn.javascript.ru/css-sprite

Сергей Ракипов 20.11.2021 07:05

рони,
Как всегда огромное спасибо !

Сергей Ракипов 20.11.2021 07:05

voraa,
А как правильно нужно было сделать ?

Сергей Ракипов 20.11.2021 07:06

ksa,
Спасибо вот это полезно

Сергей Ракипов 20.11.2021 07:09

рони,
А вот еще такой вопрос. Это лучше сделать в модельный файл и подгружать его или вот так куском кода на каждую страницу

??

рони 20.11.2021 07:34

Сергей Ракипов,
делать отдельный модуль, думаю нецелесообразно,
но если написать более универсальный код, для таких пар, тогда возможно.

Сергей Ракипов 20.11.2021 08:14

Попробовал со спрайтами и понял что это нужная тема которую стоит использовать. И моего понимание хватило не на много. Можете дополнить код что бы он работал так как же как и код выше, только со сдвигом, я не много его написал. Но ни понимаю синтаксиса когда нужно добавлять условия на разрешение 640 px

<!DOCTYPE html>
<html lang="ru_RU">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <style>
        body{
            background: #000;
            font-family: Verdana;
            font-size: 16px;
        }
        .blok {
            margin: 40px 40px 40px 40px;
            display: flex;
            align-items: center;
        }
        .tekst {
            margin: 0px 20px 0px 0px;
        }
        .tekst a {
            color:#22AD1D;
        }
        .tekst a:hover {
            color:#fff;
        }
        .ikonka {
            width: 94px;
            height: 94px;
        }
        .ikonka_pryas {
            background-image: url(http://rakipov.ru/files/prays_94.png);
            background-repeat:  no-repeat; 
            background-position:0px ;
        }
        .ikonka_pryas:hover {
            background-image: url(http://rakipov.ru/files/prays_94.png);
            background-repeat:  no-repeat; 
            background-position:-94px;
        }
        @media (max-width:640px){
            .ikonka {
                width: 64px;
                height: 64px;
        }
        .ikonka_pryas {
            background-image: url(http://rakipov.ru/files/prays_64.png);
            background-repeat:  no-repeat; 
            background-position:0px;
        }
        .ikonka_pryas:hover {
            background-image: url(http://rakipov.ru/files/prays_64.png);
            background-repeat:  no-repeat; 
            background-position:-64px;
        }
        }
    </style>

</head>
<body>
    <div class="blok">
        <div class="tekst">
            <a href="#" class="ssilka_prays">ПРАЙС ЛИСТ</a>
        </div>
        <div class="ikonka ikonka_pryas">
            
        </div>
    </div>
    <script>
        jQuery(document).ready(function($) {
            $('.ssilka_prays').hover(function() {
                // навели мышь на элемент
                $('.ikonka_pryas').css('background-position', '-94px');
            }, function() {
                // убрали мышь с элемента
                $('.ikonka_pryas').css('background-position', '0px');
            });
        });
    </script>
</body>
</html>


Часовой пояс GMT +3, время: 04:23.