懒人之家--可能是JS网页特效代码收集最全的懒站!
更多

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

作者/代码整理:  (转载请附加本文地址,带有“懒人原生”字样的谢绝转载) 发布日期:2017-03-13
jQuery+CSS3网页文章支持点赞取消点赞功能代码,目前比较多网站用到的一个js点赞特效。


js代码


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