JS特效-鼠标事件-进度条
凤柏
这是今天写的进度条案例，主要用到了鼠标事件，分享出来给大家~
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>进度条</title>
<style>
#progress{
width: 1000px;
height: 35px;
line-height: 35px;
margin: 100px auto;
position: relative;
}
#progress_bar{
width: 900px;
height: 100%;
background: #e8e8e8;
border-radius: 8px;
}
#progress_bar_fg{
width: 0;
height: 100%;
background: orange;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}
span{
position: absolute;
top: -7px;
left: 0;
width: 30px;
height: 49px;
background: orange;
border-radius: 5px;
cursor: pointer;
}
#progress_value{
position: absolute;
right: 30px;
top: 0;
}
</style>
</head>
<body>
<div id="progress">
<div id="progress_bar">
<div id="progress_bar_fg"></div>
<span></span>
</div>
<div id="progress_value">0%</div>
</div>
<script>
window.onload = function(){
// 1.获取需要的标签
var oProgress = document.getElementById('progress');
var oProgress_bar = oProgress.children[0];
var oProgress_value = oProgress.children[1];
var oProgress_bar_fg = oProgress_bar.children[0];
var mask = oProgress_bar.children[1];
// 2.监听鼠标按下
mask.onmousedown= function(e){
// 2.1获取初始位置
var event = e || event;
// var x = event.clientX - oProgress.offsetLeft;
// 2.2监听鼠标的移动 将事件源给document比较合理 记住return false;
document.onmousemove = function(e){
var event = e || event;
// 2.3获取移动的位置
// event.clientX - oProgress.offsetLeft
var x = event.clientX - oProgress.offsetLeft;
if( x<=0 ){
x = 0;
}else if( x>=oProgress_bar.offsetWidth - mask.offsetWidth ){
x=oProgress_bar.offsetWidth - mask.offsetWidth;
}
mask.style.left = x + 'px';
oProgress_bar_fg.style.width = x + 'px';
oProgress_bar_fg.style.backgroundColor = 'orange';
oProgress_value.innerHTML = parseInt((x/870)*100) + '%';
return false;
}
}
document.onmouseup = function(){
document.onmousemove=null;
}
}
</script>
</body>
</html>备注：直接复制可以用
类似资料：