js—鼠标点击可拖动左右内容的实现
实现效果
代码实现
<!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.onmousedown = function (e) {// 记录鼠标按下的相对位置var disX = (e || event).clientX;//鼠标距离浏览器可视窗口的位置oLine.left = oLine.offsetLeft;//线条距离relative定位元素的左边document.onmousemove = function (e) {// 鼠标点击时oLine.left是确定的，所以要动态的计算出鼠标距离浏览器可视窗口的位置// 计算出分栏元素移动后的位置var iT = oLine.left + ((e || event).clientX - disX);// e:触发当前事件对象 tarnameb: 该事件的元素 srcElement:兼容IE浏览器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 < 0 && (iT = 0);// iT 是分栏元素移动后的位置，而 maxT 则是分栏的最大可移动距离。当 iT 超过了 maxT 时，// 说明分栏已经移动到右边界的外部了，此时需要将 iT 的值设置为 maxTiT > maxT && (iT = maxT);// 让分栏元素实现跟随鼠标拖动而移动// oTop.style.width， 保证顶部占位元素的宽度和分栏元素的位置一致oLine.style.left = oTop.style.width = iT + "px";// 以保证底部占位元素的宽度和容器右边界之间的距离一致oBottom.style.width = oBox.clientWidth - iT + "px";$("msg").innerText ='iT' + iT +'oLine.left' + oLine.left + '(e || event).clientX' + (e || event).clientX + 'disx'+ disX + '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="#" target="_blank">jQuery初学实例代码集</a></li><li><a href="#" target="_blank">100多个ExtJS应用初学实例集</a></li><li><a href="#" target="_blank">基于jQuery的省、市、县三级级联菜单</a></li><li><a href="#" target="_blank">一个类似QQ网的JS相册展示特效</a></li><li><a href="#" target="_blank">eWebEditor v4.60 最新通用精简版</a></li><li><a href="#" target="_blank">FCKeditor 2.6.4.1 网页编辑器</a></li><li><a href="#" target="_blank">jQuery平滑图片滚动</a></li><li><a href="#" target="_blank">Xml+JS省市县三级联动菜单</a></li><li><a href="#" target="_blank">jQuery 鼠标滑过链接文字弹出层提示的效果</a></li><li><a href="#" target="_blank">JS可控制的图片左右滚动特效（走马灯）</a></li></ul></div><div id="bottom"><ul><li><a href="#" target="_blank">网页上部大Banner广告特效及图片横向滚动代码</a></li><li><a href="#" target="_blank">FlexSlider网页广告、图片焦点图切换插件</a></li><li><a href="#" target="_blank">兼容IE，火狐的JavaScript图片切换</a></li><li><a href="#" target="_blank">jQuery仿ios无线局域网WIFI提示效果（折叠面板）</a></li><li><a href="#" target="_blank">TopUp js图片展示及弹出层特效代码</a></li><li><a href="#" target="_blank">jQuery仿Apple苹果手机放大镜阅读效果</a></li><li><a href="#" target="_blank">Colortip 文字title多样式提示插件</a></li><li><a href="#" target="_blank">网页换肤，Ajax网页风格切换代码集</a></li><li><a href="#" target="_blank">超强大、漂亮的蓝色网页弹出层效果</a></li><li><a href="#" target="_blank">jQuery 图像预览功能的代码实现</a></li></ul></div><div id="line"></div></div></body></html>
右边限制最大宽度和最小宽度
只需要改变对IT变量的限制即可
//当 iT 小于 150 时，把iT设置为150，// 为了避免分栏元素移动到容器的外部iT < 150 && (iT =150);// iT 是分栏元素移动后的位置，而 maxT 则是分栏的最大可移动距离。当 iT 超过了 maxT 时，// 说明分栏已经移动到右边界的外部了，此时需要将 iT 的值设置为 maxTiT > 350 && (iT = 350);
