JS实现了左右拖动改变内容显示区域大小的方法

本文介绍了JS通过左右拖动来改变内容显示区域大小的方法。分享给大家参考。具体如下：

这里，我们演示了可以左右拖动的内容显示区域的效果。左右拖动红色条可以改变显示区域的宽度，向左拖动可以显示右边的所有内容，向右拖动可以显示左边的所有内容。和QQ聊天窗口一样，可以上下拖动，满足用户要求。这段代码完全是用JavaScript和CSS代码结合实现的，在各大浏览器中运行都有很好的兼容性。拖动JS代码左右改变大小推荐给大家。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-drug-cha-area-show-demo/

具体代码如下：

！DOCTYPE html html health eta http-equiv=' Content-TYPe ' Content=' text/html；charset=utf-8' /title左右可拖动的内容显示区/titlestyleul，li { margin:0划水：0;}车身{ font :14 px/1.5 Arial；color : # 666 } # box { position : relative宽度宽度：600像素高度：400 pxborder:2px固体# 000;margin:10px汽车；飞越：隐藏；} # box ul {列表样式-位置：内部；margin:10px } #顶部，#底部{ color : # FFF；宽度宽度：300像素高度：400 px飞越：隐藏；} #顶部{ background : green float : left } #底部{ background : skybluefloat : right } # line { position :绝对值；top:0左侧：50%;高度：100%;宽度：4 px飞越：隐藏；背景：红色；光标： w-调整大小；}/style脚本函数$(id){返回文档。getelementbyid(id)}窗口。onload=function(){ var oBox=$(' box ')、oTop=$('top ')、obotom=$(' bottom ')、oLine=$(' line ')；奥琳。onmousedown=function(e){ var DIsX=(e | | event).clientXoline。左=oline。offsetleft文件。onmousemove=function(e){ var iT=OLine。左((e | |事件).客户端x-DIsX)；var e=e||window.event，tarnameb=e . target | | e . src element；var MaxT=ObOx。clientWight-Oline。用.抵消；奥琳。风格。边距=0；iT 0(iT=0)；iT MaxT(iT=MaxT)；奥琳。风格。left=OtoP。风格。width=iT ' px双簧管。风格。width=obox。客户端宽度-iT ' px '；$("消息")。内部文本=' top。宽度：英尺。风格。'宽度'-底部。宽度： ' obotom。风格。' width '-oline。离地：英尺。offset left '-DISx : ' DISx '-tarnameb : ' tarnameb。标记名；返回false }；文件。onmouseup=function(){ document。onmousemove=nulldocument.onmouseup=nullonline。在线发布捕获。release capture()}；奥琳。setcapture oline。setcapture()；返回false }；};/脚本/标题dycenter左右拖动红条改变显示区域宽度span id=' msg '/span/center div id=' box ' div id=' top ' ul lia href=' # ' target=' _ blank ' jquery初学实例代码集/a/lilia href=' # ' target=' _ blank ' 100多个ExtJS应用初学实例集/a/li lia href='#' target='_blank '基于jQuery的省、市、县三级级联菜单/a/li lia href='#' target='_blank '一个类似即时通信软件网的射流研究…相册展示特效/a/Li lia href=' # ' target=' _ blank ' Ewebeditor v 4.60最新通用精简版/a/Li lia 2.6.4.1网页编辑器/a/Li阿利平滑图片滚动/a/Li lia href=' # ' target=' _ blank ' XMl JS省市县三级联动菜单/a/Li阿利鼠标滑过链接文字弹出层提示的效果/a/Li lia可控制的图片左右滚动特效（走马灯)/a/Li/ul/div id=' bottom ' ul lia href=' # target=' _ blank '网页上部大旗帜广告特效及图片横向滚动代码/a/li lia href='#' target='_blank '弹性滑块网页广告、图片焦点图切换插件/a/li lia href='#' target='_blank '兼容IE，火狐的Java脚本语言图片切换/a/Li阿利仿ios无线局域网无线局域网(无线保真的缩写)提示效果（折叠面板)/a/Li lia图片展示及弹出层特效代码/a/Li阿利仿苹果苹果手机放大镜阅读效果/a/李target=' _ blank ' Colortip文字标题多样式提示插件/a/li lia href='#' target='_blank '网页换肤，Ajax网页风格切换代码集/a/li lia href='#' target='_blank '超强大、漂亮的蓝色网页弹出层效果/a/Li阿利图像预览功能的代码实现/a/Li/ul/div div id=' line '/div/div/body/html希望本文所述对大家的Java脚本语言程序设计有所帮助。