jQuery實現(xiàn)彩帶延伸效果的網(wǎng)頁加載條loading動畫
更新時間：2015年10月29日 11:25:46 作者：企鵝
這篇文章主要介紹了jQuery實現(xiàn)彩帶延伸效果的網(wǎng)頁加載條loading動畫,涉及jQuery動畫效果的實現(xiàn)技巧,非常簡單實用,需要的朋友可以參考下
本文實例講述了jQuery實現(xiàn)彩帶延伸效果的網(wǎng)頁加載條loading動畫。分享給大家供大家參考，具體如下：
這里介紹的jQuery彩帶效果網(wǎng)頁加載條動畫，我覺得挺有創(chuàng)意的，雖然難度不算大，但能想到用這樣一個背景來做Loading加載條，也實屬不易，不服氣的，你為什么就沒有想到這樣做呢？本網(wǎng)頁加載條效果使用了jQuery插件。
運行效果截圖如下：
在線演示地址如下：
http://demo.jb51.net/js/2015/jquery-n-color-cha-web-loading-demo/
具體代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>頁面初加載的動畫</title>
<style type="text/css">
body{margin:0;}
.top_bg{height:5px;width:0;background-color:#093; background-image:url(images/colorbg.png);}/*如果你喜歡博主的那個彩帶背景歡迎下載，直接把background:#f03換成背景*/
</style>
<script src="jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
//頂部背景動畫
$(".top_bg").animate({
width: "100%"
},
{
queue: false,
duration:4000
});
})
</script>
</head>
<body>
<div class="top_bg"></div>
</body>
</html>
希望本文所述對大家jQuery程序設(shè)計有所幫助。
您可能感興趣的文章:
相關(guān)文章
jquery 輸入框數(shù)字限制插件，需要的朋友可以參考下。2009-11-11
這篇文章主要介紹了jquery自動切換tabs選項卡的具體實現(xiàn)，有需要的朋友可以參考一下2013-12-12
jQuery實現(xiàn)獲取選中復(fù)選框的值實例詳解
這篇文章主要介紹了jQuery實現(xiàn)獲取選中復(fù)選框的值，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-06-06
基于jQuery實現(xiàn)圖片的前進(jìn)與后退功能
前進(jìn)與后退在瀏覽網(wǎng)頁的時候是比較常見的而且非常的實用，接下來為大家分享下使用jQuery實現(xiàn)圖片的前進(jìn)與后退，感興趣的朋友可以參考下哈2013-04-04
輕松學(xué)習(xí)jQuery插件EasyUI EasyUI創(chuàng)建菜單與按鈕
這篇文章主要幫助大家輕松學(xué)習(xí)jQuery插件EasyUI，重點是EasyUI創(chuàng)建菜單與按鈕，按鈕分為鏈接按鈕、菜單按鈕、分割按鈕，對這方面感興趣的小伙伴們可以參考一下2015-11-11
jQuery(1.6.3) 中css方法對浮動的實現(xiàn)缺陷分析
JavaScript中設(shè)置元素的浮動屬性（float），標(biāo)準(zhǔn)瀏覽器使用cssFloat，IE舊版本使用styleFloat。2011-09-09
each() 方法規(guī)定為每個匹配元素規(guī)定運行的函數(shù)。這篇文章主要給大家介紹jQuery中each方法的使用詳解，需要的朋友參考下吧2018-03-03
這篇文章主要介紹了jquery復(fù)選框多選賦值給文本框的方法,涉及jQuery相關(guān)選擇器的使用技巧,需要的朋友可以參考下2015-01-01
這篇文章主要為大家詳細(xì)介紹了jQuery選擇器之屬性過濾選擇器，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-09-09
這篇文章主要介紹了jQuery點擊其他地方時菜單消失的實現(xiàn)方法,結(jié)合實例形式分析了jQuery實現(xiàn)點擊其他地方讓菜單消失的實現(xiàn)思路與解決方法,需要的朋友可以參考下2016-04-04