jQuery実装進捗バー
1550 ワード
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(function(){
$.extend({
my:function(){
//--------------------------------------------------------------
$('div').width(600)
.height(30)
.css('border','1px solid black')
$('div span').css('background-color','blue')
.css('color','white')
.height(30)
.animate({width:'500px'},
{duration:2500,
step:function(i){
var _v=Math.round(i*100/500);
$(this).text(_v+'%');
$('h3').text(_v+'%').offset({top:10, left:250})
},
complete:function(){
$(this).parent().hide();
}
})
//---------------------------------------------------------
}
});
$.my();
});
</script>
</head>
<body>
<div><span> dasfda </span></div><h3></h3>
</body>
</html>