`

进度条 jquery

 
阅读更多 
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>数字统计，进度条动画</title>
<style type="text/css">
	b{display:block;float:left;height:20px;width:40px;}
	div{height:20px;}
	div.a_red{background:red;float:left;}
	div.b_green{background:green;float:left;}
	div.c_orange{background:orange;float:left;}
</style>
</head>
<body>
	<div class="a">
		<b>90</b><div class="a_red"></div>
	</div>
	<div class="b">
		<b>70</b><div class="b_green"></div>
	</div>
	<div class="c">
		<b>50</b><div class="c_orange"></div>
	</div>
<script type="text/javascript" src="http://www.codefans.net/ajaxjs/jquery1.3.2.js"></script>
<script type="text/javascript">
	window.onload=function(){
		var a_num=$("div.a b").text()*1;
		var b_num=$("div.b b").text()*1;
		var c_num=$("div.c b").text()*1;
		var a=1,b=1,c=1;
		var change_a=function(){
			$("div.a b").text(a);
			if(a<a_num){
				a++;
			}
		}
		var change_b=function(){
			$("div.b b").text(b);
			if(b<b_num){
				b++;
			}
		}
		var change_c=function(){
			$("div.c b").text(c);
			if(c<c_num){
				c++;
			}
		}
		var crear_a=setInterval(change_a,(3000/a_num));
		var crear_b=setInterval(change_b,(3000/b_num));
		var crear_c=setInterval(change_c,(3000/c_num));
		$("div.a_red").animate({width:(a_num*2)+"px"},3000);
		$("div.b_green").animate({width:(b_num*2)+"px"},3000);
		$("div.c_orange").animate({width:(c_num*2)+"px"},3000);		
	}
</script>
</body>
</html>

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// 





<style type="text/css">
body {
    font: 12px/1.5 arial,宋体;
}
html, body {
    color: #333333;
}
li.vl-item {
    float: left;
    width: 100%;
}
.app-vote ul, .app-vote ol, .app-vote li, .app-vote dl, .app-vote dt, .app-vote dd, .app-vote form, .app-vote p, .app-vote h1, .app-vote h2, .app-vote h3 {
    margin: 0;
    padding: 0;
}
.app-vote em {
    font-style: normal;
}
.app-vote ul, .app-vote ol {
    list-style: none outside none;
}
.vote-box-list {
    float: left;
    width: 586px;
}
#appVote .vote-action {
    margin-top: 30px;
    width: 60px;
}
.vote-box-list li {
	list-style: none outside none;
}
.vote-box-list li .vote-item-wrap {
    padding: 5px 0;
}
.vote-box-list li.over {
    background-color: #FFE57F;
}
.vote-box-list li h4 {
    font-size: 1em;
    font-weight: normal;
    overflow: hidden;
    text-align: right;
    width: 260px;
    word-wrap: break-word;
}
.vote-box-list li .litem {
    background: none repeat scroll 0 0 #EFEFEF;
    border: 1px solid #E2E2E2;
    height: 14px;
    width: 183px;
}
.vote-box-list li p, .vote-box-list li h4 {
    float: left;
    margin: 0;
    padding: 0;
}
.vote-box-list li p input {
    float: left;
    margin: 0;
}
.vote-box-list li em, .vote-box-list li span {
    float: left;
    height: 14px;
    overflow: hidden;
}
.vote-box-list li .vleft, .vote-box-list li .right {
    width: 2px;
}
.vnum {
    text-indent: 5px;
    width: 90px;
}
ul.vote-ctrl-act-sep {
    margin: 5px 0;
    overflow: hidden;
}
ul.vote-ctrl-act-sep li {
    border-bottom: medium none;
    border-right: 1px solid #000000;
    float: right;
    margin-right: -1px;
    padding: 0 10px;
}
#appVoteAddForm dt {
    clear: left;
    text-align: right;
    width: 150px;
}
#appVoteAddForm .txt {
    width: 400px;
}
#appVoteAddForm .vote {
    height: 300px;
    width: 400px;
}
#appVoteAddForm .tip {
    color: #6B6B6B;
}
#appVoteAddForm .back_block {
    margin: 6px 0;
    width: 550px;
}
#text_vote_area p.m {
    color: #355E9D;
}
#text_vote_area p.t {
    color: #999999;
}

</style>
<script type="text/javascript">
////jquery代码:
var Vote = {};

Vote.ListShow = (function() {
    var b, c, g, j;
    function a(k) {
        b = k.id;       
        g = k.percent;
        j = k.width;
        styleData = h();
        bindItems = d()
    }
    function d() {
        var o = [];
        m = $(".vote-item-wrap");
        for (var n = 0, k = m.length; n < k; n++) {
            o.push(m[n].children[1]);
        }
        
        return o
    }
    function h() {
        var o = [];
        var n = ["#5dbc5b", "#6c81b6", "#9eb5f0", "#a5cbd6", "#aee7f8", "#c2f263", "#d843b3", "#d8e929", "#e58652", "#e7ab6d", "#ee335f", "#fbe096", "#ffc535"];
        var q = n.slice();
        for (var p = 0, l = g.length; p < l; p++) {
            var k = Math.floor(Math.random() * q.length);
            o.push(q[k]);
            q.splice(k, 1);
            if (q.length == 0) {
                q = n.slice()
            }
        }
        return o
    }
    function f(l, k) {
        
        $(l.children[0]).css("background-color", k.color);
        $(l.children[1]).css({'background-color': k.color,'width': '0px'});
        $(l.children[2]).css("background-color", k.color);
    
    
    }
    function i() {
        var n = [];
        var l = [];
        for (var m = 0, k = g.length; m < k; m++) {
            f(bindItems[m], {color: styleData[m]});
            n.push(bindItems[m].children[1]);
            l.push(Math.round(g[m] * j))
        }
        e(n, 0, l, c)
    }
    function e(p, o, l, n) {        
         for (var r = 0, q = g.length; r < q; r++) {
             $(p[r]).animate({width: l[r]},"slow"); 
         }    
    }
    return {init: a,go: i}
})();
////调用方法:
Vote.ListShow.init({
    id: 'appVoteBox',   
    percent: [
        0.1, 0.61, 0.36, 0.13, 0.03],
    width: 183 - 2
});

Vote.ListShow.go();
 

</script>


<ul class="vote-box-list clearfix" id="appVoteBox">
  <li class="vl-item" id="voteItem0" >
    <div class="vote-item-wrap">
      <h4>A：</h4>
      <p class="litem"><em class=vleft></em><span></span><em class=vright></em>
      
      </p><span class=vnum>79（2%）</span>
     
    </div>
  <li class="vl-item" id="voteItem1" >
    <div class="vote-item-wrap">
      <h4>B：</h4>
      <p class="litem"><em class=vleft></em><span></span><em class=vright></em></p>
      <span class=vnum>1986（61%）</span>
      
    </div>
  <li class="vl-item" id="voteItem2">
    <div class="vote-item-wrap">
      <h4>C：</h4>
      <p class="litem"><em class=vleft></em><span></span><em class=vright></em></p>
      <span class=vnum>1153（36%）</span>
      
    </div>
  <li class="vl-item" id="voteItem3" >
    <div class="vote-item-wrap">
      <h4>D：</h4>
      <p class="litem"><em class=vleft></em><span></span><em class=vright></em></p>
      <span class=vnum>415（13%）</span>
      
    </div>
  <li class="vl-item" id="voteItem4" >
    <div class="vote-item-wrap">
      <h4>5：</h4>
      <p class="litem"><em class=vleft></em><span></span><em class=vright></em></p>
      <span class=vnum>89（3%）</span>
      
    </div>
</ul>
  • ii.rar (715 Bytes)
  • 下载次数: 14
分享到：
| SVN一些用法
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    进度条JQUERY DEMO

    总的来说，"进度条JQUERY DEMO"可能是一个包含HTML、CSS和JavaScript代码的示例项目，展示了如何利用JQUERY动态更新进度条的样式，以显示各种操作的进度。这个DEMO可以帮助开发者学习如何在实际项目中创建直观、响应...

    jquery 进度条

    jquery 进度条jquery 进度条jquery 进度条jquery 进度条jquery 进度条jquery 进度条jquery 进度条jquery 进度条jquery 进度条jquery 进度条jquery 进度条jquery 进度条jquery 进度条jquery 进度条jquery 进度条...

    进度条jquery+css3

    本文将详细讲解如何利用jQuery和CSS3来实现一个彩色、宽度和颜色可调整的进度条。 首先，jQuery是一个轻量级的JavaScript库，它简化了JavaScript的DOM操作、事件处理和动画制作。在创建进度条时，jQuery可以用来...

    动态进度条jQuery实现.rar

    在本教程中，我们将探讨如何使用jQuery库来实现一个动态进度条。jQuery是一个轻量级、功能丰富的JavaScript库，它简化了HTML文档遍历、事件处理、动画效果以及Ajax交互。 首先，确保你已经正确地在项目中引入了...

    jQuery进度条jquery-progressbar.zip

    jquery-progressbar 是一个显示在页面上滚动的进度指示器插件，它跟 YouTube 进度条相似。当页面加载时，YouTube 的页面进度条能指示，但是这个插件能在页面滚动时显示。 标签：jquery

    利用Ajax+Jquery实现异步进度条效果

    "利用Ajax+Jquery实现异步进度条效果"这个主题正是围绕这一目标展开，它涉及到C#后端开发、.NET框架、Ajax技术以及Jquery库的前端应用。下面将详细阐述这些知识点。 首先，C#是一种面向对象的编程语言，广泛应用于...

    索引按钮带进度条jQuery焦点图

    本案例中的“索引按钮带进度条jQuery焦点图”是专为麒麟游戏官网设计的一种焦点图实现方式，具有独特的交互特点。 首先，jQuery是一个流行的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务...

    jQuery带进度条幻灯片循环周期特效.zip

    【jQuery带进度条幻灯片循环周期特效】是一种在网页中实现动态展示多张图片或内容的交互式设计。这种特效结合了jQuery库的优势，利用JavaScript的高效性能和丰富的API，为用户提供了平滑的过渡效果和直观的进度指示...

    jQuery滚动页面显示文章预览进度条代码

    本文将详细介绍如何使用jQuery实现滚动页面显示文章预览进度条的功能。 首先，我们需要理解这个功能的基本原理。当用户滚动页面时，我们通过jQuery监听滚动事件，然后计算当前可视区域与整个文档的高度比例，这个...

    两款带进度条的jQuery焦点图

    标题中的“两款带进度条的jQuery焦点图”指的是利用JavaScript库jQuery实现的两种具有进度条功能的图片轮播效果。这种焦点图通常用于网站的首页或者其他需要展示多张图片的场合，通过进度条来增强用户体验，让用户...

    jquery 上传，批量上传 进度条显示

    当涉及到文件上传，尤其是批量上传和进度条显示时，jQuery 提供了一些强大的插件和方法来实现这些功能。在本篇文章中，我们将深入探讨如何利用 jQuery 实现文件上传，特别是批量上传和进度条显示的技术细节。 首先...

    jquery实现进度条特效

    jQuery，一个广泛使用的JavaScript库，提供了丰富的功能来简化DOM操作、事件处理和动画效果，其中包括实现进度条特效。本教程将详细介绍如何使用jQuery来创建自定义的进度条特效，并可以根据个人需求调整样式和风格...

    jquery 实现的进度条插件

    本篇文章将详细讲解如何利用jQuery实现一个进度条插件，以及其在程序进度显示和AJAX文件上传中的应用。 首先，进度条插件的核心功能是动态展示一个过程的完成度，它可以是一个下载、上传、渲染或其他耗时操作的状态...

    jquery_uploadify实现的下载进度条

    《使用jQuery Uploadify实现下载进度条的详细指南》 在Web开发中，用户交互体验是至关重要的，尤其是在处理文件上传和下载这样的操作时。jQuery Uploadify是一个强大的JavaScript库，能够提供丰富的文件上传功能，...

    jquery.timeliner时间轴幻灯片插件带时间提示的进度条

    jquery.timeliner时间轴幻灯片插件带时间提示的进度条 jquery.timeliner时间轴幻灯片插件带时间提示的进度条 jquery.timeliner时间轴幻灯片插件带时间提示的进度条

    jquery 动态进度条

    在本教程中，我们将探讨如何使用 jQuery 来创建一个动态进度条，这是一种常见的用户界面元素，可以用于显示加载状态、进度或评估等。 首先，我们需要引入 jQuery 库。在 `index.html` 文件中，你需要添加以下代码来...

    jQuery响应式流程步骤进度条插件.zip

    **jQuery响应式流程步骤进度条插件** 在Web开发中，流程步骤进度条是一种常见的UI元素，它能够清晰地向用户展示任务的进度或者多步骤流程的状态。jQuery，作为一个广泛使用的JavaScript库，提供了丰富的功能来简化...

Magicbox
Global site tag (gtag.js) - Google Analytics