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>
- 版权声明：本站原创文章，于2017年04月23日，由网站程序网发表。
- 转载请注明：jquery+css3点赞功能效果代码-网站程序网
阅读排行