源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

jquery 简单的进度条实现代码

  • 时间:2021-02-17 12:35 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:jquery 简单的进度条实现代码
其实我本来的计划是做网页设计师的,可是没有人认为我设计的好,哥到现在还没有工作,发泄一下,不多说了。 效果图 [img]http://files.jb51.net/upload/2010-3/20100311165403890.jpg[/img] 需要用到的图片: 背景图片: [img]http://files.jb51.net/upload/2010-3/20100311165403426.png[/img] 进度显示图片: [img]http://files.jb51.net/upload/2010-3/20100311165403115.png[/img] 网页结构:
[u]复制代码[/u] 代码如下:
<div id="center"> <div id="message"></div> <div id="loading"><div></div></div> </div>
css代码: 代码
[u]复制代码[/u] 代码如下:
#center{ margin:50px auto; width:400px; } #loading{ width:397px; height:49px; background:url(bak.png) no-repeat; } #loading div{ width:0px; height:48px; background:url(pro.png) no-repeat; color:#fff; text-align:center; font-family:Tahoma; font-size:18px; line-height:48px; } #message{ width:200px; height:35px; font-family:Tahoma; font-size:12px; background-color:#d8e7f0; border:1px solid #187CBE; display:none; line-height:35px; text-align:center; margin-bottom:10px; margin-left:50px;
JavaScript代码: 代码
[u]复制代码[/u] 代码如下:
<script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript"> var progress_id = "loading"; function SetProgress(progress) { if (progress) { $("#" + progress_id + " > div").css("width", String(progress) + "%"); //控制#loading div宽度 $("#" + progress_id + " > div").html(String(progress) + "%"); //显示百分比 } } var i = 0; function doProgress() { if (i > 100) { $("#message").html("加载完毕!").fadeIn("slow");//加载完毕提示 return; } if (i <= 100) { setTimeout("doProgress()", 100); SetProgress(i); i++; } } $(document).ready(function() { doProgress(); }); </script>
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部