jquery+css3点赞功能效果代码

2017-04-230
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
版权声明：本站原创文章，于2017年04月23日，由网站程序网发表。
转载请注明：jquery+css3点赞功能效果代码-网站程序网
上一篇：帝国cms 验证码不显示的解决方法下一篇：dedecms 顶一下点赞功能美化
CMS常见问题
阅读排行
本月排行