菊花轉(zhuǎn)動(dòng)的jquery加載動(dòng)畫效果
更新時(shí)間：2018年08月19日 11:18:12 作者：酷jjs
我們這次給大家?guī)?lái)的是關(guān)于用jquery實(shí)現(xiàn)菊花轉(zhuǎn)動(dòng)的加載動(dòng)畫效果，以及相關(guān)實(shí)例代碼，有興趣的朋友可以學(xué)習(xí)下。
<!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動(dòng)畫
});
</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);
效果圖顯示：
您可能感興趣的文章:
- jquery ajax加載數(shù)據(jù)前臺(tái)渲染方式 不用for遍歷的方法
- JQuery Ajax動(dòng)態(tài)加載Table數(shù)據(jù)的實(shí)例講解
- jQuery實(shí)現(xiàn)動(dòng)態(tài)加載select下拉列表項(xiàng)功能示例
- jquery引入外部CDN 加載失敗則引入本地jq庫(kù)
- JS文件中加載jquery.js的實(shí)例代碼
- jQuery+datatables插件實(shí)現(xiàn)ajax加載數(shù)據(jù)與增刪改查功能示例
- jquery 實(shí)現(xiàn)拖動(dòng)文件上傳加載進(jìn)度條功能
- jQuery實(shí)現(xiàn)滾動(dòng)到底部時(shí)自動(dòng)加載更多的方法示例
相關(guān)文章
$.fn是指jquery的命名空間，加上fn上的方法及屬性，會(huì)對(duì)jquery實(shí)例每一個(gè)有效，下面簡(jiǎn)單為大家介紹下jquery $.fn $.fx到底是怎么一回事2013-11-11
jquery插件canvaspercent.js實(shí)現(xiàn)百分比圓餅效果
這篇文章主要為大家詳細(xì)介紹了jquery插件canvaspercent.js實(shí)現(xiàn)百分比圓餅效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
jquery ajax實(shí)現(xiàn)下拉框三級(jí)無(wú)刷新聯(lián)動(dòng),且保存保持選中值狀態(tài)
jquery ajax實(shí)現(xiàn)下拉框三級(jí)無(wú)刷新聯(lián)動(dòng),且保存保持選中值狀態(tài)。需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-10-10
Jquery Validation插件防止重復(fù)提交表單的解決方法
在項(xiàng)目開發(fā)中，測(cè)試人員報(bào)告缺陷說(shuō)，即時(shí)有表單驗(yàn)證，但是如果快速點(diǎn)擊兩下“提交”按鈕，系統(tǒng)會(huì)產(chǎn)生兩條相同的記錄。2010-03-03
這篇文章主要為大家詳細(xì)介紹了jQuery點(diǎn)擊輸入框顯示驗(yàn)證碼圖片，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-05-05
使用jquery選擇器得到對(duì)應(yīng)表單的jquery對(duì)象，然后使用attr方法修改對(duì)應(yīng)的action,需要的朋友可以參考下2014-06-06
jQuery實(shí)現(xiàn)鼠標(biāo)滑過(guò)鏈接控制圖片的滑動(dòng)展開與隱藏效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)鼠標(biāo)滑過(guò)鏈接控制圖片的滑動(dòng)展開與隱藏效果,涉及jQuery鼠標(biāo)事件的響應(yīng)及鏈?zhǔn)讲僮鞯南嚓P(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10
這篇文章主要介紹了解決jquery版本沖突的有效方法,對(duì)于web設(shè)計(jì)的兼容性調(diào)試很有借鑒價(jià)值,需要的朋友可以參考下2014-09-09
jQuery EasyUI 是一個(gè)基于 jQuery 的框架，集成了各種用戶界面插件，該框架提供了創(chuàng)建網(wǎng)頁(yè)所需的一切，幫助您輕松建立站點(diǎn)。本文給大家介紹JQuery EasyUI的一些常用組件，感興趣的的朋友一起學(xué)習(xí)吧2017-07-07
jQuery鼠標(biāo)懸停內(nèi)容動(dòng)畫切換效果
本篇文章主要介紹了jQuery鼠標(biāo)懸停內(nèi)容動(dòng)畫切換效果的實(shí)例。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-04-04