菊花转动的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实现的MSBar2D图效果示例【附demo源码】
Mar 24 jQuery
快速掌握jquery分页插件jqPaginator的使用方法
Aug 09 jQuery
jQuery动态添加元素无法触发绑定事件的解决方法分析
Jan 02 jQuery
jQuery实现的简单图片轮播效果完整示例
Feb 08 jQuery
jQuery基于Ajax实现读取XML数据功能示例
May 31 jQuery
jQuery 实现批量提交表格多行数据的方法
Aug 09 jQuery
jquery分页插件pagination使用教程
Oct 23 jQuery
jQuery实现的点击显示隐藏下拉菜单功能完整示例
May 17 jQuery
JavaScript前端页面搜索功能案例【基于jQuery】
Jul 10 jQuery
jQuery实现全选、反选和不选功能的方法详解
Dec 04 jQuery
Jquery如何使用animation动画效果改变背景色的代码
Jul 20 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
谏山创故乡大分县日田市水坝将设立《进击的巨人》立艾伦、三笠以及阿尔敏的铜像!
2020/03/06 日漫
PHPMailer安装方法及简单实例
2008/11/25 PHP
PHP中计算字符串相似度的函数代码
2012/12/29 PHP
验证坐标在某坐标区域内php代码
2016/10/08 PHP
JavaScript encodeURI 和encodeURIComponent
2015/12/04 Javascript
jquery拖拽效果完整实例(附demo源码下载)
2016/01/14 Javascript
javascript日期比较方法实例分析
2016/06/17 Javascript
Bootstrap缩略图的创建方法
2017/03/22 Javascript
基于zepto.js实现手机相册功能
2017/07/11 Javascript
简单谈谈vue的过渡动画(推荐)
2017/10/11 Javascript
利用JS测试目标网站的打开响应速度
2017/12/01 Javascript
vue.js系列中的vue-fontawesome使用
2018/02/10 Javascript
微信小程序 JS动态修改样式的实现方法
2018/12/16 Javascript
Node.js 获取微信JS-SDK CONFIG的方法示例
2019/05/21 Javascript
基于jquery实现的tab选项卡功能示例【附源码下载】
2019/06/10 jQuery
python合并文本文件示例
2014/02/07 Python
python单元测试unittest实例详解
2015/05/11 Python
python3中rank函数的用法
2019/11/27 Python
python 项目目录结构设置
2020/02/14 Python
python如何将两张图片生成为全景图片
2020/03/05 Python
python实现Pyecharts实现动态地图(Map、Geo)
2020/03/25 Python
python和JavaScript哪个容易上手
2020/06/23 Python
keras实现VGG16方式(预测一张图片)
2020/07/07 Python
详解如何使用CSS3中的结构伪类选择器和伪元素选择器
2020/01/06 HTML / CSS
鼠标滚轮事件和Mac触控板双指事件
2019/12/23 HTML / CSS
英国一家专门出售品牌鞋子的网站:Allsole
2016/08/07 全球购物
外企办公室竞聘演讲稿
2013/12/29 职场文书
八年级音乐教学反思
2014/01/09 职场文书
主题婚礼策划方案
2014/02/10 职场文书
小学安全教育材料
2014/02/17 职场文书
应届毕业生自荐信例文
2014/02/26 职场文书
致短跑运动员加油稿
2015/07/21 职场文书
2016年国庆节宣传标语
2015/11/25 职场文书
配置nginx负载均衡
2022/05/06 Servers
一篇文章带你掌握SQLite3基本用法
2022/06/14 数据库
基于Python实现nc批量转tif格式
2022/08/14 Python