<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>进度条</title>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"/>
<script src="jquery/jQuery-2.2.0.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<style type="text/css">
#div1 {
width: 600px;
height: 20px;
background: orange;
position: relative;
margin: 50px auto;
}
#div2 {
width: 20px;
height: 20px;
background: green;
position: absolute;
}
#div3 {
width: 0;
height: 0;
margin: 20px auto;
}
#div3 img {
width: 100%;
height: 100%;
}
</style>
<div id="div1">
<div id="div2"></div>
</div>
<div id="div3">
<img src="">
</div>
<script type="text/javascript">
var oDiv1 = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
var oDiv3 = document.getElementById('div3');
oDiv2.onmousedown = function(ev) { //鼠标按下的时候
var oEvent = ev || event; //ev 成立时 oEvent = event，否则 oEvent = ev , 事件对象 兼容处理
var disX = oEvent.clientX - oDiv2.offsetLeft; //鼠标当前相对于左面的距离
document.onmousemove = function(ev) { //鼠标指针移动时
var oEvent = ev || event; //当前的事件对象 oDiv2
var l = oEvent.clientX - disX; //oEvent.clientX 表示 oDiv2相对于页面左侧的距离，l表示现在的大小
if (l < 0) { //小于规定距离时
l = 0; //初始化距离
}else if (l > oDiv1.offsetWidth - oDiv2.offsetWidth) { //超出内容的时候
l = oDiv1.offsetWidth - oDiv2.offsetWidth; //使用最大内容
}
oDiv2.style.left = l + 'px'; //l范围：[0,580] ， 控制的滚动距离
//document.title = l / 580; //范围：[0,1]
var ratio = oDiv1.offsetWidth - oDiv2.offsetWidth; //总的大小
var scale = l / ratio; //l表示现在的大小,scale增加的百分比
var w = 600 * scale; //图片宽度
var h = 370 * scale; //图片高度
oDiv3.style.cssText = ';width:' + w + 'px;height:' + h +'px;'; //改变图片的值
};
document.onmouseup = function() {
document.onmousemove = null;
document.onmouseup = null;
};
};
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>进度条</title>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"/>
<script src="jquery/jQuery-2.2.0.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<style type="text/css">
#div1 {
width: 600px;
height: 20px;
background: orange;
position: relative;
margin: 50px auto;
}
#div2 {
width: 20px;
height: 20px;
background: green;
position: absolute;
}
#div3 {
width: 0;
height: 0;
margin: 20px auto;
}
#div3 img {
width: 100%;
height: 100%;
}
</style>
<div id="div1">
<div id="div2"></div>
</div>
<div id="div3">
<img src="">
</div>
<script type="text/javascript">
var oDiv1 = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
var oDiv3 = document.getElementById('div3');
oDiv2.onmousedown = function(ev) { //鼠标按下的时候
var oEvent = ev || event; //ev 成立时 oEvent = event，否则 oEvent = ev , 事件对象 兼容处理
var disX = oEvent.clientX - oDiv2.offsetLeft; //鼠标当前相对于左面的距离
document.onmousemove = function(ev) { //鼠标指针移动时
var oEvent = ev || event; //当前的事件对象 oDiv2
var l = oEvent.clientX - disX; //oEvent.clientX 表示 oDiv2相对于页面左侧的距离，l表示现在的大小
if (l < 0) { //小于规定距离时
l = 0; //初始化距离
}else if (l > oDiv1.offsetWidth - oDiv2.offsetWidth) { //超出内容的时候
l = oDiv1.offsetWidth - oDiv2.offsetWidth; //使用最大内容
}
oDiv2.style.left = l + 'px'; //l范围：[0,580] ， 控制的滚动距离
//document.title = l / 580; //范围：[0,1]
var ratio = oDiv1.offsetWidth - oDiv2.offsetWidth; //总的大小
var scale = l / ratio; //l表示现在的大小,scale增加的百分比
var w = 600 * scale; //图片宽度
var h = 370 * scale; //图片高度
oDiv3.style.cssText = ';width:' + w + 'px;height:' + h +'px;'; //改变图片的值
};
document.onmouseup = function() {
document.onmousemove = null;
document.onmouseup = null;
};
};
</script>
</body>
</html>