javascript与css结合实现的左右可拖动的内容显示区_网页布局

javascript与css结合实现的左右可拖动的内容显示区: 发布时间：2019-11-08编辑：脚本学堂

左右可拖动的内容显示区，左右拖动红条改变显示区域宽度大小，往左拖则全部显示右侧内容，往右拖则全部显示左则内容，类似QQ的聊天窗口一样。完全JavaScript与CSS代码结合实现，兼容各大主流浏览器。

<!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:600px;height:400px;border:2px solid #000;margin:10px auto;overflow:hidden;}
#box ul{list-style-position:inside;margin:10px;}
#top,#bottom{color:#FFF;width:300px;height:400px;overflow:hidden;}
#top{background:green; float:left}
#bottom{background:skyblue;float:right}
#line{position:absolute;top:0;left:50%;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.onmou<a href=http://www.jb200.com/article/1141.html target=_blank class=infotextkey>sed</a>own = 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.width = oBox.clientWidth - 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><span class="rt">07-13</span>·<a target="_blank" href="/article/201207/40.html" title="自动悬浮于顶部的网页导航菜单">自动悬浮于顶部的网页导航菜单</a></li>                    
 <li><span class="rt">07-13</span>·<a target="_blank" href="/article/201207/39.html" title="两例Div平行不覆盖">两例Div平行不覆盖</a></li>                    
 <li><span class="rt">07-13</span>·<a target="_blank" href="/article/201207/38.html" title="让图片DIV竖向滑动的<a href=http://www.jb200.com/js/ target=_blank class=infotextkey>javascript</a>特效代码">让图片DIV竖向滑动的JavaScript特效代码</a></li>                    
 <li><span class="rt">07-13</span>·<a target="_blank" href="/article/201207/37.html" title="仿<a href=http://www.sina.com.cn target=_blank class=infotextkey>新浪</a>微博浮动的消息提示框-智能定位">仿新浪微博浮动的消息提示框-智能定位</a></li>                    
 <li><span class="rt">07-13</span>·<a target="_blank" href="/article/201207/36.html" title="基于<a href=http://www.jb200.com/jb/jquery/ target=_blank class=infotextkey>jquery</a>实现的拖动浮动层">基于jquery实现的拖动浮动层</a></li>                    
 <li><span class="rt">07-13</span>·<a target="_blank" href="/article/201207/35.html" title="仿新浪微博效果的智能的消息浮动层">仿新浪微博效果的智能的消息浮动层</a></li>       
        </ul>
    </div>
    <div id="bottom">
        <ul>
           <li><span class="rt">07-13</span>·<a target="_blank" href="/article/201207/40.html" title="自动悬浮于顶部的网页导航菜单">自动悬浮于顶部的网页导航菜单</a></li>                    
 <li><span class="rt">07-13</span>·<a target="_blank" href="/article/201207/39.html" title="两例Div平行不覆盖">两例Div平行不覆盖</a></li>                    
 <li><span class="rt">07-13</span>·<a target="_blank" href="/article/201207/38.html" title="让图片DIV竖向滑动的JavaScript特效代码">让图片DIV竖向滑动的JavaScript特效代码</a></li>                    
 <li><span class="rt">07-13</span>·<a target="_blank" href="/article/201207/37.html" title="仿新浪微博浮动的消息提示框-智能定位">仿新浪微博浮动的消息提示框-智能定位</a></li>                    
 <li><span class="rt">07-13</span>·<a target="_blank" href="/article/201207/36.html" title="基于jquery实现的拖动浮动层">基于jquery实现的拖动浮动层</a></li>                    
 <li><span class="rt">07-13</span>·<a target="_blank" href="/article/201207/35.html" title="仿新浪微博效果的智能的消息浮动层">仿新浪微博效果的智能的消息浮动层</a></li>       
        </ul>
    </div>
    <div id="line"></div>
</div>
</body>
</html>

提示：可修改代码后再运行!

上一篇：类似QQ对话框的上下可拖动代码
下一篇：类似新浪微博的弹出框，可拖拽

与 javascript与css结合实现的左右可拖动的内容显示区有关的文章

本文标题：javascript与css结合实现的左右可拖动的内容显示区
本页链接：http://www.jb200.com/tx/42.html

浏览排行

栏目分类

热点文章

javascript与css结合实现的左右可拖动的内容显示区