菊花转动的jquery加载动画效果


Posted in jQuery onAugust 19, 2018
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
 
  <title>Title</title>
  <link charset="utf-8" href="css/reset.css" rel="external nofollow" rel="stylesheet">
  <link charset="utf-8" href="css/main.css" rel="external nofollow" rel="stylesheet">
 
  <style>
    .box{width:200px;height:200px;background:#000000;}
    .xxloading{width:100%;height:100%;background:rgba(255,255,255,0.2);}
    .xxloading .xximg{width:100%;height:100%;background:url("../img/ico/loading2.gif") no-repeat center;}
  </style>
 
  <script src="js/jquery-1.8.3.min.js"></script>
  <script src="js/mychajian.js"></script> <!-- 添加jq的loading插件-->
</head>
<body>
 
 
 
 
<div class="box"></div>
 
 
 
<script>
 
  $(function () {
 
    $(".box").myloading(); //执行loading动画
  });
 
</script>
 
</body>
</html>

mychajian.js的插件内容:

;(function($){
 
  $.fn.extend({
    myloading:function(obj){
 
      var str=[" <div class=\"xxloading\">",
        "    <div class=\"xximg\"></div>",
        "  </div>"].join("");
      
      return this.append(str);
 
    }
 
  });
})(jQuery);

效果图显示:

菊花转动的jquery加载动画效果

jQuery 相关文章推荐
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
Mar 28 jQuery
jQuery插件FusionCharts绘制的2D条状图效果【附demo源码】
May 13 jQuery
jQuery导航条固定定位效果实例代码
May 26 jQuery
jquery网页加载进度条的实现
Jun 01 jQuery
jQuery Collapse1.1.0折叠插件简单使用
Aug 28 jQuery
jQuery实现切换隐藏与显示同时切换图标功能
Oct 29 jQuery
jquery动态添加以及遍历option并获取特定样式名称的option方法
Jan 29 jQuery
基于jQuery.i18n实现web前端的国际化
May 04 jQuery
js与jQuery实现获取table中的数据并拼成json字符串操作示例
Jul 12 jQuery
jquery ajax加载数据前台渲染方式 不用for遍历的方法
Aug 09 jQuery
jQuery实现简单弹幕效果
Nov 28 jQuery
jQuery实现手风琴效果(蒙版)
Jan 11 jQuery
jQuery中常用动画效果函数知识点整理
Aug 19 #jQuery
jQuery UI实现动画效果代码分享
Aug 19 #jQuery
jquery实现的简单轮播图功能【适合新手】
Aug 17 #jQuery
jQuery实现的页面弹幕效果【测试可用】
Aug 17 #jQuery
jQuery实现轮播图及其原理详解
Apr 12 #jQuery
jQuery实现参数自定义的文字跑马灯效果
Aug 15 #jQuery
jQuery轮播图实例详解
Aug 15 #jQuery
You might like
php反射应用示例
2014/02/25 PHP
ThinkPHP 3.2.3实现页面静态化功能的方法详解
2017/08/03 PHP
thinkphp 中的volist标签在ajax操作中的特殊性(推荐)
2018/01/15 PHP
IE6下JS动态设置图片src地址问题
2010/01/08 Javascript
NodeJs中的非阻塞方法介绍
2012/06/05 NodeJs
javascript变量作用域使用中常见错误总结
2013/03/26 Javascript
jquery iframe操作详细解析
2013/11/20 Javascript
JavaScript中this关键词的使用技巧、工作原理以及注意事项
2014/05/20 Javascript
javascript函数式编程实例分析
2015/04/25 Javascript
JS日期格式化之javascript Date format
2015/10/01 Javascript
jQuery实现弹幕效果
2017/02/17 Javascript
canvas实现图片根据滑块放大缩小效果
2017/02/24 Javascript
使用Bootstrap打造特色进度条效果
2017/05/02 Javascript
Angular中实现树形结构视图实例代码
2017/05/05 Javascript
jquery对table做排序操作的实例演示
2017/08/10 jQuery
微信小程序实现展示评分结果功能
2019/02/15 Javascript
RxJS的入门指引和初步应用
2019/06/15 Javascript
ES6 let和const定义变量与常量的应用实例分析
2019/06/27 Javascript
详解nginx配置vue h5 history去除#号
2020/11/09 Javascript
如何搜索查找并解决Django相关的问题
2014/06/30 Python
Python实现的数据结构与算法之双端队列详解
2015/04/22 Python
Python动刷新抢12306火车票的代码(附源码)
2018/01/24 Python
python逐行读写txt文件的实例讲解
2018/04/03 Python
Django重设Admin密码过程解析
2020/02/10 Python
Python如何使用turtle库绘制图形
2020/02/26 Python
Django 返回json数据的实现示例
2020/03/05 Python
pytorch 限制GPU使用效率详解(计算效率)
2020/06/27 Python
香港连卡佛百货官网:Lane Crawford
2019/09/04 全球购物
应征英语教师求职信
2013/11/27 职场文书
运动会入场词200字
2014/02/15 职场文书
岗位明星事迹材料
2014/05/18 职场文书
2014学校领导四风对照检查材料思想汇报
2014/09/23 职场文书
计划生育汇报材料
2014/12/26 职场文书
世界名著读书笔记
2015/06/25 职场文书
预备党员表决心的话
2015/09/22 职场文书
2016年基层党支部书记公开承诺书
2016/03/25 职场文书