html实现评论点赞功能,前端开发中jQuery+CSS3点赞功能

/p>

<

margin:0;

padding:0;

}

.text-content{

min-width:1180px;

border-bottom:1pxsolid#e7e7e7;

border-top:1pxsolid#e7e7e7;

background:#f4f4f4;

}

.text-content h1{

text-align:center;

font-size:20px;

padding-top:50px;

color:#EB4F38;

}

.text-content p{

padding:10px100px40px100px;

clear:both;

color:#333;

display:block;

font-family:”Microsoft Yahei”,”Helvetica Neue”,Helvetica,Arial,sans-serif;

font-size:16px;

line-height:1.6;

margin:0auto;

outline:mediumnone;

position:relative;

width:900px;

word-wrap:break-word;

}

.praise{

width:40px;

height:40px;

margin:50pxauto;

cursor:pointer;

font-size:12px;

text-align:center;

position:relative;

}

#praise{

display:block;

width:40px;

height:40px;

margin:0auto;

}

#praise-txt{

height:25px;

line-height:25px;

display:block;

}

.praise img{

width:40px;

height:40px;

display:block;

margin:0auto;

}

.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;

}

}

145

+1

/* @author:Romey

* 动态点赞

* 此效果包含css3，部分浏览器不兼容(如：IE10以下的版本)

*/

$(function(){

$(“#praise”).click(function(){

varpraise_img=$(“#praise-img”);

vartext_box=$(“#add-num”);

varpraise_txt=$(“#praise-txt”);

varnum=parseInt(praise_txt.text());

if(praise_img.attr(“src”) == (“http://cdn.attach.qdfuns.com/notes/pics/201612/07/111158g2kg4s2gk9hm4fd4.png”)){

$(this).

praise_txt.removeClass(“hover”);

text_box.show().

$(“.add-animation”).removeClass(“hover”);

num-=1;

praise_txt.text(num)

}else{

$(this).

praise_txt.addClass(“hover”);

text_box.show().

$(“.add-animation”).addClass(“hover”);

num+=1;

praise_txt.text(num)

}

});

})