<p>
<span class="praise"><img class="praise-pic"
src="static/images/graypraise.png" alt=""></span>
<span class="praise-num">58</span>
<span class="change-num"><em>+1</em></span>
</p>
/* 点赞动态样式 */
.browse .praise {
display: block;
position: relative;
width: 15px;
height: 15px;
}
.praise img.animation {
animation: myfirst 0.5s;
-moz-animation: myfirst 0.5s;
-webkit-animation: myfirst 0.5s;
-o-animation: myfirst 0.5s;
}
.change-num {
display: none;
position: relative;
}
.change-num .add-animation {
color: #24bf9a;
position: absolute;
top: -15px;
left: -15px;
font-size: 0.7rem;
opacity: 0;
filter: Alpha(opacity=0);
-moz-opacity: 0;
animation: mypraise 0.5s;
-moz-animation: mypraise 0.5s;
-webkit-animation: mypraise 0.5s;
-o-animation: mypraise 0.5s;
font-style: normal;
}
/*点赞图标放大动画开始*/
@keyframes myfirst {
0% {
width: 15px;
height: 15px;
}
50% {
width: 30px;
height: 30px;
}
100% {
width: 15px;
height: 15px;
}
}
@-moz-keyframes myfirst
/* Firefox */
{
0% {
width: 15px;
height: 15px;
}
50% {
width: 30px;
height: 30px;
}
100% {
width: 15px;
height: 15px;
}
}
@-webkit-keyframes myfirst
/* Safari 和 Chrome */
{
0% {
width: 15px;
height: 15px;
}
50% {
width: 30px;
height: 30px;
}
100% {
width: 15px;
height: 15px;
}
}
@-o-keyframes myfirst
/* Opera */
{
0% {
width: 15px;
height: 15px;
}
50% {
width: 30px;
height: 30px;
}
100% {
width: 15px;
height: 15px;
}
}
/*点赞图标放大动画结束*/
/*点赞数量加减动画开始*/
@keyframes mypraise {
0% {
top: -15px;
opacity: 0;
filter: Alpha(opacity=0);
-moz-opacity: 0;
}
25% {
top: -20px;
opacity: 0.5;
filter: Alpha(opacity=50);
-moz-opacity: 0.5;
}
50% {
top: -25px;
opacity: 1;
filter: Alpha(opacity=100);
-moz-opacity: 1;
}
75% {
top: -30px;
opacity: 0.5;
filter: Alpha(opacity=50);
-moz-opacity: 0.5;
}
100% {
top: -35px;
opacity: 0;
filter: Alpha(opacity=0);
-moz-opacity: 0;
}
}
@-moz-keyframes mypraise
/* Firefox */
{
0% {
top: -15px;
opacity: 0;
filter: Alpha(opacity=0);
-moz-opacity: 0;
}
25% {
top: -20px;
opacity: 0.5;
filter: Alpha(opacity=50);
-moz-opacity: 0.5;
}
50% {
top: -25px;
opacity: 1;
filter: Alpha(opacity=100);
-moz-opacity: 1;
}
75% {
top: -30px;
opacity: 0.5;
filter: Alpha(opacity=50);
-moz-opacity: 0.5;
}
100% {
top: -35px;
opacity: 0;
filter: Alpha(opacity=0);
-moz-opacity: 0;
}
}
@-webkit-keyframes mypraise
/* Safari 和 Chrome */
{
0% {
top: -15px;
opacity: 0;
filter: Alpha(opacity=0);
-moz-opacity: 0;
}
25% {
top: -20px;
opacity: 0.5;
filter: Alpha(opacity=50);
-moz-opacity: 0.5;
}
50% {
top: -25px;
opacity: 1;
filter: Alpha(opacity=100);
-moz-opacity: 1;
}
75% {
top: -30px;
opacity: 0.5;
filter: Alpha(opacity=50);
-moz-opacity: 0.5;
}
100% {
top: -35px;
opacity: 0;
filter: Alpha(opacity=0);
-moz-opacity: 0;
}
}
@-o-keyframes mypraise
/* Opera */
{
0% {
top: -15px;
opacity: 0;
filter: Alpha(opacity=0);
-moz-opacity: 0;
}
25% {
top: -20px;
opacity: 0.5;
filter: Alpha(opacity=50);
-moz-opacity: 0.5;
}
50% {
top: -25px;
opacity: 1;
filter: Alpha(opacity=100);
-moz-opacity: 1;
}
75% {
top: -30px;
opacity: 0.5;
filter: Alpha(opacity=50);
-moz-opacity: 0.5;
}
100% {
top: -35px;
opacity: 0;
filter: Alpha(opacity=0);
-moz-opacity: 0;
}
}
/*点赞动态效果*/
$(function(){
$('.villagerInfo ul li').each(function(index,el){
var _this=$(this);
var praise=_this.find('.praise')
praise.on('click',function(){
var praise_img = _this.find('.praise-pic');
var text_box = _this.find(".change-num");
var praise_txt =_this.find(".praise-num");
var num=parseInt(praise_txt.text());
if(praise_img.attr("src") == ("static/images/greenpraise.png")){
$(this).html("<img src='static/images/graypraise.png' class='praise-pic animation' />");
text_box.show().html("<em class='add-animation'>-1</em>");
num -=1;
praise_txt.text(num)
}else{
$(this).html("<img src='static/images/greenpraise.png' class='praise-pic animation' />");
text_box.show().html("<em class='add-animation'>+1</em>");
num +=1;
praise_txt.text(num)
}
});
})
})
本篇内容是针对于类似微信朋友圈的点赞,点赞数量增加,跟着样式也改变