<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>左右可拖動的內容顯示區</title>
<style>
ul,
li {
margin: 0;
padding: 0;
}
body {
font: 14px/1.5 Arial;
color: #666;
}
#box {
position: relative;
width: 100%;
height: 100%;
border: 2px solid #000;
margin: 10px auto;
overflow: hidden;
}
#box ul {
list-style-position: inside;
margin: 10px;
}
#top {
color: #FFF;
width: 220px;
height: 100%;
overflow: hidden;
}
#bottom {
color: #FFF;
float: left;
height: 100%;
position: absolute;
left: 220px;
width: 100%;
}
#top {
background: green;
float: left
}
#line {
position: absolute;
top: 0;
left: 220px;
height: 100%;
width: 4px;
overflow: hidden;
background: red;
cursor: w-resize;
}
</style>
<script>
function $(id) {
return document.getElementById(id)
}
window.onload = function() {
var oBox = $("box"),
oTop = $("top"),
oBottom = $("bottom"),
oLine = $("line");
oLine.onmousedown = function(e) {
var disX = (e || event).clientX;
oLine.left = oLine.offsetLeft;
document.onmousemove = function(e) {
var iT = oLine.left + ((e || event).clientX - disX);
var e = e || window.event,
tarnameb = e.target || e.srcElement;
var maxT = oBox.clientWight - oLine.offsetWidth;
oLine.style.margin = 0;
iT < 0 && (iT = 0);
iT > maxT && (iT = maxT);
oLine.style.left = oTop.style.width = iT + "px";
oBottom.style.left = oBox.style.left + iT + "px";
$("msg").innerText = 'top.width:' + oLine.style.width + '---bottom.width:' + oBottom.style.width + '---oLine.offsetLeft:' + oLine.offsetLeft + '---disX:' + disX + '---tarnameb:' + tarnameb.tagName;
return false
};
document.onmouseup = function() {
document.onmousemove = null;
document.onmouseup = null;
oLine.releaseCapture && oLine.releaseCapture()
};
oLine.setCapture && oLine.setCapture();
return false
};
};
</script>
</head>
<body>
<center>左右拖動紅條改變顯示區域寬度<span id="msg"></span></center>
<div id="box">
<div id="top">
<ul>
<li><a href="https://bbs.csdn.net/topics/#" target="_blank">1111</a></li>
<li><a href="https://bbs.csdn.net/topics/#" target="_blank">2222</a></li>
<li><a href="https://bbs.csdn.net/topics/#" target="_blank">3333</a></li>
<li><a href="https://bbs.csdn.net/topics/#" target="_blank">4444</a></li>
<li><a href="https://bbs.csdn.net/topics/#" target="_blank">555555</a></li>
<li><a href="https://bbs.csdn.net/topics/#" target="_blank">6666666</a></li>
</ul>
</div>
<div id="bottom" style="left:220px;">
<div class="content-iframe " style="background-color: #ffffff; ">
<div class="tab-content " id="tab-content" style="">
<div role="tabpanel" class="tab-pane active" data-pageid="10008"><iframe src="https://bbs.csdn.net/C:/Users/wan/Desktop/htwz/pages/index.hte.html" frameborder="no" id="iframe_10008" class="tab_iframe" data-pageid="10008" style="width: 100%; height: 688px;"></iframe></div>
</div>
</div>
</div>
<div id="line"></div>
</div>
</body>
</html>
上面是一個拖拽紅線改變左右div寬度的，但是只能往左 不能往右 好像是ifame影響的，請問怎么改呢?
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/162275.html
標籤：JavaScript
上一篇：問答