菊花转动的jquery加载动画效果
更新时间：2018年08月19日 11:18:12 作者：酷jjs
我们这次给大家带来的是关于用jquery实现菊花转动的加载动画效果，以及相关实例代码，有兴趣的朋友可以学习下。
<!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);
效果图显示：
相关文章
$.fn是指jquery的命名空间，加上fn上的方法及属性，会对jquery实例每一个有效，下面简单为大家介绍下jquery $.fn $.fx到底是怎么一回事2013-11-11
jquery插件canvaspercent.js实现百分比圆饼效果
这篇文章主要为大家详细介绍了jquery插件canvaspercent.js实现百分比圆饼效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
jquery ajax实现下拉框三级无刷新联动,且保存保持选中值状态
jquery ajax实现下拉框三级无刷新联动,且保存保持选中值状态。需要的朋友可以过来参考下，希望对大家有所帮助2013-10-10
Jquery Validation插件防止重复提交表单的解决方法
在项目开发中，测试人员报告缺陷说，即时有表单验证，但是如果快速点击两下“提交”按钮，系统会产生两条相同的记录。2010-03-03
这篇文章主要为大家详细介绍了jQuery点击输入框显示验证码图片，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-05-05
使用jquery选择器得到对应表单的jquery对象，然后使用attr方法修改对应的action,需要的朋友可以参考下2014-06-06
这篇文章主要介绍了jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果,涉及jQuery鼠标事件的响应及链式操作的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-10-10
这篇文章主要介绍了解决jquery版本冲突的有效方法,对于web设计的兼容性调试很有借鉴价值,需要的朋友可以参考下2014-09-09
jQuery EasyUI 是一个基于 jQuery 的框架，集成了各种用户界面插件，该框架提供了创建网页所需的一切，帮助您轻松建立站点。本文给大家介绍JQuery EasyUI的一些常用组件，感兴趣的的朋友一起学习吧2017-07-07
本篇文章主要介绍了jQuery鼠标悬停内容动画切换效果的实例。具有很好的参考价值。下面跟着小编一起来看下吧2017-04-04
最新评论