jQuery+CSS3实现点赞功能

下面我会详细讲解如何使用jQuery和CSS3实现点赞功能：

1. 前置知识

• HTML基础知识
• CSS3基础知识
• jQuery基础知识

2. 实现点赞功能的HTML代码

<div class="like">
  <button class="like-btn"></button>
  <span class="like-count">0</span>
</div>

这段代码中，我们创建了一个div元素，其中包含一个button和一个用于显示点赞数量的span元素。

3. CSS3样式代码

.like-btn {
  width: 40px;
  height: 40px;
  background: url("like.png") no-repeat;
  background-size: contain;
  cursor: pointer;
}

.like-btn.active {
  background: url("like_active.png") no-repeat;
  background-size: contain;
}

.like-count {
  margin-left: 5px;
}

这段代码中，我们设置了点赞按钮的宽高和图片，为了实现点击时变色的效果，我们添加了一个.active类。

4. jQuery代码

$(function() {
  $('.like-btn').click(function() {
    $(this).toggleClass('active');
    var likeCount = parseInt($(this).siblings('.like-count').text());
    $(this).siblings('.like-count').text($(this).hasClass('active') ? likeCount + 1 : likeCount - 1);
  });
});

这段代码实现了点击按钮切换类样式的功能，同时，我们获取了该按钮相邻的点赞数量显示元素，并更新其文本内容。

5. 示例说明

示例1

我们可以通过CSS3实现动画效果，例如添加过渡效果：

.like-btn {
  /* 在前面的样式代码中 */
  transition: all 0.3s ease;
}

这个示例实现了点击点赞按钮时，按钮背景会平滑过渡到另一张图片。

示例2

我们可以使用ajax来保存点赞结果，使点赞结果不会因刷新而失效。

$(function() {
  $('.like-btn').click(function() {
    $(this).toggleClass('active');
    var likeCount = parseInt($(this).siblings('.like-count').text());
    $(this).siblings('.like-count').text($(this).hasClass('active') ? likeCount + 1 : likeCount - 1);

    // 发送ajax请求保存点赞结果
    $.ajax({
      type: 'GET',
      url: 'like.php',
      data: {
        id: $(this).attr('data-id'),
        like: $(this).hasClass('active') ? 1 : 0
      },
      success: function() {
        alert('点赞成功！');
      },
      error: function() {
        alert('网络错误，请稍后重试！');
      }
    });
  });
});

在这个示例中，我们使用了ajax发送了一个GET请求，将该点赞按钮的状态传递给了后台处理，以便保存点赞记录。当然，需要自行编写后台代码实现这个功能。

以上就是实现点赞功能的完整攻略，希望能对你有所帮助！