jQuery+CSS3网页文章支持点赞取消点赞功能

1、准备好需要用到的图标。

2、新建html文档。

3、书写hmtl代码。

<div class="text-content">

<h1>艾弗森、科比、詹姆斯，谁的得分能力更强？</h1>

科比、艾弗森、詹姆斯都是顶级的得分高手，科比进攻技巧多样、几乎没有攻击死角。艾弗森速度快如闪电、突破无解。詹姆斯身体素质惊人、碾压对手。<br />

</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>

4、书写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. {

    : myfirst 0.5s;

 -moz-: myfirst 0.5s;

 -: myfirst 0.5s;

 -o-: myfirst 0.5s;

}

#add-num { display: none; }

#add-num .add- { color: #000; position: absolute; top: -15px; left: 10px; font-size: 15px; opacity: 0; filter: Alpha(opacity=0); -moz-opacity: 0;     : mypraise 0.5s;

-moz-: mypraise 0.5s; /* Firefox */  -: mypraise 0.5s; /* Safari 和 Chrome */

-o-: mypraise 0.5s; /* Opera */ font-style: normal; }

.praise .hover, #add-num .add-.hover, #praise-txt.hover { color: #EB4F38; }

5、代码整体结构。

6、查看效果。