菊花轉(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)文章
jQuery中常用動(dòng)畫效果函數(shù)(日常整理)
這篇文章主要介紹了小編日常收集整理的關(guān)于jQuery中常用動(dòng)畫效果函數(shù)的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-09-09jQuery form 表單驗(yàn)證插件(fieldValue)校驗(yàn)表單
這篇文章主要介紹了jQuery form 表單驗(yàn)證插件(fieldValue)校驗(yàn)表單的相關(guān)資料,需要的朋友可以參考下2016-01-01jQuery操作選中select下拉框的值代碼實(shí)例
這篇文章主要介紹了jQuery操作選中select下拉框的值代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-02-02jQuery實(shí)現(xiàn)可以計(jì)算進(jìn)制轉(zhuǎn)換的計(jì)算器
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)可以計(jì)算進(jìn)制轉(zhuǎn)換的計(jì)算器,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-10-10基于jQuery實(shí)現(xiàn)無(wú)縫輪播與左右點(diǎn)擊效果
在網(wǎng)頁(yè)中我們經(jīng)常會(huì)用到無(wú)縫輪播左右循環(huán)效果,今天腳本之家小編給大家?guī)?lái)了基于jQuery實(shí)現(xiàn)無(wú)縫輪播與左右點(diǎn)擊效果 ,感興趣的朋友參考下吧2018-05-05jquery 面包屑導(dǎo)航 具體實(shí)現(xiàn)
jquery 面包屑導(dǎo)航 具體實(shí)現(xiàn),需要的朋友可以參考一下2013-06-06