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 07 Javascript
js 获取浏览器版本以此来调整CSS的样式
Jun 03 Javascript
vue+socket.io+express+mongodb 实现简易多房间在线群聊示例
Oct 21 Javascript
vue 解决addRoutes动态添加路由后刷新失效问题
Jul 02 Javascript
详解ESLint在Vue中的使用小结
Oct 15 Javascript
JavaScript的词法结构精华篇
Oct 17 Javascript
Vue传参一箩筐(页面、组件)
Apr 04 Javascript
vue+element+Java实现批量删除功能
Apr 08 Javascript
详解Vue 全局变量,局部变量
Apr 17 Javascript
javascript触发模拟鼠标点击事件
Jun 26 Javascript
js中console在一行内打印字符串和对象的方法
Sep 10 Javascript
二维码条形码生成的JavaScript脚本库
Jul 07 Javascript
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
模仿OSO的论坛(五)
2006/10/09 PHP
php 前一天或后一天的日期
2008/06/28 PHP
javascript 文档的编码问题解决
2009/03/01 Javascript
初窥JQuery-Jquery简介 入门了解篇
2010/11/25 Javascript
基于Jquery的$.cookie()实现跨越页面tabs导航实现代码
2011/03/03 Javascript
jQuery中bind()方法用法实例
2015/01/19 Javascript
SWFObject基本用法实例分析
2015/07/20 Javascript
jquery实现经典的淡入淡出选项卡效果代码
2015/09/22 Javascript
JavaScript中定义类的方式详解
2016/01/07 Javascript
基于JavaScript实现弹出框效果
2016/02/19 Javascript
第五篇Bootstrap 排版
2016/06/21 Javascript
Angular.js跨controller实现参数传递的两种方法
2017/02/20 Javascript
基于JavaScript实现图片连播和联级菜单实例代码
2017/07/28 Javascript
微信小程序使用request网络请求操作实例
2017/12/15 Javascript
vue iview组件表格 render函数的使用方法详解
2018/03/15 Javascript
Vue实现自定义下拉菜单功能
2018/07/16 Javascript
vue实现键盘输入支付密码功能
2018/08/18 Javascript
Vue CLI 2.x搭建vue(目录最全分析)
2019/02/27 Javascript
JS实现指定区域的全屏显示功能示例
2019/04/25 Javascript
python实现的解析crontab配置文件代码
2014/06/30 Python
深入解析Python中的list列表及其切片和迭代操作
2016/03/13 Python
Django中redis的使用方法(包括安装、配置、启动)
2018/02/21 Python
Python中将变量按行写入txt文本中的方法
2018/04/03 Python
python3 selenium自动化 frame表单嵌套的切换方法
2019/08/23 Python
基于Python和PyYAML读取yaml配置文件数据
2020/01/13 Python
离线状态下在jupyter notebook中使用plotly实例
2020/04/24 Python
解决python和pycharm安装gmpy2 出现ERROR的问题
2020/08/28 Python
如何通过python检查文件是否被占用
2020/12/18 Python
奥巴马演讲稿
2014/01/08 职场文书
简历中的自我评价怎么写
2014/01/29 职场文书
大学校运会广播稿
2014/02/03 职场文书
关于晚自习早退的检讨书
2014/09/13 职场文书
乡镇党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
2014党的群众路线教育实践活动学习心得体会
2014/10/31 职场文书
六年级语文教学反思
2016/03/03 职场文书
JS中一些高效的魔法运算符总结
2021/05/06 Javascript