PROMULGATOR

    杰他哥

    河南省许昌市
    Html
    Css
    Js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!--动态点赞开始-->
<div class="text-content">
    <h1>艾弗森、科比、詹姆斯，谁的得分能力更强？</h1>
    <p>
        科比、艾弗森、詹姆斯都是顶级的得分高手，科比进攻技巧多样、几乎没有攻击死角。艾弗森速度快如闪电、突破无解。詹姆斯身体素质惊人、碾压对手。<br>
    </p>
</div>
<div class="praise">
    <span id="praise"><img src="http://www.jq22.com/tp/0bf5aaed-99cb-4475-bfd2-7964d1343357.png" id="praise-img"></span>
    <span id="praise-txt">1455</span>
    <span id="add-num"><em>+1</em></span>
</div>
<!--动态点赞结束-->
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
/* author Romey
   2016-09-13
*/
body{
    margin:0;
    padding:0;
}
.text-content{
    min-width:700px;
    border-bottom: 1px solid #e7e7e7;
    border-top: 1px solid #e7e7e7;
    background: #f4f4f4;
}
.text-content h1{
    text-align:center;
    font-size: 20px;
    padding-top: 0px;
    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;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
/* @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") == ("")) {
            $(this).html("<img src='http://www.jq22.com/tp/0bf5aaed-99cb-4475-bfd2-7964d1343357.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='http://www.jq22.com/tp/0bf5aaed-99cb-4475-bfd2-7964d1343357.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)
        }
    });
})
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3
 立即下载

jQuery点赞

1
      时间0
      2017/8/17 17:27:36
      代码有问题，？？？？ 回复