您当前的位置:首页 > 网站建设笔记 >

jquery+css3点赞功能效果代码

0
1455+1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jquery+css3点赞功能效果代码</title>
<style type="text/css">
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;list-style:none}

div.praise {position:relative;width:50px;margin:35px auto 20px;text-align:center;font-size:12px;cursor:pointer;}
div.praise img {position:absolute;left:5px;top:0px;display:block;width:40px;height:40px;max-width:none;}
div.praise img.animation {
	-webkit-animation: myfirst 0.5s;
	-moz-animation: myfirst 0.5s;
	-o-animation: myfirst 0.5s;
	animation: myfirst 0.5s;
}
span#praise {display:block;width:50px;height:40px;margin:0 auto;}
span#praise-txt {display:block;height:25px;line-height:25px;}
span#add-num {display:none;}
span#add-num .add-animation {
	position:absolute;left:15px;top:-15px;
	color:black;font-style:normal;font-size:15px;
	filter:alpha(opacity=0);opacity:0;
	-webkit-animation: mypraise 0.5s;
	-moz-animation: mypraise 0.5s;
	-o-animation: mypraise 0.5s;
	animation: mypraise 0.5s;
}
/*点赞+1时的文字颜色*/
div.praise .hover,
span#praise-txt.hover,
span#add-num .add-animation.hover {color:purple;}

/*点赞图标动画*/
@-webkit-keyframes myfirst {
	0% {left:5px;top:0px;width:40px;height:40px;}
	50% {left:0px;top:-5px;width:50px;height:50px;}
	100% {left:5px;top:0px;width:40px;height:40px;}
}
@-moz-keyframes myfirst {
	0% {left:5px;top:0px;width:40px;height:40px;}
	50% {left:0px;top:-5px;width:50px;height:50px;}
	100% {left:5px;top:0px;width:40px;height:40px;}
}
@-o-keyframes myfirst {
	0% {left:5px;top:0px;width:40px;height:40px;}
	50% {left:0px;top:-5px;width:50px;height:50px;}
	100% {left:5px;top:0px;width:40px;height:40px;}
}
@keyframes myfirst {
	0% {left:5px;top:0px;width:40px;height:40px;}
	50% {left:0px;top:-5px;width:50px;height:50px;}
	100% {left:5px;top:0px;width:40px;height:40px;}
}

/*点赞+1或取消点赞-1的提示效果动画*/
@-webkit-keyframes mypraise {
	0% {top:-15px;opacity:0;filter:alpha(opacity=0);}
	25% {top:-20px;opacity:0.5;filter:alpha(opacity=50);}
	50% {top:-25px;opacity:1;filter:alpha(opacity=100);}
	75% {top:-30px;opacity:0.5;filter:alpha(opacity=50);}
	100% {top:-35px;opacity:0;filter:alpha(opacity=0);}
}
@-moz-keyframes mypraise {
	0% {top:-15px;opacity:0;filter:alpha(opacity=0);}
	25% {top:-20px;opacity:0.5;filter:alpha(opacity=50);}
	50% {top:-25px;opacity:1;filter:alpha(opacity=100);}
	75% {top:-30px;opacity:0.5;filter:alpha(opacity=50);}
	100% {top:-35px;opacity:0;filter:alpha(opacity=0);}
}
@-o-keyframes mypraise {
	0% {top:-15px;opacity:0;filter:alpha(opacity=0);}
	25% {top:-20px;opacity:0.5;filter:alpha(opacity=50);}
	50% {top:-25px;opacity:1;filter:alpha(opacity=100);}
	75% {top:-30px;opacity:0.5;filter:alpha(opacity=50);}
	100% {top:-35px;opacity:0;filter:alpha(opacity=0);}
}
@keyframes mypraise {
	0% {top:-15px;opacity:0;filter:alpha(opacity=0);}
	25% {top:-20px;opacity:0.5;filter:alpha(opacity=50);}
	50% {top:-25px;opacity:1;filter:alpha(opacity=100);}
	75% {top:-30px;opacity:0.5;filter:alpha(opacity=50);}
	100% {top:-35px;opacity:0;filter:alpha(opacity=0);}
}
</style>
</head>
<body>
<div class="praise">
	<span id="praise"><img src="/uploadfile/jseffects/dianzan/zan.png" id="praise-img"></span>
	<span id="praise-txt">1455</span>
	<span id="add-num"><em class="add-animation">+1</em></span>
</div>
<!--首先载入jquery库-->
<script type="text/javascript" src="http://www.wangzhanchengxu.com/statics/ljs/jquery.js"></script>
<script type="text/javascript">
//动态点赞
//此效果包含css3,部分浏览器不兼容(如:IE10以下的版本)
$(function(){
	$("#praise").click(function(){
		var praise_img = $("#praise-img");
		var praise_txt = $("#praise-txt");
		var text_box = $("#add-num");
		var num=parseInt(praise_txt.text());
		if(praise_img.attr("src") == ("/uploadfile/jseffects/dianzan/yizan.png")){
			//撤销点赞-1效果
			$(this).html('<img src="/uploadfile/jseffects/dianzan/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 = num - 1;
			praise_txt.text(num);
		}else{
			//点赞+1效果
			$(this).html('<img src="/uploadfile/jseffects/dianzan/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 = num + 1;
			praise_txt.text(num);
		}
	});
});
</script>
</body>
</html>

点击下载:jquery+css3点赞功能效果代码.rar

顶部中部底部