jQuery拖动进度条

<!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.w3school.com.cn/jquery/jquery.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>进度条</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>
时间: 2024-11-08 17:27:53

jQuery拖动进度条的相关文章

实现本地音乐选择,播放,带可拖动进度条

需求:项目需要实现扫描本地sdcard上的所有音乐.并且可以进行播放,带可拖动进度条. 实现步骤:1.每个音乐文件在数据中有一条记录,开启一个线程查找数据库找出所有音乐文件,根据后缀名进行过滤,用handle通知ListView展示                   2.ListView每一行设置单击事件,选中的那首歌曲进行播放.                   3.ListView每一行都有seekBar,根据item选中进行显示隐藏. 1. activity文件 SelectMusic

jQuery实现进度条效果代码_jquery

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

CSS,Jquery精美进度条和滑动条(滑块)插件

<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="keywords" content="Jquery精美进度条和滑动条插件,CSS精美进度条和滑动条插件,Html进度条插件,html滑动条插件"/> <meta name="description" content="CSS

Jquery Easyui进度条组件Progress使用详解(8)_jquery

本文实例为大家分享了Jquery Easyui进度条组件的实现代码,供大家参考,具体内容如下 加载方式 Class加载 <div class="easyui-progressbar" data-options="value:60" style="width:400px;"> </div> JS调用加载 <div id="box" style="width: 400px;">

基于jquery步骤进度条源码分享_jquery

基于jQuery网页步骤流程进度条代码里面包含两款不同效果的jQuery步骤进度条特效.效果图如下: 在线预览       源码下载 html代码: <div class="step_context test"></div> 当前步骤: 第<input type="text" value="5" id="currentStepVal" />步 <button onclick="

Flash播放器拖动进度条的制作

flash播放 如何做到Flash MV播放中的自由拖动呢,下面的这段代码,也许对大家有些帮助. //这是进度条的宽度:  w = 100;  Drag = false;  ball.onPress = function() {   if (_parent.Playing) {    Drag = true;    startDrag(this, false, 0, 0, w, 0);   }  };  function onMouseUp() {   if (Drag) {    //不知有没

播放器拖动进度条制作

效果如下: 点击这里下载源文件 草草做了个,有些小问题,不过基本上实现楼主的想法,嗯...这些天老是觉得时间不够用,又要上课又要玩游戏...这是进度条的代码: //这是进度条的宽度:  w = 100;  Drag = false;  ball.onPress = function() {   if (_parent.Playing) {    Drag = true;    startDrag(this, false, 0, 0, w, 0);   }  };  function onMous

基于HTML5 Ajax文件上传进度条如何实现(jquery版本)_AJAX相关

在上篇文章给大家介绍了这篇文章里面的后台Servlet.所以这里只看前台的JS代码. 首先HTML5用AJAX提交数据先要学习一个HTML5新增加的对象:FormData FormData 对象可以使用append 方法进行 key - value的数据添加,与以前我们常用的json不同的就是可以异步上传二进制文件. 1.FormDate对象的创建 var formData = new FormData(); 2.向 FormDate 对象添加数据 formData.append("catnam

基于Jquery插件Uploadify实现实时显示进度条上传图片_jquery

先了解了解Uploadify,具体内容如下 Uploadify是一个简单易用的多文件上传方案.作为一个Jquery插件,Uploadify使用简单,并具有高度的定制性. Uploadify特性: Uploadify简单说来,是基于Jquery的一款文件上传插件.它的功能特色总结如下: 1).支持单文件或多文件上传,可控制并发上传的文件数 2).在服务器端支持各种语言与之配合使用,诸如PHP,.NET,Java-- 3).通过参数可配置上传文件类型及大小限制 4).通过参数可配置是否选择文件后自动