Maison Effets spéciaux JS effets jQuery Effets spéciaux d'animation de bordure d'image au survol de la souris jQuery

Effets spéciaux d'animation de bordure d'image au survol de la souris jQuery

Effets spéciaux d'animation de bordure d'image au survol de la souris jQuery

Effets spéciaux d'animation de bordure d'image au survol de la souris jQuery

code js

<script>
    $(function(){
//        边框效果--移入
        function biankuang(){
            $('.biankuang_1').stop(true).animate({
                height:'305px'
            },300)
            $('.biankuang_2').stop(true).delay(300).animate({
                width:'360px'
            },300)
            $('.biankuang_3').stop(true).animate({
                height:'305px'
            },300)
            $('.biankuang_4').stop(true).delay(300).animate({
                width:'360px'
            },300)
        }
//        边框效果--移出
        function biankuang1(){

            $('.biankuang_1').stop(true).delay(100).animate({
                height:'0px'
            },100)
            $('.biankuang_2').stop(true).animate({
                width:'0px'
            },100)
            $('.biankuang_3').stop(true).delay(100).animate({
                height:'0px'
            },100)
            $('.biankuang_4').stop(true).animate({
                width:'0px'
            },100)
        }
//        触发

            $('.cn_gobuy').hover(
                    function () {
                            $('.text_gobuy').addClass('text_gobuy_show');
                            $('.search_y').animate({left:'150',opacity:1},300);
                        biankuang();
                    },
                    function () {
                        $('.text_gobuy').removeClass('text_gobuy_show');
                        $('.search_y').animate({left:'100',opacity:0},300);
                        biankuang1();
                    }
            );

    })

</script>

L'effet d'animation de bordure d'image au survol de la souris jQuery est un code d'animation qui affiche une bordure rouge lorsque la souris déplace l'image du produit.

Clause de non-responsabilité

Toutes les ressources de ce site proviennent d'internautes ou sont réimprimées par les principaux sites de téléchargement. Veuillez vérifier vous-même l'intégrité du logiciel ! Toutes les ressources de ce site sont uniquement à titre de référence d'apprentissage. Merci de ne pas les utiliser à des fins commerciales. Sinon, vous serez responsable de toutes les conséquences ! En cas d'infraction, veuillez nous contacter pour la supprimer. Coordonnées : admin@php.cn

Article connexe

Comment obtenir des effets spéciaux au survol de la souris via CSS Comment obtenir des effets spéciaux au survol de la souris via CSS

20 Oct 2023

Comment obtenir des effets spéciaux au survol de la souris grâce à CSS CSS est un langage de feuille de style utilisé pour embellir et personnaliser les pages Web. Il peut rendre nos pages Web plus vivantes et plus attrayantes. Parmi eux, la mise en œuvre d'effets spéciaux lorsque la souris survole CSS est un moyen courant d'ajouter de l'interactivité et de la dynamique à la page Web. Cet article présentera quelques effets de survol courants et fournira des exemples de code correspondants. Mettre en surbrillance la couleur d'arrière-plan Lorsque la souris survole un élément, la couleur d'arrière-plan peut être modifiée pour mettre en évidence la position de l'élément. .élément:hov

Utilisez des pseudo-classes CSS pour obtenir des effets d'animation sur les boutons au survol de la souris Utilisez des pseudo-classes CSS pour obtenir des effets d'animation sur les boutons au survol de la souris

28 Jan 2021

Les pseudo-classes CSS sont utilisées pour ajouter des effets spéciaux aux sélecteurs. Cet article vous présentera comment utiliser les pseudo-classes CSS pour animer le passage de la souris sur le bouton.

Partagez un exemple d'utilisation de CSS pur pour afficher des effets d'image au survol de la souris Partagez un exemple d'utilisation de CSS pur pour afficher des effets d'image au survol de la souris

09 Mar 2017

Ici, je voudrais vous recommander un exemple d'utilisation de CSS pur pour obtenir l'effet d'affichage d'images au survol de la souris. Cela est démontré de la manière la plus simple d'ajouter un survol en déplaçant la souris sur la balise tr. qui en a besoin peut s'y référer.

Comment définir le délai dans jquery Comment définir le délai dans jquery

26 Apr 2023

Dans le développement front-end, nous devons souvent utiliser jQuery pour gérer certains effets interactifs et effets d'animation, tels que les effets d'animation lorsque la souris survole, les effets d'animation lors du chargement de la page, etc. Mais il faut parfois fixer un délai pour que ces effets puissent mieux s'exprimer. Alors, comment jQuery définit-il un délai ? Cet article présentera ce problème en détail. 1. Méthode de retard dans jQuery Dans jQuery, l'effet de retard peut être facilement obtenu en utilisant la méthode delay(). La méthode delay() peut être utilisée

Collection d'effets Jquery pour créer des effets spéciaux de score d'examen de santé informatique avec le code source download_jquery Collection d'effets Jquery pour créer des effets spéciaux de score d'examen de santé informatique avec le code source download_jquery

16 May 2016

Cet article vous présente l'encyclopédie des effets jquery pour créer des effets spéciaux pour les résultats des examens de santé informatiques et est accompagné de téléchargements de code source. Les amis intéressés par l'encyclopédie des effets jquery peuvent apprendre ensemble.

La fonction d'animation de jQuery réalise une animation de commutation d'image et de texte effect_jquery La fonction d'animation de jQuery réalise une animation de commutation d'image et de texte effect_jquery

16 May 2016

animate() est une méthode en jquery qui peut être utilisée pour créer des effets d'animation. La méthode animate() en jquery ajoute de bons effets visuels à cette page.

les effets de frappe jquery arrêtent de supprimer les effets de frappe jquery arrêtent de supprimer

23 May 2023

Avec la popularité d'Internet, l'application des effets de frappe est de plus en plus répandue et les effets de frappe jquery sont devenus le premier choix de nombreux développeurs de sites Web. Cependant, lors du processus de réalisation de cet effet spécial, des problèmes détaillés affectent souvent l'expérience utilisateur, comme le problème de la suppression des effets spéciaux de frappe. Cet article explique comment utiliser les effets de frappe jquery pour arrêter la suppression et améliorer l'expérience de navigation de l'utilisateur. L'implémentation des effets de frappe jquery peut utiliser des plug-ins prêts à l'emploi, tels que typed.js et jQuery.Typewriter. Ces plug-ins sont basés sur jquery

jQuery implémente l'audition des effets sonores pour le clic de la souris sur event_jquery jQuery implémente l'audition des effets sonores pour le clic de la souris sur event_jquery

16 May 2016

Cet article présente l'audition des effets sonores de l'événement de clic de souris jquery, les effets spéciaux obtenus à l'aide du plug-in jquery. Les amis intéressés peuvent apprendre ensemble.

jquery implémente des effets de défilement numérique jquery implémente des effets de défilement numérique

24 Apr 2018

Cette fois, je vais vous présenter jquery pour réaliser des effets spéciaux de défilement numérique. Quelles sont les précautions à prendre pour jquery pour réaliser des effets spéciaux de défilement numérique ?

See all articles See all articles

Hot Tools

jQuery2019 Effets spéciaux d'animation de feux d'artifice de confession de la Saint-Valentin

jQuery2019 Effets spéciaux d'animation de feux d'artifice de confession de la Saint-Valentin

Un effet spécial d'animation de feux d'artifice de confession jQuery pour la Saint-Valentin très populaire sur Douyin, adapté aux programmeurs et aux geeks techniques pour exprimer leur amour à la fille qu'ils aiment. Peu importe que vous choisissiez de l'aimer ou non, vous devez finalement être d'accord.

modèle d'interface de connexion animée réactive layui

modèle d'interface de connexion animée réactive layui

modèle d'interface de connexion animée réactive layui

520 effets spéciaux d'animation Web de confession de la Saint-Valentin

520 effets spéciaux d'animation Web de confession de la Saint-Valentin

Animation de confession jQuery pour la Saint-Valentin, animation d'arrière-plan de 520 confessions

Cool page de connexion au système

Cool page de connexion au système

Cool page de connexion au système

Lecteur de musique à cassette HTML5-LECTEUR DE CASSETTE

Lecteur de musique à cassette HTML5-LECTEUR DE CASSETTE

Lecteur de musique à cassette HTML5-LECTEUR DE CASSETTE