<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") == ("Images/yizan.png")){
$(this).html("<img src='Images/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 -=1;
praise_txt.text(num)
}else{
$(this).html("<img src='Images/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 +=1;
praise_txt.text(num)
}
});
})
</script>

jquery点赞和取消点赞插件的更多相关文章

  1. 点赞和取消点赞实现Redis缓存(只思路)

    思路:点赞.取消点赞 --> Redis --> (每两个小时)存到数据库(MySQL),所以就相当于每次查询或者存储都需要先经过Redis,而查询的目的是为了判断用户的点赞状态(已点赞o ...

  2. 微信小程序之点赞和取消点赞

    wxml代码 <image wx:if="{{collection}}" src="/images/boy.png" bindtap="toCo ...

  3. jQuery 自定义网页滚动条样式插件 mCustomScrollbar 的介绍和使用方法(转)

    系统默认的滚动条样式,真的已经看的够恶心了.试想一下,如果在一个很有特色和创意的网页中,出现了一根系统中默认的滚动条样式,会有多么的别扭. 为了自己定义网页中的滚动条的方法,我真的已经找了很久了,就目 ...

  4. 【jquery】fancybox 是一款优秀的 jquery 弹出层展示插件

    今天给大家分享一款优秀的 jquery 弹出层展示插件 fancybox.它除了能够展示图片之外,还可以展示 flash.iframe 内容.html 文本以及 ajax 调用,我们可以通过 css ...

  5. jquery uploadify文件上传插件用法精析

      jquery uploadify文件上传插件用法精析 CreationTime--2018年8月2日11点12分 Author:Marydon 一.参数说明 1.参数设置 $("#fil ...

  6. 第一百八十六节,jQuery,验证表单插件,Ajax 表单插件,验证和提交表单

    jQuery,验证表单插件,Ajax 表单插件,验证和提交表单 HTML <form id="reg" method="post" action=&quo ...

  7. 使用 jquery 的 上传文件插件 uploadify 3.1 配合 java 来做一个简单的文件上次功能。并且在界面上有radio 的选择内容也要上传

    使用 jquery 的 上传文件插件 uploadify 3.1 配合 java 来做一个简单的文件上次功能.并且在界面上有radio 的选择内容也要上传 uploadify 插件的 下载和文档地址  ...

  8. 轻量级jQuery语法高亮代码高亮插件jQuery Litelighter。

    <!DOCTYPE html><html><head><meta charset="UTF-8" /><title>jQ ...

  9. 20款jQuery 的音频和视频插件

    分享 20 款jQuery的音频和视频插件 Blueimp Gallery: DEMO || DOWNLOAD Blueimp gallery 主要为移动设备而设计,同时也支持桌面浏览器.可定制视频和 ...

随机推荐

  1. localStorage 2016/12/26

    在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k),localSt ...

  2. gulp教程之gulp-imagemin

    简介: 使用gulp-imagemin压缩图片文件(包括PNG.JPEG.GIF和SVG图片) 1.安装nodejs/全局安装gulp/本地安装gulp/创建package.json和gulpfile ...

  3. 关于java中创建文件,并且写入内容

    以下内容完全为本人原创,如若转载,请注明出自:http://www.cnblogs.com/XiOrang/ 前两天在项目中因为要通过http请求获取一个比较大的json数据(300KB左右)并且保存 ...

  4. ldconfig和ldd用法

    一.ldconfig ldconfig是一个动态链接库管理命令,为了让动态链接库为系统所共享,还需运行动态链接库的管理命令--ldconfig. ldconfig 命令的用途,主要是在默认搜寻目录(/ ...

  5. Angular js 之动态传数据到下一个页面和动态通过ng-click进入不同的页面

    +关于Angular js中一些千篇一律的后台获取数据 首先在services.js里面把服务写好 然后在controller里面把数据给打印出来 (首先需要把数据注入) +关于Angular js中 ...

  6. 国内技术管理人员批阅google的“春运交通图”项目(大公司下的高效率)<转载>

    在整理一份报告的时候,偶然看到2008年春节期间google推出的“春运交通图”项目建设历程报道,很受启发,随以国内的技术管理人员眼光批阅了这篇文章,同时也是自嘲吧. 以下黑色字体是原报道,红色字体是 ...

  7. 使用CSS3线性渐变实现图片闪光划过效果

    <p class="overimg"> <a><img src="http://www.nowamagic.net/librarys/ima ...

  8. eclipse 启动失败(找不到jvm)

    今天启动eclipse时提示了一个错误 在网上找到的解决方法是在eclipse的快捷方式中加入Java的JVM的路径,方法如下: 右键eclipse快捷方式 ->属性 在目标中  如果只有 D: ...

  9. 面试复习(C++)之希尔排序

    #include<iostream> using namespace std; void Shellsort(int *a,int len) { int gap; ;gap>;gap ...

  10. Scala的第一步

    第一步:学习使用Scala解释器 开始Scala最简单的方法是使用Scala解释器,它是一个编写Scala表达式和程序的交互式“shell”.在使用Scala之前需要安装Scala,可以参考 Firs ...