首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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>

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

jQuery+CSS3实现点赞功能

- Author -

艾米

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
仅IE不支持setTimeout/setInterval函数的第三个以上参数
May 25 Javascript
JavaScript中的无阻塞加载性能优化方案
Oct 10 Javascript
Jquery解析Json格式数据过程代码
Oct 17 Javascript
在父页面得到zTree已选中的节点的方法
Feb 12 Javascript
Javascript数据结构与算法之列表详解
Mar 12 Javascript
JS判断页面是否出现滚动条的方法
Jul 17 Javascript
jQuery实现图片文字淡入淡出效果
Dec 21 Javascript
微信小程序基于slider组件动态修改标签透明度的方法示例
Dec 04 Javascript
vscode下的vue文件格式化问题
Nov 28 Javascript
JavaScript中的回调函数实例讲解
Jan 27 Javascript
JavaScript中BOM对象原理与用法分析
Jul 09 Javascript
Vue3 中的数据侦测的实现
Oct 09 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
Mybatis-Plus(3) el-table(1) 脚手架(2) SingleFlight(2) TableField(1) set(1) create(1) Next.js(1) 并发(8) frozenset(1)
You might like
使用pthreads实现真正的PHP多线程（需PHP5.3以上版本）
2014/05/05 PHP
PHP5.5和之前的版本empty函数的不同之处
2014/06/13 PHP
PHP实现简单ajax Loading加载功能示例
2016/12/28 PHP
php格式文件打开的四种方法
2018/02/24 PHP
PHP实现的日历功能示例
2018/09/01 PHP
用js实现的抽象CSS圆角效果!!
2007/05/03 Javascript
小试JQuery的AutoComplete插件
2011/05/04 Javascript
使用insertAfter()方法在现有元素后添加一个新元素
2014/05/28 Javascript
jQuery经过一段时间自动隐藏指定元素的方法
2015/03/17 Javascript
jQuery链式操作实例分析
2015/11/16 Javascript
微信小程序 火车票查询实例讲解
2016/10/17 Javascript
全新打包工具parcel零配置vue开发脚手架
2018/01/11 Javascript
webpack热模块替换（HMR）/热更新的方法
2018/04/05 Javascript
微信小程序实现城市列表选择
2018/06/05 Javascript
11个教程中不常被提及的JavaScript小技巧（推荐）
2019/04/17 Javascript
JavaScript中的函数申明、函数表达式、箭头函数
2019/12/06 Javascript
Vue自定义表单内容检查rules实例
2020/10/30 Javascript
python 接收处理外带的参数方法
2018/12/03 Python
python提取包含关键字的整行数据方法
2018/12/11 Python
python 给图像添加透明度(alpha通道)
2020/04/09 Python
Django+Uwsgi+Nginx如何实现生产环境部署
2020/07/31 Python
深入了解Python 方法之类方法 &amp; 静态方法
2020/08/17 Python
字中字效果的实现【html5实例】
2016/05/03 HTML / CSS
详解WebSocket跨域问题解决
2018/08/06 HTML / CSS
意大利团购网站：Groupon意大利
2016/10/11 全球购物
荷兰鞋子在线：Nelson Schoenen
2017/12/25 全球购物
Booking.com英国官网：全球酒店在线预订网站
2018/04/21 全球购物
乐高奥地利官方商店：LEGO Shop AT
2019/07/16 全球购物
C++:局部变量能否和全局变量重名
2014/03/03 面试题
机械制造与自动化应届生求职信
2013/11/16 职场文书
我的中国梦主题教育活动总结
2015/05/07 职场文书
保险公司反洗钱宣传活动总结
2015/05/08 职场文书
入党宣誓大会后的感想
2015/08/10 职场文书
纯CSS实现hover图片pop-out弹出效果的实例代码
2021/04/16 HTML / CSS
elasticSearch-api的具体操作步骤讲解
2021/06/28 Java/Android
HTML 里 img 元素的 src 和 srcset 属性的区别详解
2023/05/21 HTML / CSS