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 相关文章推荐
原生Js实现元素渐隐/渐现(原理为修改元素的css透明度)
Jun 24 Javascript
JS之Date对象和获取系统当前时间详解
Jan 13 Javascript
javascript实现方法调用与方法触发小结
Mar 26 Javascript
javascript面向对象程序设计高级特性经典教程(值得收藏)
May 19 Javascript
jquery  实现轮播图详解及实例代码
Oct 12 Javascript
Vue2单一事件管理组件通信
May 09 Javascript
使用原生js写ajax实例(推荐)
May 31 Javascript
jQuery EasyUI Layout实现tabs标签的实例
Sep 26 jQuery
vue项目中,main.js,App.vue,index.html的调用方法
Sep 20 Javascript
Web安全之XSS攻击与防御小结
Dec 13 Javascript
使用VueCli3+TypeScript+Vuex一步步构建todoList的方法
Jul 25 Javascript
vue脚手架项目创建步骤详解
Mar 02 Vue.js
百度地图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面向对象三大特点学习(充分理解抽象、封装、继承、多态)
2012/05/07 PHP
Zend Framework教程之Zend_Db_Table表关联实例详解
2016/03/23 PHP
PHP实现的curl批量请求操作示例
2018/06/06 PHP
PHP日志LOG类定义与用法示例
2018/09/06 PHP
php给数组赋值的实例方法
2019/09/26 PHP
PHP实现图片防盗链破解操作示例【解决图片防盗链问题/反向代理】
2020/05/29 PHP
Javascript实例教程(19) 使用HoTMetal(6)
2006/12/23 Javascript
个人总结的一些关于String、Function、Array的属性和用法
2007/01/10 Javascript
js jquery分别实现动态的文件上传操作按钮的添加和删除
2014/01/13 Javascript
javascript实现五星评分功能
2015/11/10 Javascript
input file上传 图片预览功能实例代码
2016/10/25 Javascript
jQuery序列化后的表单值转换成Json
2017/06/16 jQuery
vue初尝试--项目结构(推荐)
2018/01/30 Javascript
jQuery轻量级表单模型验证插件
2018/10/15 jQuery
浅析Vue.js 中的条件渲染指令
2018/11/19 Javascript
微信小程序实用代码段(收藏版)
2019/12/17 Javascript
[02:39]DOTA2英雄基础教程 天怒法师
2013/11/29 DOTA
[00:09]DOTA2新版本PA至宝特效动作展示
2014/11/19 DOTA
[02:20]DOTA2亚洲邀请赛 EHOME战队出场宣传片
2015/02/07 DOTA
Python算法之栈(stack)的实现
2014/08/18 Python
Django中的“惰性翻译”方法的相关使用
2015/07/27 Python
使用python将图片按标签分入不同文件夹的方法
2018/12/08 Python
Django对数据库进行添加与更新的例子
2019/07/12 Python
Tensorflow模型实现预测或识别单张图片
2019/07/19 Python
scrapy redis配置文件setting参数详解
2020/11/18 Python
css3给背景图片加颜色遮罩的方法
2019/11/05 HTML / CSS
使用HTML5技术开发一个属于自己的超酷颜色选择器
2013/09/22 HTML / CSS
ZWILLING双立人法国网上商店:德国刀具锅具厨具品牌
2019/08/28 全球购物
Myprotein瑞士官方网站:运动营养和健身网上商店
2019/09/25 全球购物
HttpServlet类中的主要方法都有哪些?各自的作用是什么?
2014/03/16 面试题
超市活动计划书
2014/04/24 职场文书
大跃进口号
2014/06/16 职场文书
区长工作作风个人整改措施
2014/10/01 职场文书
离职信范本
2015/06/23 职场文书
通过Qt连接OpenGauss数据库的详细教程
2021/06/23 PostgreSQL
MySQL 数据 data 基本操作
2022/05/04 MySQL