简单的进度条拖动效果及拖拽改变层大小
业务需求 价格区间的 进度条拖动初级demo
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 p{ 8 font-size: 12px; 9 } 10 #div1,#div3{ 11 background: #cccccc; 12 width:300px; 13 height: 30px; 14 overflow: hidden; 15 position: relative; 16 } 17 #div2{ 18 height: 30px; 19 width: 30px; 20 background: red; 21 position: absolute; 22 left: 0; 23 top:0px; 24 } 25 #div4{ 26 height: 30px; 27 width: 30px; 28 background: dodgerblue; 29 position: absolute; 30 left: 0; 31 top:0px; 32 } 33 34 </style> 35 <script type="text/javascript"> 36 window.onload=function() 37 { 38 var op = document.getElementsByTagName("p")[0]; 39 var oDiv1 = document.getElementById("div1"); 40 var oDiv2 = document.getElementById("div2"); 41 var oDiv3 = document.getElementById("div3"); 42 var oDiv4= document.getElementById("div4"); 43 var zj = 6000; 44 //移动加入事件 45 // 如何获取 比例 总长度。。。。。。。。。。。 比例 0~1 之间 乘以总价格 46 //如何找 0 与1 的比例 47 48 var csfont = op.innerHTML; 49 oDiv2.onmousedown= function(ev) 50 { 51 var ev = ev || window.event; 52 disX = ev.clientX - oDiv2.offsetLeft; 53 54 document.onmousemove = function(ev) 55 { 56 var ev = ev || window.event; 57 var L = ev.clientX - disX; 58 if(L<0) 59 { 60 L = 0; //最短距离 61 op.innerHTML = "0"; 62 } 63 else if(L> oDiv1.offsetWidth-oDiv2.offsetWidth){ 64 L = oDiv1.offsetWidth-oDiv2.offsetWidth; //最长距离 65 op.innerHTML = "6000"; 66 }else{ 67 //总比例 68 var scale = L /(oDiv1.offsetWidth-oDiv2.offsetWidth); 69 var money = scale * zj; 70 op.innerHTML = parseInt(money); 71 } 72 oDiv2.style.left = L + "px"; 73 74 75 } 76 document.onmouseup = function() 77 { 78 document.onmousemove = null; 79 } 80 return false; 81 } 82 83 } 84 </script> 85 </head> 86 <body> 87 <p>0</p> 88 <div id="div1"> 89 <div id="div2"></div> 90 </div> 91 <br /> 92 <br /> 93 94 <div id="div3"> 95 <div id="div4"></div> 96 </div> 97 </body> 98 </html>
拖拽改变层大小
效果图：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1{
width: 100px;
height: 100px;
background: skyblue;
position: absolute;
left: 500px;
top:200px;
}
</style>
</head>
<body>
<script type="text/javascript">
window.onload = function()
{
var oDiv = document.getElementById("div1") ;
oDiv.onmousedown = function(ev)
{
var ev = ev || event;
var b = "";
var disX = ev.clientX ;
var disW = this.offsetWidth;
var disL = this.offsetLeft;
if(disX > this.offsetLeft + disW -10)
{
b = "right";
}
if(disX < this.offsetLeft + 10)
{
b ="left";
}
document.onmousemove = function(ev)
{
var ev = ev || event;
switch(b)
{
case 'left':
//向左扩展要考虑 鼠标点移入距离的偏移值 默认为右方向。
//同时必须改变div的left值效果才能看起来是拖动左边
oDiv.style.width = disW - (ev.clientX- disX)+ "px";
oDiv.style.left = disL +(ev.clientX- disX)+ "px";
break;
case 'right':
oDiv.style.width = disW + (ev.clientX- disX)+ "px";
break;
}
}
document.onmouseup = function()
{
document.onmousemove=document.onmouseup = null;
}
return false;
}
}
</script>
<div id="div1"></div>
</body>
</html>
技巧：
向左拉伸改变大小：
需要满足2个条件;
1.在left的情况下 当鼠标向右移动的时候 是缩短距离此时 width = 原div宽带 - （当前鼠标点 - 原来的鼠标点） 返回正值；
2.当鼠标向右移动的时候，拉伸此时必须调用 div。style。left的值 当扩展1px left向右扩展1px；
