jQuery实现点赞加1(点赞动画)的效果

  •   
  • 11737
  • jQuery
  • 2
  • super_dodo
  • 2015/06/17

经典分享类的文章页面中，为了最大可能性的和用户互动，保持用户的粘性，帖子点赞，文章点赞，回复点赞，以及踩一下，扔鸡蛋等常常是用户所喜爱的最直接简单的表达情感和意见的方式。那我们来简要的看一下实现点赞的方法和方式。点赞的动画效果主要是点击按钮或者链接的时候，触发动画效果。当然你也可以使用ajax请求后端的数据库对点赞数目统计。下面直接上图示和代码。你可以复制下来随意改动。

QQ截图20150617203126

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery实现点赞加1的效果</title>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<style>
	body{margin:100px;}
	a{margin:100px;padding:10px;background-color:#ddd;color:#333;font-size:20px;text-decoration:none;}
</style>
</head>
<body>

	<a id="good" href="javascript:void(0)">点赞点赞点赞点赞</a>

<script>

//单点击点赞按钮或者链接的时候
$('#good').click(function(){
	$("#good").append("<span class='tips_box' style=''>赞一个</span>");
	var box = $(".tips_box");
	var self = $(this);
	var top = self.offset().top;
	var left = self.offset().left + self.width() / 2 - box.width() / 2;
	
	box.css({
		"position": "absolute",
		"top": top,
		"left": left,
		"font-size": '16px',		//开始时候的字体大小
		"font-family": 'Microsoft Yahei',
		"color": 'red',
	});

	box.animate({
		"top": top - 50,
		"left": left - 50,
		"opacity": 0.8,			//透明度
		"font-size": '40px'		//动画结束时候的效果
	}, 800, function() {
		box.remove();
	});

});
	
</script>
</body>
</html>

另外一种形式

<script>
	(function($){
		$.fn.extend({
			addOne: function(options) {
				options = $.extend({
					str: "+1赞",
					startSize: "14px",
					endSize: "60px",
					interval: 2000,
					color: "red",
					style: "",
					callback: function() {}
				}, options);

				$("body").append("<span class='tips_box' style='"+ options.style +"'>"+ options.str +"</span>");
				var box = $(".tips_box");
				var self = $(this);
				var top = self.offset().top;
				var left = self.offset().left + self.width() / 2 - box.width() / 2;
				//alert(layer.width());
				
				box.css({
					"position": "absolute",
					"top": top,
					"left": left,
					"font-size": options.startSize,
				//	"font-weight": "bold",
					"color": options.color
				});
				
				box.animate({
					"top": top - self.height() / 2,
					"opacity": 0,
					"font-size": options.endSize
				}, options.interval, function() {
					box.remove();
				//	options.callback();
				});
			}
		});
	})(jQuery);

	$('#good').click(function(){
		$("a").addOne({
			style: 'font-weight:bold;',
			endSize: "80px",
			interval:2000
		});
	});
	
</script>

相信明天不会比今天更坏，如果还能再坏，那今天的糟糕就不算什么。