jQuery+CSS3文章点赞功能代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery+CSS3文章点赞功能代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!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>
<!--样式表开始-->
<link type="text/css" rel="stylesheet" href="Css/demo.css">
<!--样式表结束-->
<script type="text/javascript" src="Js/jquery-1.8.3.min.js"></script>
</head>
<body>
<!--动态点赞开始-->
<div class="text-content">
	<h1>艾弗森、科比、詹姆斯，谁的得分能力更强？</h1>
	<p>
		科比、艾弗森、詹姆斯都是顶级的得分高手，科比进攻技巧多样、几乎没有攻击死角。艾弗森速度快如闪电、突破无解。詹姆斯身体素质惊人、碾压对手。<br />
		科比：“飞侠”科比拥有完美的身体素质，娴熟的进攻技巧，加上超强的求胜欲望。成就了不可阻挡的科比。科比的6大绝招，招招致命，并且科比可以自由切换，这让防死科比成为了不可能完成的任务。那些所谓的科比终结者，最后只能成为科比变得更强的垫脚石。3节62分，单场81分，科比视得分如探囊取物。<br/>
		艾弗森：“答案”艾弗森与科比同时出道，虽然身高矮了一些，但是艾弗森的得分能力毫不逊色。艾弗森的突破速度快如闪电，同时艾弗森拥有超强的弹跳、弹速也很快。艾弗森的敏捷性、柔韧性和协调性都非常的好，这让他的突破变得更加无解。艾弗森在球场上毫无畏惧，充满斗志，永不服输，4届得分王证明了他的实力。<br />
		詹姆斯：“小皇帝”詹姆斯，有很好的大局观，当时同时，他也拥有超强的得分能力。身高2.03米，体重113公斤，却拥有着后卫一样的速度与控球技巧。刚刚出道的詹姆斯以突破为主，后来的詹姆斯中距离投篮也渐渐成熟，让詹姆斯变得更加难以防守。
	</p>
</div>
<div class="praise">
	<span id="praise"><img src="Images/zan.png" id="praise-img" /></span>
	<span id="praise-txt">1455</span>
	<span id="add-num"><em>+1</em></span>
</div>
<!--动态点赞结束-->

<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") == ("Images/yizan.png")){
				$(this).html("<img src='Images/zan.png' id='praise-img' class='animation' />");
				praise_txt.removeClass("hover");
				text_box.show().html("<em class='add-animation'>-1</em>");
				$(".add-animation").removeClass("hover");
				num -=1;
				praise_txt.text(num)
			}else{
				$(this).html("<img src='Images/yizan.png' id='praise-img' class='animation' />");
				praise_txt.addClass("hover");
				text_box.show().html("<em class='add-animation'>+1</em>");
				$(".add-animation").addClass("hover");
				num +=1;
				praise_txt.text(num)
			}
		});
	})
</script>
</body>
</html>

CSS代码(demo.css):

/* author Romey 2016-09-13*/
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;/* Firefox */
 -webkit-animation:myfirst 0.5s;/* Safari 和 Chrome */
 -o-animation:myfirst 0.5s;/* Opera */
}
#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;/* Firefox */
 -webkit-animation:mypraise 0.5s;/* Safari 和 Chrome */
 -o-animation:mypraise 0.5s;/* Opera */
 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 /* Firefox */
{0%{width:40px;height:40px;}
50%{width:50px;height:50px;}
100%{width:40px;height:40px;}
}
@-webkit-keyframes myfirst /* Safari 和 Chrome */
{0%{width:40px;height:40px;}
50%{width:50px;height:50px;}
100%{width:40px;height:40px;}
}
@-o-keyframes myfirst /* Opera */
{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 /* Firefox */
{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 /* Safari 和 Chrome */
{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 /* Opera */
{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;}
}
/*点赞数量加减动画结束*/
/*动态点赞结束*/

附件:下载该文件资源,减少时间成本(增值服务)