ホームページ > 記事 > ウェブフロントエンド > jQuery は、page_jquery の上部に表示される進行状況バー効果の完全な例を実装します。
jQuery は、page_jquery の上部に表示される進行状況バー効果の完全な例を実装します。
- WBOYオリジナル
- 2016-05-16 15:26:511256ブラウズ
この記事の例では、ページの上部に表示される進行状況バー効果を jQuery が実装する方法について説明します。参考のために皆さんと共有してください。詳細は次のとおりです:
具体的なコードは次のとおりです:
<!Doctype html>
<html>
<head>
<title>页面顶部显示的进度条效果</title>
<meta http-equiv=Content-Type content="text/html;charset=utf-8">
</head>
<body>
<div id="web_loading"><div></div></div>
<script src="jquery1.8.3.min.js" type="text/javascript"></script>
<script type="text/javascript">// < ![CDATA[
jQuery(document).ready(function(){
jQuery("#web_loading div").animate({width:"100%"},800,function(){
setTimeout(function(){jQuery("#web_loading div").fadeOut(500);
});
});
});
// ]]></script>
<style>
#web_loading{
z-index:99999;
width:100%;
}
#web_loading div{
width:0;
height:5px;
background:#FF9F15;
}
</style
</body>
</html>
完全なサンプルコードについてはここをクリックしてくださいこのサイトからダウンロードしてください。
この記事が jQuery プログラミングのすべての人に役立つことを願っています。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。