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 节点操作 以及DOMDocument属性和方法
Dec 06 Javascript
javascript下数值型比较难点说明
Jun 07 Javascript
javascript中节点的最近的相关节点访问方法
Mar 20 Javascript
浅析JQuery获取和设置Select选项的常用方法总结
Jul 04 Javascript
Js中的onblur和onfocus事件应用介绍
Aug 27 Javascript
js实现在同一窗口浏览图片
Sep 17 Javascript
jQuery仿360导航页图标拖动排序效果代码分享
Aug 24 Javascript
基于javascript实现全屏漂浮广告
Mar 31 Javascript
JS实用技巧小结(屏蔽错误、div滚动条设置、背景图片位置等)
Jun 16 Javascript
利用jquery获取select下拉框的值
Nov 23 Javascript
关于TypeScript中import JSON的正确姿势详解
Jul 25 Javascript
mpvue 项目初始化及实现授权登录的实现方法
Jul 20 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
Yii2实现log输出到file及database的方法
2016/11/12 PHP
php常用经典函数集锦【数组、字符串、栈、队列、排序等】
2019/08/23 PHP
Javascript中产生固定结果的函数优化技巧
2013/01/16 Javascript
7款风格新颖的jQuery/CSS3菜单导航分享
2013/04/23 Javascript
javascript获取隐藏dom的宽高 具体实现
2013/07/14 Javascript
jQuery与getJson结合的用法实例
2015/08/07 Javascript
XML、HTML、CSS与JS的区别整理
2016/02/18 Javascript
html判断当前页面是否在iframe中的实例
2016/11/30 Javascript
js实现百度搜索提示框
2017/02/05 Javascript
使用bat打开多个cmd窗口执行gulp、node
2017/02/17 Javascript
详解vue数据渲染出现闪烁问题
2017/06/29 Javascript
js实现方块上下左右移动效果
2017/08/17 Javascript
vue-cli开发时,关于ajax跨域的解决方法(推荐)
2018/02/03 Javascript
element-ui 设置菜单栏展开的方法
2018/08/22 Javascript
小程序如何定位所在城市及发起周边搜索
2020/02/11 Javascript
js数组中去除重复值的几种方法
2020/08/03 Javascript
Python常用的内置序列结构(列表、元组、字典)学习笔记
2016/07/08 Python
python实现猜数字游戏
2020/03/25 Python
keras训练曲线,混淆矩阵,CNN层输出可视化实例
2020/06/15 Python
详解Python yaml模块
2020/09/23 Python
python更新数据库中某个字段的数据(方法详解)
2020/11/18 Python
Tiqets荷兰:出售欧洲最美丽的景点和博物馆门票
2018/01/09 全球购物
Sunglasses Shop英国:欧洲领先的太阳镜在线供应商之一
2018/09/19 全球购物
C++面试题:关于链表和指针
2013/06/05 面试题
医院门卫岗位职责
2013/12/30 职场文书
个人借款担保书
2014/04/02 职场文书
汽车维修专业自荐书
2014/05/26 职场文书
创建文明城市标语
2014/06/16 职场文书
乡镇综治宣传月活动总结
2014/07/02 职场文书
大学奖学金获奖感言
2014/08/15 职场文书
学校周年庆活动方案
2014/08/22 职场文书
忠犬八公的故事观后感
2015/06/05 职场文书
《假如》教学反思
2016/02/17 职场文书
java实现对Hadoop的操作
2021/07/01 Java/Android
Python pandas求方差和标准差的方法实例
2021/08/04 Python
Java实现房屋出租系统详解
2021/10/05 Java/Android