jQuery实现的给图片点赞+1动画效果(附在线演示及demo源码下载)


Posted in Javascript onDecember 31, 2015

本文实例讲述了jQuery实现的给图片点赞+1动画效果。分享给大家供大家参考,具体如下:

运行效果截图如下:

jQuery实现的给图片点赞+1动画效果(附在线演示及demo源码下载)

点击此处查看在线演示。

完整实例代码点击此处本站下载。

具体代码如下:

<!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" />
<!--字体样式-->
<link rel="stylesheet" href="iconfont/iconfont.css" type="text/css" />
<!--必要样式-->
<link rel="stylesheet" href="css/index.css" type="text/css" />
<link rel="stylesheet" href="css/animate.css" type="text/css" />
<title>点击弹出 +1放大效果 </title>
</head>
<body>
<div class="box">
  <h1>APP主题界面设计大赛</h1>
  <div class="content">
    <p>故事从很久很久以前开始,远在宇宙的另一端有一个星球,叫作柚柚星(UU Star)。柚柚星人他们每天过着精彩而又快乐的生活,他们长的就像一只圆圆甜甜的柚子。他们出门或是买东西都开UU飞船,地球人管它叫UFO。他们有很多的圈子,都在这个星球附近,他们有的时候走到这里看看,有时又到那里瞧瞧。柚柚星人很勤劳,为什么这么说呐,因为他们喜欢做记录,无论好坏,总之记录就这么诞生了。他们最爱吃的是柚果,别看柚果不大,那里面有很多很多的能量哦。他们每天起床都会按一下闹钟,新的一天开始了,然后查看火箭有没有送来什么意外的惊喜。如果什么都没有的话,他们的卫星就会重新搜索。故事听到这里是不是觉得很神奇,那我们现在就去柚柚星看看吧!
    </p>
  </div>
</div>
<div class="opera">
  <span id="btn">
    <i class="iconfont"></i> 点击
  </span>
</div>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
(function ($) {
  $.extend({
    tipsBox: function (options) {
      options = $.extend({
        obj: null, //jq对象,要在那个html标签上显示
        str: "+1", //字符串,要显示的内容;也可以传一段html,如: "<b style='font-family:Microsoft YaHei;'>+1</b>"
        startSize: "12px", //动画开始的文字大小
        endSize: "30px", //动画结束的文字大小
        interval: 600, //动画时间间隔
        color: "red", //文字颜色
        callback: function () { } //回调函数
      }, options);
      $("body").append("<span class='num'>" + options.str + "</span>");
      var box = $(".num");
      var left = options.obj.offset().left + options.obj.width() / 2;
      var top = options.obj.offset().top - options.obj.height();
      box.css({
        "position": "absolute",
        "left": left + "px",
        "top": top + "px",
        "z-index": 9999,
        "font-size": options.startSize,
        "line-height": options.endSize,
        "color": options.color
      });
      box.animate({
        "font-size": options.endSize,
        "opacity": "0",
        "top": top - parseInt(options.endSize) + "px"
      }, options.interval, function () {
        box.remove();
        options.callback();
      });
    }
  });
})(jQuery);
function niceIn(prop){
  prop.find('i').addClass('niceIn');
  setTimeout(function(){
    prop.find('i').removeClass('niceIn');  
  },1000);    
}
$(function () {
  $("#btn").click(function () {
    $.tipsBox({
      obj: $(this),
      str: "+1",
      callback: function () {
      }
    });
    niceIn($(this));
  });
});
</script>
</body>
</html>

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合
Jan 12 Javascript
ASP.NET MVC中EasyUI的datagrid跨域调用实现代码
Mar 14 Javascript
jqTransform form表单美化插件使用方法
Jul 05 Javascript
JavaScript中的字符串操作详解
Nov 12 Javascript
基于javascript滚动图片具体实现
Nov 18 Javascript
jQuery使用load()方法载入另外一个网页文件内的指定标签内容到div标签的方法
Mar 25 Javascript
网页前端登录js按Enter回车键实现登陆的两种方法
May 10 Javascript
js学习总结_选项卡封装(实例讲解)
Jul 13 Javascript
在 Node.js 中使用原生 ES 模块方法解析
Sep 19 Javascript
浅谈Node.js爬虫之网页请求模块
Jan 11 Javascript
详解如何在vue项目中使用lodop打印插件
Sep 27 Javascript
jQuery.validate.js表单验证插件的使用代码详解
Oct 22 jQuery
jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)
Dec 31 #Javascript
AngularJS中实现显示或隐藏动画效果的方式总结
Dec 31 #Javascript
javascript数据类型验证方法
Dec 31 #Javascript
jQuery操作基本控件方法实例分析
Dec 31 #Javascript
javascript图片延迟加载实现方法及思路
Dec 31 #Javascript
jQuery动画显示和隐藏效果实例演示(附demo源码下载)
Dec 31 #Javascript
详解javascript高级定时器
Dec 31 #Javascript
You might like
PHP脚本的10个技巧(2)
2006/10/09 PHP
[企业公众号]升级到[企业微信]之后发送消息失败的解决方法
2017/06/30 PHP
PHP+Redis链表解决高并发下商品超卖问题(实现原理及步骤)
2020/08/03 PHP
文本框只能选择数据到文本框禁止手动输入
2013/11/22 Javascript
jquery简单的弹出层浮动层代码
2015/04/27 Javascript
jQuery插件bgStretcher.js实现全屏背景特效
2015/06/05 Javascript
JavaScript实现select添加option
2015/07/03 Javascript
理解Angular数据双向绑定
2016/01/10 Javascript
浅析JavaScript作用域链、执行上下文与闭包
2016/02/01 Javascript
javascript制作照片墙及制作过程中出现的问题
2016/04/04 Javascript
Bootstrap前端开发案例一
2016/06/17 Javascript
简单分析javascript中的函数
2016/09/10 Javascript
jquery获取easyui日期控件的值实现方法
2016/11/09 Javascript
footer定位页面底部(代码分享)
2017/03/07 Javascript
Angularjs根据json文件动态生成路由状态的实现方法
2017/04/17 Javascript
Angular 4依赖注入学习教程之ClassProvider的使用(三)
2017/06/04 Javascript
seajs实现强制刷新本地缓存的方法分析
2017/10/16 Javascript
详解nodejs通过响应回写的方式渲染页面资源
2018/04/07 NodeJs
JavaScript常见JSON操作实例分析
2018/08/08 Javascript
JavaScript设计模式之观察者模式与发布订阅模式详解
2020/05/07 Javascript
[03:49]DOTA2英雄基础教程 光之守卫
2014/01/14 DOTA
[58:42]DOTA2上海特级锦标赛C组败者赛 Newbee VS Archon第一局
2016/02/27 DOTA
Python常见文件操作的函数示例代码
2011/11/15 Python
python函数返回多个值的示例方法
2013/12/04 Python
将python文件打包exe独立运行程序方法详解
2020/02/12 Python
意大利运动服减价商店:ScontoSport
2020/03/10 全球购物
一道输出判断型Java面试题
2014/10/01 面试题
出纳的岗位职责
2013/11/09 职场文书
求职自荐信
2013/12/14 职场文书
外企求职信范文分享
2013/12/31 职场文书
大学毕业生个人自荐信范文
2014/01/08 职场文书
创业者迈进成功第一步:如何写创业计划书?
2014/03/22 职场文书
教师查摆问题自查报告
2014/10/11 职场文书
2015年安全生产月工作总结
2015/07/27 职场文书
mysql多表查询-笔记七
2021/04/05 MySQL
python使用tkinter实现透明窗体上绘制随机出现的小球(实例代码)
2021/05/17 Python