菊花转动的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 相关文章推荐
HTML5+jQuery实现搜索智能匹配功能
Mar 24 jQuery
jQuery实现checkbox全选功能完整实例
Jul 12 jQuery
jQuery常见的遍历DOM操作详解
Sep 05 jQuery
使用jquery Ajax实现上传附件功能
Oct 23 jQuery
Jquery实现无缝向上循环滚动列表的特效
Feb 13 jQuery
基于jQuery的时间戳与日期间的转化
Jun 21 jQuery
jquery.pager.js分页实现详解
Jul 29 jQuery
jquery弹窗时禁止body滚动条滚动的例子
Sep 21 jQuery
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
Oct 26 jQuery
JQuery发送ajax请求时中文乱码问题解决
Nov 14 jQuery
JQuery+drag.js上传图片并且实现图片拖曳
Nov 18 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 向右侧拉菜单实现代码,测试使用中
2009/11/03 PHP
php使用GD实现颜色渐变实例
2015/06/02 PHP
9个比较实用的php代码片段
2016/03/15 PHP
PHP生成随机数的方法总结
2018/03/01 PHP
jquery 最简单的属性菜单
2009/10/08 Javascript
js 动态选中下拉框
2009/11/26 Javascript
动态加载JS文件的三种方法
2013/11/08 Javascript
js实现数组去重、判断数组以及对象中的内容是否相同
2013/11/29 Javascript
推荐25个超炫的jQuery网格插件
2014/11/28 Javascript
js实现简单鼠标跟随效果的方法
2015/04/10 Javascript
ECMAScript6中Set/WeakSet详解
2015/06/12 Javascript
zepto中使用swipe.js制作轮播图附swipeUp,swipeDown不起效果问题
2015/08/27 Javascript
JS基于ocanvas插件实现的简单画板效果代码(附demo源码下载)
2016/04/05 Javascript
AngularJs ng-route路由详解及实例代码
2016/09/14 Javascript
浅谈js中同名函数和同名变量的执行问题
2017/02/12 Javascript
JavaScript 上传文件(psd,压缩包等),图片,视频的实现方法
2017/06/19 Javascript
360提示[高危]使用存在漏洞的JQuery版本的解决方法
2017/10/27 jQuery
通过js示例讲解时间复杂度与空间复杂度
2019/08/06 Javascript
Vue中强制组件重新渲染的正确方法
2021/01/03 Vue.js
Tensorflow环境搭建的方法步骤
2018/02/07 Python
python实现requests发送/上传多个文件的示例
2018/06/04 Python
将python2.7添加进64位系统的注册表方式
2019/11/20 Python
解决pyPdf和pyPdf2在合并pdf时出现异常的问题
2020/04/03 Python
python3代码中实现加法重载的实例
2020/12/03 Python
基于HTML5 的人脸识别活体认证的实现方法
2016/06/22 HTML / CSS
毕业生自荐信的主要内容
2013/10/29 职场文书
教师自查自纠工作情况报告
2014/10/29 职场文书
护士长2014年度工作总结
2014/11/11 职场文书
担保书范本
2015/01/20 职场文书
春秋淹城导游词
2015/02/11 职场文书
护士求职自荐信
2015/03/25 职场文书
文艺晚会开场白
2015/05/29 职场文书
2015年党务工作者个人工作总结
2015/10/22 职场文书
高质量“欢迎词”
2019/04/03 职场文书
python开发的自动化运维工具ansible详解
2021/08/07 Python
详细介绍Next.js脚手架完整搭建封装
2022/04/26 Javascript