<!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" />
<script type="text/javascript" src="http://www.codefans.net/ajaxjs/jquery1.3.2.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$('.taskBox').delegate('.taskBoxLinks','mousemove',function(e){
var $mouse = e.pageX - $(this).offset().left;
var $span = Math.round($mouse/22.5)*10;
$(this).find('h4').stop().animate({width:$span+'%'},50);
$(this).next('span').text($span+'%');
}).delegate('.taskBoxLinks','mouseleave',function(){
$(this).find('h4').stop().animate({width:'10%'},50);
var $mousex = $(this).find('h3').width();
var $spanx = Math.round($mousex/22.5)*10;
if($spanx==100){
$(this).next('span').text('进度完成')
}else{
$(this).next('span').text($spanx+'%');
}
}).delegate('.taskBoxLinks','click',function(e){
var $mouse = e.pageX - $(this).offset().left;
var $span = Math.round($mouse/22.5)*10;
$(this).find('h3').stop().animate({width:$span+'%'},100);
if($span==100){
$(this).next('span').text('进度完成')
}
});
});
</script>
<title>jQuery进度条</title>
<style type="text/css">
body,td,th {
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
}
h1{ font-size:16px; color:#999; font-weight:normal; text-align:center; line-height:90px; border-top:1px dashed #ddd; margin-top:50px;}
*{ margin:0; padding:0;}
.taskBoxLinks { float:left; width:225px; height:7px; font-size:0; line-height:0; background:#f2f2f2; border:1px solid #dedede;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px; position:relative; margin-top:8px; margin-right:10px; cursor:pointer;}
.taskBoxLinks h3,.taskBoxLinks h4{ position:absolute; left:-1px; top:-1px; height:7px; font-size:0; line-height:0; width:10%; background:#a3d9f4; border:1px solid #187aab; -moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px; z-index:99;}
.taskBoxLinks h4 { border:1px solid #91cdea; background:#f5fafc; z-index:88;}
.taskBox { width:360px; margin:40px auto; color:#666;}
</style>
</head>
<body>
<div class="taskBox">
<div class="taskBoxLinks"><h3 style="width:10%;"></h3><h4></h4></div>进度<span>10%</span>
</div>
<div class="taskBox" style="padding-left:100px;">
<div class="taskBoxLinks"><h3 style="width:60%;"></h3><h4></h4></div>进度<span>60%</span>
</div>
<div class="taskBox">
<div class="taskBoxLinks"><h3 style="width:20%;"></h3><h4></h4></div>进度<span>20%</span>
</div>
<h1>by <a href="http://www.wweya.com">www.wweya.com</a></h1>
</body>
</html>
分享到：
相关推荐
创建一个JavaScript进度条涉及到以下几个关键知识点： 1. HTML结构：首先，你需要在HTML中创建一个基础的进度条结构，通常是一个`<div>`元素，设置相应的CSS样式来定义进度条的基本外观。例如： ```html ...
javascript进度条实例 进度条加载实例
`nanobar.js` 是一个专门为这个目的设计的轻量级、纯 JavaScript 的进度条插件。它具有小巧的体积，对旧版本浏览器（如 IE8）的良好兼容性，以及易于使用和自定义的特点，使得开发者能够轻松地在项目中集成进度条...
3. `CProgress.js`：这可能是一个JavaScript库，专门用于创建进度条。它可能包含了一系列的函数和方法，用于初始化、更新、控制进度条的显示，以及处理各种事件。 4. `ReadMe.txt`：这是一个常见文件，通常包含了...
总结起来，"JS进度条类模块示例"展示了如何利用JavaScript类来实现可复用的进度条组件。通过实例化多个类对象，我们可以创建页面上的多个独立进度条，同时通过类的方法来控制它们的进度和显示，为用户提供实时的进度...
在JavaScript（JS）开发中，有时我们需要处理与Excel文件的交互以及实现动态进度条功能。本文将详细探讨这两个主题，并提供相关的技术要点和实践方法。 首先，让我们关注JS导出Excel这一需求。在Web应用程序中，...
JavaScript 进度条是网页应用中常见的用户界面元素，用于展示任务或数据加载的进度，为用户提供实时反馈。在Web开发中，它们可以应用于文件上传、视频缓冲、数据下载等多种场景，提高用户体验。本资源包包含了12种...
简单的js进度条，在网络加载时使用，做过渡效果 ，非常适合新手学习参考
通过上述方法，我们可以创建一个高度可定制且功能强大的JavaScript进度条组件，适用于各种网页应用。无论是在文件上传、数据加载还是长时间运算的场景中，都能提供优秀的用户体验。这个"js完美进度条"的实现，无疑是...
JavaScript 进度条 用IE打开 JavaScript 进度条 用IE打开 JavaScript 进度条 用IE打开
JavaScript（简称JS）是一种轻量级的脚本语言，广泛应用于网页和网络应用开发，包括交互性、动态更新以及各种视觉效果的实现。在本文中，我们将深入探讨如何使用JavaScript来创建一个进度条，并实现同步增长的效果。...
"js进度条 js"指的是利用JavaScript来实现这种动态效果的技术。JavaScript作为客户端脚本语言，允许我们动态地更新页面内容，包括创建和控制进度条的显示和变化。 进度条的实现方式多种多样，但核心原理通常涉及...
MProgress.js是一款谷歌Material Design风格纯JS进度条插件。该进度条通过纯JS和CSS3来制作，没有外部依赖库。你可以通过MProgress.js制作出4种不同类型的Material Design风格进度条效果。
本篇文章将深入探讨如何使用JavaScript（JS）、HTML和CSS来实现一个动态的百分比进度条。首先，我们需要理解这三种技术在构建进度条中的角色。 **HTML**：HTML（超文本标记语言）用于构建页面的基本结构。在这里，...
JavaScript进度条是网页交互设计中常见的一种元素，用于表示任务的完成程度或数据加载状态，类似于在用友软件中看到的进度指示。这种组件能够提升用户体验，让用户了解操作的进度，减少用户等待的不确定性。本篇文章...
JavaScript 进度条是一种在网页上显示任务进度的可视化组件，通常用于文件上传、数据加载或其他需要用户等待的异步操作。它可以帮助用户了解当前操作的状态，提高用户体验。本篇文章将深入探讨如何使用 JavaScript ...
通用上传控件JS进度条源码 源码描述： 开发环境：vs2012（源代码复制到其他版本vs也可以用） 浏览器兼容：全部，需要支持Silverlight 技术特点： 单、多文件上传,js进度条，同页面支持无限个 功能描述： 同页面...
### JavaScript 进度条知识点详解 #### 一、概述 在网页开发中，为了提高用户体验，经常需要在页面上展示一些动态效果，如加载动画、进度条等。本篇文章将重点介绍如何使用JavaScript来实现一个客户端进度条。通过...
JavaScript 进度条是一种在网页上显示数据加载或处理...以上就是关于“JavaScript进度条”的相关知识点。在实际开发中，还需要考虑性能优化、错误处理以及不同浏览器的兼容性，以确保进度条在各种环境下都能正常工作。