菊花转动的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 Ajax实现Select动态添加数据
Jun 08 jQuery
基于jQuery Easyui实现登陆框界面
Jul 10 jQuery
使用jQuery实现购物车结算功能
Aug 15 jQuery
一个有意思的鼠标点击文字特效jquery代码
Sep 23 jQuery
jquery+css3实现熊猫tv导航代码分享
Feb 12 jQuery
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
Apr 26 jQuery
JS/jQuery实现简单的开关灯效果【案例】
Feb 19 jQuery
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
Jun 10 jQuery
jquery实现下载图片功能
Jul 18 jQuery
jQuery操作动画完整实例分析
Jan 10 jQuery
jQuery 动态粒子效果示例代码
Jul 07 jQuery
Jquery cookie插件实现原理代码解析
Aug 04 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
星际原理概述
2020/03/04 星际争霸
php中$_REQUEST、$_POST、$_GET的区别和联系小结
2011/11/23 PHP
雄兵连第三季海报曝光,艾妮熙德成主角,蔷薇新造型
2021/03/09 国漫
JavaScript Base64编码和解码,实现URL参数传递。
2006/09/18 Javascript
js url传值中文乱码之解决之道
2009/11/20 Javascript
JavaScript的document对象和window对象详解
2010/12/30 Javascript
JQquery的一些使用心得分享
2012/08/01 Javascript
jQuery动态显示和隐藏datagrid中的某一列的方法
2013/12/11 Javascript
javascript:json数据的页面绑定示例代码
2014/01/26 Javascript
Jquery插件分享之气泡形提示控件grumble.js
2014/05/20 Javascript
用JavaScript实现页面重定向功能的教程
2015/06/04 Javascript
JavaScript中的lastIndexOf()方法使用详解
2015/06/06 Javascript
JS使用正则表达式过滤多个词语并替换为相同长度星号的方法
2016/08/03 Javascript
jquery实现图片上传前本地预览
2017/04/28 jQuery
nodejs socket服务端和客户端简单通信功能
2017/09/14 NodeJs
VUE中的无限循环代码解析
2017/09/22 Javascript
JS实现移动端触屏拖拽功能
2018/07/31 Javascript
详解基于vue-cli3.0如何构建功能完善的前端架子
2018/10/09 Javascript
使用Angular 6创建各种动画效果的方法
2018/10/10 Javascript
django js 实现表格动态标序号的实例代码
2019/07/12 Javascript
vue滚动tab跟随切换效果
2020/06/29 Javascript
python中引用与复制用法实例分析
2015/06/04 Python
在python中利用GDAL对tif文件进行读写的方法
2018/11/29 Python
Python高斯消除矩阵
2019/01/02 Python
Python利用lxml模块爬取豆瓣读书排行榜的方法与分析
2019/04/15 Python
Python字典生成式、集合生成式、生成器用法实例分析
2020/01/07 Python
Python3.9又更新了:dict内置新功能
2020/02/28 Python
基于Python实现视频的人脸融合功能
2020/06/12 Python
如何使用PyCharm引入需要使用的包的方法
2020/09/22 Python
HTML5输入框下拉菜单功能的示例代码
2020/09/08 HTML / CSS
中国最大隐形眼镜网上商城:视客眼镜网
2016/10/30 全球购物
Monnier Frères美国官网:法国知名奢侈品网站
2016/11/22 全球购物
eBay爱尔兰站:eBay.ie
2019/08/09 全球购物
JSP&Servlet技术面试题
2015/05/21 面试题
劳资人员岗位职责
2013/12/19 职场文书
区域经理岗位职责
2015/02/02 职场文书