jQuery+CSS3实现点赞功能


Posted in Javascript onMarch 13, 2017

效果图:

jQuery+CSS3实现点赞功能

图(1) 初始图

jQuery+CSS3实现点赞功能

图(2) 点击后

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery+CSS3文章点赞功能代码</title>
<style type="text/css">
body{
 margin:0;
 padding:0;
}
.text-content{
 min-width:1180px;
 border-bottom: 1px solid #e7e7e7;
 border-top: 1px solid #e7e7e7;
 background: #f4f4f4;
}
.text-content h1{
 text-align:center;
 font-size: 20px;
 padding-top: 50px;
 color: #EB4F38;
}
.text-content p{
 padding: 10px 100px 40px 100px;
 clear: both;
 color: #333;
 display: block;
 font-family: "Microsoft Yahei","Helvetica Neue",Helvetica,Arial,sans-serif;
 font-size: 16px;
 line-height: 1.6;
 margin: 0 auto;
 outline: medium none;
 position: relative;
 width: 900px;
 word-wrap: break-word;
}
.praise{
 width:40px;
 height:40px;
 margin: 50px auto;
 cursor: pointer;
 font-size: 12px;
 text-align:center;
 position: relative;
}
#praise{
 display:block;
 width:40px;
 height:40px;
 margin:0 auto;
}
#praise-txt{
 height:25px;
 line-height:25px;
 display: block;
}
.praise img{
 width:40px;
 height:40px;
 display:block;
 margin: 0 auto;
}
.praise img.animation{
 animation: myfirst 0.5s;
 -moz-animation: myfirst 0.5s;  
 -webkit-animation: myfirst 0.5s;  
 -o-animation: myfirst 0.5s;  
}
#add-num{
 display:none;
}
#add-num .add-animation{
 color: #000;
 position:absolute;
 top:-15px;
 left: 10px;
 font-size: 15px;
 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;
}
.praise .hover , #add-num .add-animation.hover , #praise-txt.hover{
 color: #EB4F38;
}
@keyframes myfirst
{
 0%{
  width:40px;
  height:40px;
 }
 50%{
  width:50px;
  height:50px;
 }
 100% {
  width:40px;
  height:40px;
 }
}
@-moz-keyframes myfirst 
{
 0%{
  width:40px;
  height:40px;
 }
 50%{
  width:50px;
  height:50px;
 }
 100% {
  width:40px;
  height:40px;
 }
}
@-webkit-keyframes myfirst 
{
 0%{
  width:40px;
  height:40px;
 }
 50%{
  width:50px;
  height:50px;
 }
 100% {
  width:40px;
  height:40px;
 }
}
@-o-keyframes myfirst 
{
 0%{
  width:40px;
  height:40px;
 }
 50%{
  width:50px;
  height:50px;
 }
 100% {
  width:40px;
  height:40px;
 }
}
@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 
{
 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 
{
 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 
{
 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;
 }
}
</style>
<script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<!--动态点赞开始-->
<div class="praise">
  <span id="praise">
    <img src="http://cdn.attach.qdfuns.com/notes/pics/201612/07/111158kzuumusztigszgsu.png" id="praise-img" />
  </span>
  <span id="praise-txt">145</span>
  <span id="add-num"><em>+1</em></span>
</div>
<!--动态点赞结束-->
<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") == ("http://cdn.attach.qdfuns.com/notes/pics/201612/07/111158g2kg4s2gk9hm4fd4.png")){
        $(this).html("<img src='http://cdn.attach.qdfuns.com/notes/pics/201612/07/111158kzuumusztigszgsu.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='http://cdn.attach.qdfuns.com/notes/pics/201612/07/111158g2kg4s2gk9hm4fd4.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>
</body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
javascript一些不错的函数脚本代码
Sep 10 Javascript
AngularJS HTML编译器介绍
Dec 06 Javascript
jquery表单验证插件(jquery.validate.js)的3种使用方式
Mar 28 Javascript
详解JavaScript数组和字符串中去除重复值的方法
Mar 07 Javascript
js计算时间差代码【包括计算,天,时,分,秒】
Apr 26 Javascript
完美实现八种js焦点轮播图(下篇)
Apr 20 Javascript
浅谈Angular中ngModel的$render
Oct 24 Javascript
jQuery基于ajax方式实现用户名存在性检查功能示例
Feb 10 Javascript
JavaScript实现的原生态Tab标签页功能【兼容IE6】
Sep 18 Javascript
详解vue项目打包后通过百度的BAE发布到网上的流程
Mar 05 Javascript
浅谈Node.js 沙箱环境
May 15 Javascript
JSON生成Form表单的方法示例
Nov 21 Javascript
百度地图JavascriptApi Marker平滑移动及车头指向行径方向
Mar 13 #Javascript
分享一个精简的vue.js 图片lazyload插件实例
Mar 13 #Javascript
常用的几个JQuery代码片段
Mar 13 #Javascript
Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案
Mar 13 #Javascript
jquery实现表单获取短信验证码代码
Mar 13 #Javascript
基于vue2.0+vuex的日期选择组件功能实现
Mar 13 #Javascript
VUE实现日历组件功能
Mar 13 #Javascript
You might like
PHP生成月历代码
2007/06/14 PHP
php adodb分页实现代码
2009/03/19 PHP
PHP中session变量的销毁
2014/02/27 PHP
ThinkPHP之用户注册登录留言完整实例
2014/07/22 PHP
学习php中的正则表达式
2014/08/17 PHP
一组JS创建和操作表格的函数集合
2009/05/07 Javascript
用Greasemonkey 脚本收藏网站会员信息到本地
2009/10/26 Javascript
使用Microsoft Ajax Minifier减小JavaScript文件大小的方法
2010/04/01 Javascript
jquery的选择器的使用技巧之如何选择input框
2013/09/22 Javascript
解决jquery操作checkbox火狐下第二次无法勾选问题
2014/02/10 Javascript
判断一个对象是否为jquery对象的方法
2014/03/12 Javascript
jquery原创弹出层折叠效果点击折叠弹出一个层
2014/03/12 Javascript
jquery鼠标放上去显示悬浮层即弹出定位的div层
2014/04/25 Javascript
用html+css+js实现的一个简单的图片切换特效
2014/05/28 Javascript
使用堆实现Top K算法(JS实现)
2015/12/25 Javascript
jquery实现的判断倒计时是否结束代码
2016/02/05 Javascript
jQuery可见性过滤选择器用法示例
2016/09/09 Javascript
node.js 和HTML5开发本地桌面应用程序
2016/12/13 Javascript
jQuery中select与datalist制作下拉菜单时的区别浅析
2016/12/30 Javascript
vue实现移动端图片裁剪上传功能
2020/08/18 Javascript
vue实现动态添加数据滚动条自动滚动到底部的示例代码
2018/07/06 Javascript
JavaScript实现PC端横向轮播图
2020/02/07 Javascript
vue项目中使用rem,在入口文件添加内容操作
2020/11/11 Javascript
在GitHub Pages上使用Pelican搭建博客的教程
2015/04/25 Python
python中__call__内置函数用法实例
2015/06/04 Python
python相似模块用例
2016/03/04 Python
Python优先队列实现方法示例
2017/09/21 Python
Python3.6 Schedule模块定时任务(实例讲解)
2017/11/09 Python
基于TensorFlow常量、序列以及随机值生成实例
2020/01/04 Python
详解python中各种文件打开模式
2020/01/19 Python
浅析pip安装第三方库及pycharm中导入第三方库的问题
2020/03/10 Python
html5 input输入实时检测以及延时优化
2018/07/18 HTML / CSS
便利店投资创业计划书
2014/02/08 职场文书
用电申请报告范文
2015/05/18 职场文书
2016年母亲节广告语
2016/01/28 职场文书
教你利用Selenium+python自动化来解决pip使用异常
2021/05/20 Python