【js---鼠标点击可拖动左右内容的实现】

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);

【js---鼠标点击可拖动左右内容的实现】相关推荐

html鼠标点击切换图片,js鼠标点击图片切换效果代码分享
本文实例讲述了js鼠标点击图片切换效果.分享给大家供大家参考.具体如下: 实现原理很简单,其实是多张图片叠加起来,点击图片后依次赋予图片一个class,使其看起来在表面而已,点击图片,可以实现图片的不 ...
html 获取鼠标参数,js鼠标点击特效，有关参数设置
效果图,用的faststone--录像--togif,黄色圆圈实际是不显示的博客后台管理设置本地新建一个demo.html文件,可以自行测试,要引入jquery文件哦来个"红橙黄绿蓝靛 ...
JS鼠标点击自动选中点击元素中的文字
目录 1. 选中输入框(input.textarea等)中的文字 2.普通标签(div.p.span等) 1. 选中输入框(input.textarea等)中的文字 <form action=& ...
html鼠标点击显示二级菜单内容,怎样操作js实现二级菜单点击显示当前内容
这次给大家带来怎样操作js实现二级菜单点击显示当前内容,操作js实现二级菜单点击显示当前内容的注意事项有哪些,下面就是实战案例,一起来看一下. 最近做了一个二级菜单点击事件的效果,一级菜单有3个,二级 ...
原生JS实现点击按钮显示更多内容
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
js鼠标点击事件监听
鼠标移动监听: <script>var cont = 0;function f() {document.getElementById("an1").innerHTML ...
小程序点击事件改变样式(普通js鼠标点击事件)
1.wxml中 <view class="column"> <view class="body-view {{num==1?'active':''}}& ...
php点击弹出文字代码,js实现鼠标点击页面弹出自定义文字效果
本文实例为大家分享了js鼠标点击页面弹出文字的具体代码,供大家参考,具体内容如下效果: 实现代码: (function(e){ // 点击事件触发生生元素等一系列动作的初始状态 var bombFl ...
JS 鼠标单击，双击，三击，多击
如果用 <div ondblclick="f2()" onclick="f1()"></div> 那么双击,会先执行两次f1()后,再执 ...

【js---鼠标点击可拖动左右内容的实现】

js—鼠标点击可拖动左右内容的实现

实现效果

代码实现

右边限制最大宽度和最小宽度

【js---鼠标点击可拖动左右内容的实现】相关推荐

最新文章

热门文章