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 相关文章推荐
js对象关系图 方便dom操作
Mar 18 Javascript
jquery.blockUI.js上传滚动等待效果实现思路及代码
Mar 18 Javascript
Jquery读取URL参数小例子
Aug 30 Javascript
node.js中的fs.writeFileSync方法使用说明
Dec 14 Javascript
JavaScript通过字典进行字符串翻译转换的方法
Mar 19 Javascript
js焦点文字滚动效果代码分享
Aug 25 Javascript
5分钟打造简易高效的webpack常用配置
Jul 04 Javascript
轻量级富文本编辑器wangEditor结合vue使用方法示例
Oct 10 Javascript
支付宝小程序自定义弹窗dialog插件的实现代码
Nov 30 Javascript
vue element upload组件 file-list的动态绑定实现
Oct 11 Javascript
Vuex modules模式下mapState/mapMutations的操作实例
Oct 17 Javascript
JS数组方法join()用法实例分析
Jan 18 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
php下使用SimpleXML 处理XML 文件
2010/02/27 PHP
第四章 php数学运算
2011/12/30 PHP
PHP代码网站如何防范SQL注入漏洞攻击建议分享
2012/03/01 PHP
PHP 自定义错误处理函数的使用详解
2013/05/10 PHP
将word转化为swf 如同百度文库般阅读实现思路及代码
2013/08/09 PHP
PHP实现的简单mock json脚本分享
2015/02/10 PHP
Laravel中Facade的加载过程与原理详解
2017/09/22 PHP
Thinkphp5框架ajax接口实现方法分析
2019/08/28 PHP
Laravel 自带的Auth验证登录方法
2019/09/30 PHP
Jquery ThickBox插件使用心得(不建议使用)
2010/09/08 Javascript
Mac地址验证的javascript代码
2013/11/09 Javascript
jquery清空表单数据示例分享
2014/02/13 Javascript
js实现点击图片将图片地址复制到粘贴板的方法
2015/02/16 Javascript
使用bootstrap typeahead插件实现输入框自动补全之问题及解决办法
2016/07/07 Javascript
微信小程序 MD5加密登录密码详解及实例代码
2017/01/12 Javascript
关于定制FileField中的上传文件名称问题
2017/08/22 Javascript
Vue 使用 Mint UI 实现左滑删除效果CellSwipe
2018/04/27 Javascript
总结JavaScript在IE9之前版本中内存泄露问题
2018/04/28 Javascript
JavaScript原型链与继承操作实例总结
2018/08/24 Javascript
ES6中let 和 const 的新特性
2018/09/03 Javascript
详解javascript设计模式三:代理模式
2019/03/25 Javascript
微信小程序项目总结之记账小程序功能的实现(包括后端)
2019/08/20 Javascript
[45:38]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#1Liquid VS Alliance第一局
2016/03/02 DOTA
玩转python爬虫之cookie使用方法
2016/02/17 Python
浅析Python数据处理
2018/05/02 Python
Python3爬虫爬取百姓网列表并保存为json功能示例【基于request、lxml和json模块】
2018/12/05 Python
使用 Django Highcharts 实现数据可视化过程解析
2019/07/31 Python
Python 实现一个手机号码获取妹子名字的功能
2019/09/25 Python
django中瀑布流写法实例代码
2019/10/14 Python
python opencv 图像边框(填充)添加及图像混合的实现方法(末尾实现类似幻灯片渐变的效果)
2020/03/09 Python
python和go语言的区别是什么
2020/07/20 Python
HTML5 Canvas标签使用收录
2009/07/07 HTML / CSS
工程项目经理岗位职责
2013/12/15 职场文书
销售人员职业生涯规划范文
2014/03/01 职场文书
nginx配置ssl实现https的方法示例
2021/03/31 Servers
浅谈Vue的computed计算属性
2022/03/21 Vue.js