Heim > Web-Frontend > HTML-Tutorial > Verwenden Sie HTML+CSS+JS, um einen einfachen Like-Effekt zu erzielen

Verwenden Sie HTML+CSS+JS, um einen einfachen Like-Effekt zu erzielen

王林
Freigeben: 2020-11-06 16:31:54
nach vorne
4229 Leute haben es durchsucht

Verwenden Sie HTML+CSS+JS, um einen einfachen Like-Effekt zu erzielen

Wenn wir Artikel auf anderen Websites durchsuchen, können wir am Ende des Artikels häufig einen Like-Collection-Effekt sehen, was sehr interessant ist. Heute werden wir es selbst tun, um diesen Effekt zu erzielen.

(Empfehlung für Lernvideos: HTML-Video-Tutorial)

CSS-Stil

.like{ 
font-size:66px;  color:#ccc; cursor:pointer;}
.cs{color:#f00;}
Nach dem Login kopieren

HTML-Inhalt

<p class="like">&#10084;</p>
Nach dem Login kopieren

js-Code

<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>
Nach dem Login kopieren

Effektanzeige:

Verwenden Sie HTML+CSS+JS, um einen einfachen Like-Effekt zu erzielen

Zusammenfassung

Hinweis: Es muss im realen Betrieb verknüpft werden Der Hintergrundbetrieb von Daten ist immer noch derselbe und einfach.

Empfohlenes Tutorial: HTML-Tutorial

Das obige ist der detaillierte Inhalt vonVerwenden Sie HTML+CSS+JS, um einen einfachen Like-Effekt zu erzielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:csdn.net
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage