菊花轉(zhuǎn)動的jquery加載動畫效果
更新時間：2018年08月19日 11:18:12 作者：酷jjs
我們這次給大家?guī)淼氖顷P于用jquery實現(xiàn)菊花轉(zhuǎn)動的加載動畫效果，以及相關實例代碼，有興趣的朋友可以學習下。
<!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(); //執(zhí)行l(wèi)oading動畫
});
</script>
</body>
</html>
mychajian.js的插件內(nèi)容：
;(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實現(xiàn)百分比圓餅效果
這篇文章主要為大家詳細介紹了jquery插件canvaspercent.js實現(xiàn)百分比圓餅效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
jquery ajax實現(xiàn)下拉框三級無刷新聯(lián)動,且保存保持選中值狀態(tài)
jquery ajax實現(xiàn)下拉框三級無刷新聯(lián)動,且保存保持選中值狀態(tài)。需要的朋友可以過來參考下，希望對大家有所幫助2013-10-10
Jquery Validation插件防止重復提交表單的解決方法
在項目開發(fā)中，測試人員報告缺陷說，即時有表單驗證，但是如果快速點擊兩下“提交”按鈕，系統(tǒng)會產(chǎn)生兩條相同的記錄。2010-03-03
這篇文章主要為大家詳細介紹了jQuery點擊輸入框顯示驗證碼圖片，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-05-05
使用jquery選擇器得到對應表單的jquery對象，然后使用attr方法修改對應的action,需要的朋友可以參考下2014-06-06
jQuery實現(xiàn)鼠標滑過鏈接控制圖片的滑動展開與隱藏效果
這篇文章主要介紹了jQuery實現(xiàn)鼠標滑過鏈接控制圖片的滑動展開與隱藏效果,涉及jQuery鼠標事件的響應及鏈式操作的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10
這篇文章主要介紹了解決jquery版本沖突的有效方法,對于web設計的兼容性調(diào)試很有借鑒價值,需要的朋友可以參考下2014-09-09
jQuery EasyUI 是一個基于 jQuery 的框架，集成了各種用戶界面插件，該框架提供了創(chuàng)建網(wǎng)頁所需的一切，幫助您輕松建立站點。本文給大家介紹JQuery EasyUI的一些常用組件，感興趣的的朋友一起學習吧2017-07-07
本篇文章主要介紹了jQuery鼠標懸停內(nèi)容動畫切換效果的實例。具有很好的參考價值。下面跟著小編一起來看下吧2017-04-04