Maison > interface Web > tutoriel HTML > Utilisez html+css+js pour obtenir un effet simple

Utilisez html+css+js pour obtenir un effet simple

王林
Libérer: 2020-11-06 16:31:54
avant
4274 Les gens l'ont consulté

Utilisez html+css+js pour obtenir un effet simple

Quand on parcourt des articles sur d'autres sites internet, on peut souvent constater un effet de like collection en fin d'article, ce qui est très intéressant. Aujourd'hui, nous le ferons nous-mêmes pour obtenir cet effet.

(Recommandation vidéo d'apprentissage : tutoriel vidéo HTML)

style CSS

.like{ 
font-size:66px;  color:#ccc; cursor:pointer;}
.cs{color:#f00;}
Copier après la connexion

contenu html

<p class="like">&#10084;</p>
Copier après la connexion

code js

<script typet="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
    <script>
        $(function () {            
            $(".like").click(function () {
                $(this).toggleClass(&#39;cs&#39;);                
            })
        })
    </script>
Copier après la connexion

Affichage de l'effet :

Utilisez html+css+js pour obtenir un effet simple

Résumé

Remarque : En fonctionnement réel, les données de fonctionnement en arrière-plan doivent être liées, mais c'est tout de même simple de.

Tutoriel recommandé : Tutoriel HTML

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:csdn.net
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal