基于jquery的loading效果實(shí)現(xiàn)代碼
更新時(shí)間：2010年11月05日 22:32:59 作者：
基于jquery的loading效果實(shí)現(xiàn)代碼，需要的朋友可以參考下。
在代碼<head></head>里加入以下代碼：
<script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(window).load(function(){$("#loading").hide();})</script>
在里<body></body>加入以下代碼：
<div id="loading">Loading content, please wait..<img src="loading.gif" alt="loading.." /></div>
在里的這代碼必須保證在網(wǎng)頁載入的最前面。
接著是css代碼：
#loading{position:absolute;width:300px;top:0px;left:50%;margin-left:-150px;text-align:center;padding:7px 0 0 0;font:bold 11px Arial, Helvetica, sans-serif;}
一個(gè)基于jquery的loading效果就完成咯。
<script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(window).load(function(){$("#loading").hide();})</script>
在里<body></body>加入以下代碼：
<div id="loading">Loading content, please wait..<img src="loading.gif" alt="loading.." /></div>
在里的這代碼必須保證在網(wǎng)頁載入的最前面。
接著是css代碼：
#loading{position:absolute;width:300px;top:0px;left:50%;margin-left:-150px;text-align:center;padding:7px 0 0 0;font:bold 11px Arial, Helvetica, sans-serif;}
一個(gè)基于jquery的loading效果就完成咯。
您可能感興趣的文章:
- IOS中UIWebView加載Loading的實(shí)現(xiàn)方法
- 基于jquery的loading 加載提示效果實(shí)現(xiàn)代碼
- 擴(kuò)展easyui.datagrid，添加數(shù)據(jù)loading遮罩效果代碼
- 制作Flash Loading 加載進(jìn)度條
- 三款A(yù)ndroid炫酷Loading動(dòng)畫組件推薦
- JS Loading功能的簡(jiǎn)單實(shí)現(xiàn)
- js loading加載效果實(shí)現(xiàn)代碼
- 收集的幾個(gè)漂亮的loading圖片
- 很酷的javascript loading效果代碼
- iOS動(dòng)畫教你編寫Slack的Loading動(dòng)畫進(jìn)階篇
相關(guān)文章
Jquery Validation插件防止重復(fù)提交表單的解決方法
在項(xiàng)目開發(fā)中，測(cè)試人員報(bào)告缺陷說，即時(shí)有表單驗(yàn)證，但是如果快速點(diǎn)擊兩下“提交”按鈕，系統(tǒng)會(huì)產(chǎn)生兩條相同的記錄。2010-03-03
本篇文章主要給大家講述了用jquery如何寫出一個(gè)PC端的輪播圖效果的實(shí)例，有興趣的朋友參考下。2018-01-01
JQuery頁面圖片切換和新聞列表滾動(dòng)效果的具體實(shí)現(xiàn)
這篇文章介紹了JQuery頁面圖片切換和新聞列表滾動(dòng)效果的具體實(shí)現(xiàn)，有需要的朋友可以參考一下2013-09-09
jQuery實(shí)現(xiàn)優(yōu)雅的彈窗效果（6）
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)優(yōu)雅彈窗效果 的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
圖片放大鏡jquery.jqzoom.js使用實(shí)例附放大鏡圖標(biāo)
這篇文章主要介紹了圖片放大鏡jquery.jqzoom.js的使用另附放大鏡圖標(biāo),需要的朋友可以參考下2014-06-06
使用jquery獲取網(wǎng)頁中圖片的高度其實(shí)很簡(jiǎn)單，目前有兩種不錯(cuò)的方法可以實(shí)現(xiàn)，下面為大家詳細(xì)介紹下，有所疑惑的你可以參考下2013-09-09
jQuery實(shí)現(xiàn)簡(jiǎn)單評(píng)論區(qū)功能
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)簡(jiǎn)單評(píng)論區(qū)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-10-10
隨鼠標(biāo)上下滾動(dòng)，在某些時(shí)候需要類似的效果，下面有個(gè)不錯(cuò)的示例可以實(shí)現(xiàn)此效果，需要的朋友可以參考下2013-12-12
在jquery中combobox多選的不兼容問題總結(jié)
最近在IE10中開發(fā)jquery，關(guān)于jquery中combobox多選不能兼容的問題，進(jìn)行一些總結(jié)，感興趣的朋友可以了解下2013-12-12
jQuery實(shí)現(xiàn)模擬flash頭像裁切上傳功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)模擬flash頭像裁切上傳功能,結(jié)合實(shí)例形式分析了jQuery圖像剪切與文件傳輸相關(guān)操作技巧,需要的朋友可以參考下2016-12-12