Heim >Web-Frontend >js-Tutorial >jQuery und CSS3 implementieren ähnliche Funktionen

jQuery und CSS3 implementieren ähnliche Funktionen

不言Original: 2018-06-25 17:49:071738Durchsuche

In diesem Artikel wird hauptsächlich der Beispielcode von jQuery + CSS3 zur Implementierung der Like-Funktion vorgestellt. Hat einen sehr guten Referenzwert. Schauen wir es uns gemeinsam an

Rendering:

Bild (1) Ausgangsbild

Bild (2) Nach dem Klicken auf

lautet der Code wie folgt:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery+CSS3文章点赞功能代码</title>
<style type="text/css">
body{
 margin:0;
 padding:0;
}
.text-content{
 min-width:1180px;
 border-bottom: 1px solid #e7e7e7;
 border-top: 1px solid #e7e7e7;
 background: #f4f4f4;
}
.text-content h1{
 text-align:center;
 font-size: 20px;
 padding-top: 50px;
 color: #EB4F38;
}
.text-content p{
 padding: 10px 100px 40px 100px;
 clear: both;
 color: #333;
 display: block;
 font-family: "Microsoft Yahei","Helvetica Neue",Helvetica,Arial,sans-serif;
 font-size: 16px;
 line-height: 1.6;
 margin: 0 auto;
 outline: medium none;
 position: relative;
 width: 900px;
 word-wrap: break-word;
}
.praise{
 width:40px;
 height:40px;
 margin: 50px auto;
 cursor: pointer;
 font-size: 12px;
 text-align:center;
 position: relative;
}
#praise{
 display:block;
 width:40px;
 height:40px;
 margin:0 auto;
}
#praise-txt{
 height:25px;
 line-height:25px;
 display: block;
}
.praise img{
 width:40px;
 height:40px;
 display:block;
 margin: 0 auto;
}
.praise img.animation{
 animation: myfirst 0.5s;
 -moz-animation: myfirst 0.5s;  
 -webkit-animation: myfirst 0.5s;  
 -o-animation: myfirst 0.5s;  
}
#add-num{
 display:none;
}
#add-num .add-animation{
 color: #000;
 position:absolute;
 top:-15px;
 left: 10px;
 font-size: 15px;
 opacity: 0;
 filter: Alpha(opacity=0);
 -moz-opacity:0;
 animation: mypraise 0.5s ;
 -moz-animation: mypraise 0.5s ;  
 -webkit-animation: mypraise 0.5s ;  
 -o-animation: mypraise 0.5s ;  
 font-style:normal;
}
.praise .hover , #add-num .add-animation.hover , #praise-txt.hover{
 color: #EB4F38;
}
@keyframes myfirst
{
 0%{
  width:40px;
  height:40px;
 }
 50%{
  width:50px;
  height:50px;
 }
 100% {
  width:40px;
  height:40px;
 }
}
@-moz-keyframes myfirst 
{
 0%{
  width:40px;
  height:40px;
 }
 50%{
  width:50px;
  height:50px;
 }
 100% {
  width:40px;
  height:40px;
 }
}
@-webkit-keyframes myfirst 
{
 0%{
  width:40px;
  height:40px;
 }
 50%{
  width:50px;
  height:50px;
 }
 100% {
  width:40px;
  height:40px;
 }
}
@-o-keyframes myfirst 
{
 0%{
  width:40px;
  height:40px;
 }
 50%{
  width:50px;
  height:50px;
 }
 100% {
  width:40px;
  height:40px;
 }
}
@keyframes mypraise
{
 0%{
  top:-15px;
  opacity: 0;
  filter: Alpha(opacity=0);
  -moz-opacity:0;
 }
 25%{
  top:-20px;
  opacity: 0.5;
  filter: Alpha(opacity=50);
  -moz-opacity:0.5;
 }
 50%{
  top:-25px;
  opacity: 1;
  filter: Alpha(opacity=100);
  -moz-opacity:1;
 }
 75%{
  top:-30px;
  opacity: 0.5;
  filter: Alpha(opacity=50);
  -moz-opacity:0.5;
 }
 100% {
  top:-35px;
  opacity: 0;
  filter: Alpha(opacity=0);
  -moz-opacity:0;
 }
}
@-moz-keyframes mypraise 
{
 0%{
  top:-15px;
  opacity: 0;
  filter: Alpha(opacity=0);
  -moz-opacity:0;
 }
 25%{
  top:-20px;
  opacity: 0.5;
  filter: Alpha(opacity=50);
  -moz-opacity:0.5;
 }
 50%{
  top:-25px;
  opacity: 1;
  filter: Alpha(opacity=100);
  -moz-opacity:1;
 }
 75%{
  top:-30px;
  opacity: 0.5;
  filter: Alpha(opacity=50);
  -moz-opacity:0.5;
 }
 100% {
  top:-35px;
  opacity: 0;
  filter: Alpha(opacity=0);
  -moz-opacity:0;
 }
}
@-webkit-keyframes mypraise 
{
 0%{
  top:-15px;
  opacity: 0;
  filter: Alpha(opacity=0);
  -moz-opacity:0;
 }
 25%{
  top:-20px;
  opacity: 0.5;
  filter: Alpha(opacity=50);
  -moz-opacity:0.5;
 }
 50%{
  top:-25px;
  opacity: 1;
  filter: Alpha(opacity=100);
  -moz-opacity:1;
 }
 75%{
  top:-30px;
  opacity: 0.5;
  filter: Alpha(opacity=50);
  -moz-opacity:0.5;
 }
 100% {
  top:-35px;
  opacity: 0;
  filter: Alpha(opacity=0);
  -moz-opacity:0;
 }
}
@-o-keyframes mypraise 
{
 0%{
  top:-15px;
  opacity: 0;
  filter: Alpha(opacity=0);
  -moz-opacity:0;
 }
 25%{
  top:-20px;
  opacity: 0.5;
  filter: Alpha(opacity=50);
  -moz-opacity:0.5;
 }
 50%{
  top:-25px;
  opacity: 1;
  filter: Alpha(opacity=100);
  -moz-opacity:1;
 }
 75%{
  top:-30px;
  opacity: 0.5;
  filter: Alpha(opacity=50);
  -moz-opacity:0.5;
 }
 100% {
  top:-35px;
  opacity: 0;
  filter: Alpha(opacity=0);
  -moz-opacity:0;
 }
}
</style>
<script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<!--动态点赞开始-->
<p class="praise">
  <span id="praise">
    <img src="http://cdn.attach.qdfuns.com/notes/pics/201612/07/111158kzuumusztigszgsu.png" id="praise-img" />
  </span>
  <span id="praise-txt">145</span>
  <span id="add-num"><em>+1</em></span>
</p>
<!--动态点赞结束-->
<script>
  /* @author:Romey
   * 动态点赞
   * 此效果包含css3，部分浏览器不兼容（如：IE10以下的版本）
  */
  $(function(){
    $("#praise").click(function(){
      var praise_img = $("#praise-img");
      var text_box = $("#add-num");
      var praise_txt = $("#praise-txt");
      var num=parseInt(praise_txt.text());
      if(praise_img.attr("src") == ("http://cdn.attach.qdfuns.com/notes/pics/201612/07/111158g2kg4s2gk9hm4fd4.png")){
        $(this).html("<img src=&#39;http://cdn.attach.qdfuns.com/notes/pics/201612/07/111158kzuumusztigszgsu.png&#39; id=&#39;praise-img&#39; class=&#39;animation&#39; />");
praise_txt.removeClass("hover");
        text_box.show().html("<em class=&#39;add-animation&#39;>-1</em>");
        $(".add-animation").removeClass("hover");
        num -=1;
        praise_txt.text(num)
      }else{
        $(this).html("<img src=&#39;http://cdn.attach.qdfuns.com/notes/pics/201612/07/111158g2kg4s2gk9hm4fd4.png&#39; id=&#39;praise-img&#39; class=&#39;animation&#39; />");
        praise_txt.addClass("hover");
        text_box.show().html("<em class=&#39;add-animation&#39;>+1</em>");
        $(".add-animation").addClass("hover");
        num +=1;
        praise_txt.text(num)
      }
    });
  })
</script>
</body>
</html>

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

jQuery und CSS3 implementieren imitiertes Blütenblattnetz-Navigationsmenü mit fester oberer Position und schwebendem Effekt

jQuery-Verwendung HTML5 und CSS3 zur Implementierung der Funktion des aktualisierungsfreien Formulars mit abgerundeten Ecken und Eingabevalidierung

So verwenden Sie JS und CSS3, um coole Popup-Fenstereffekte zu erstellen

Das obige ist der detaillierte Inhalt vonjQuery und CSS3 implementieren ähnliche Funktionen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php html5 jquery css3 JS

Stellungnahme：

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

Vorheriger Artikel：Analyse der JS-Datei-Upload-Artefakt-Bootstrap-DateieingabeNächster Artikel：Analyse der JS-Datei-Upload-Artefakt-Bootstrap-Dateieingabe

In Verbindung stehende Artikel

Mehr sehen