javascript - 水平拖动条控制div宽度
本文介绍了javascript - 水平拖动条控制div宽度的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
<style>
.container{
width:500px;
}
.left{
width:250px;
}
.right{
width:250px;
}
</style>
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
如何添加一个水平拖动条，通过拖动条来控制内部两个div的宽度，恳请大神指点
解决方案
不知道你要的是不是这种：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div.container {
width: 504px;
height: 400px;
border: 1px solid gray;
}
div.left {
width: 250px;
height: 398px;
border: 1px solid gray;
float: left;
}
div.right {
width: 250px;
height: 398px;
border: 1px solid gray;
float: left;
}
</style>
</head>
<body>
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
<input type="range" id="leftBar" value="250" max="250" min="0"></input>
<input type="range" id="rightBar" value="250" max="250" min="0"></input>
<script>
var leftDiv = document.getElementsByTagName("div")[1];
var rightDiv = document.getElementsByTagName("div")[2];
var leftBar = document.getElementsByTagName("input")[0];
var rightBar = document.getElementsByTagName("input")[1];
rightBar.onmousemove = function() {
var val = rightBar.value;
rightDiv.style.width = val + "px";
};
leftBar.onmousemove = function() {
var val = leftBar.value;
leftDiv.style.width = val + "px";
};
</script>
</body>
</html>
这篇关于javascript - 水平拖动条控制div宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
