信鸽网

jQuery实现进度条效果代码

  作者：bea

在某些特定的场景下，应用进度条效果，可以提高网站的人性化程度，能够让用户能够掌握进度，增加对进度的耐心，否则可能直接导致关闭页面，从来导致网站流失用户，下面就是用过jQuery实现的进度效果代码。 <!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="aut

在某些特定的场景下，应用进度条效果，可以提高网站的人性化程度，能够让用户能够掌握进度，增加对进度的耐心，否则可能直接导致关闭页面，从来导致网站流失用户，下面就是用过jQuery实现的进度效果代码。




<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="author" content="http://www.softwhy.com/" />

<title>jQuery进度条效果代码</title>

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>

<style type="text/css">

#progress 

{

 background:white;

 height:20px;

 padding:2px;

 border:1px solid green;

 margin:2px;

}

#progress span 

{

 background:green;

 height:16px;

 text-align:center;

 padding:1px;

 margin:1px;

 display:block;

 color:yellow;

 font-weight:bold;

 font-size:14px;

 width:0%;

}

</style>

<script type="text/javascript"> 

 var progress_node_id = "progress"; 

 function SetProgress(progress) { 

 if (progress) { 

 $("#" + progress_node_id + " > span").css("width", String(progress) + "%"); 

 $("#" + progress_node_id + " > span").html(String(progress) + "%"); 

 } 

 } 

 var i = 0; 

 function doProgress() { 

 if (i > 100) { 

 alert("Progress Bar Finished!"); 

 return; 

 } 

 if (i <= 100) { 

 setTimeout("doProgress()", 500); 

 SetProgress(i); 

 i++; 

 } 

 } 

 $(document).ready(function() { 

 doProgress(); 

 }); 

</script>

</head>

<body>

<h1>jQuery实现进度条效果代码</h1>

<p>原理就是使用 Javascript 控制 SPAN CSS 的宽度（以及其他的样式），刷新查看</p>

<div id="progress"><span></span></div>

</body>

</html>


以上就是jQuery实现进度条效果代码，希望对大家的学习jquery程序设计有所帮助




有用  |  无用

猜你喜欢

您可能感兴趣的文章: