js 實現一個可以手動調節的進度條
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
#box
{
position: relative;
width: 100px;
height: 50px;
margin: 50px auto 0;
}
#bg{
height: 16px;
margin-top: 19px;
border: 1px solid #ddd;
border-radius: 5px;
overflow: hidden;
}
#bgcolor
{
background: #5889B2;
width: 0;
height: 16px;
border-radius: 5px;
}
#bt
{
width: 34px;
height: 34px;
background: url(scroll.gif) no-repeat center center;
border-radius: 17px;
overflow: hidden;
position: absolute;
left: 0px;
margin-left: -15px;
top: -8px;
cursor: pointer;
}
#text{
width: 30px;
margin-top:-58px;
margin-left:850px;
font-size: 16px;
line-height: 2em;
text-align:center;
}
</style>
<script type="text/javascript" src="../../js/base/jquery-1.8.3.js"></script>
</head>
<body>
<div id="box">
<div id="bg">
<div id="bgcolor"></div>
</div>
<div id="bt"></div>
</div>
<div id="text"></div>
<div>
<input type="text" id="input" value=""/>
</div>
<script type="text/javascript">
(function($){
var $box = $('#box');
var $bg = $('#bg');
var $bgcolor = $('#bgcolor');
var $btn = $('#bt');
var $text = $('#text');
var statu = false;
var ox = 0;
var lx = 0;
var left = 0;
var bgleft = 0;
$btn.mousedown(function(e){
lx = $btn.offset().left;
ox = e.pageX - left;
statu = true;
});
$(document).mouseup(function(){
statu = false;
});
$box.mousemove(function(e){
if(statu){
left = e.pageX - ox;
if(left < 0){
left = 0;
}
if(left > 100){
left = 100;
}
$btn.css('left',left);
$bgcolor.width(left);
$text.html(parseInt(left) + '%');
$('#input').val(parseInt(left) + '%');
}
});
$bg.click(function(e){
if(!statu){
bgleft = $bg.offset().left;
left = e.pageX - bgleft;
if(left < 0){
left = 0;
}
if(left > 100){
left = 100;
}
$btn.css('left',left);
$bgcolor.stop().animate({width:left},100);
$text.html(parseInt(left) + '%');
$('#input').val(parseInt(left) + '%');
}
});
})(jQuery);
</script>
</body>
</html>
