jQuery实现分隔条左右拖动功能

本文描述了jQuery实现分隔条左右拖动功能的实现代码。分享给大家参考。具体如下：运行效果截图如下：

具体内容如下

！DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN ' ' http://www .w3。org/TR/HTML 4/松散。' DTD ' HTML标题新文档/标题脚本类型=' text/JAVAScript ' src=' http : jquery。量滴js /脚本样式类型='text/css' html，body，div { margin : padd : 0；边框： 0；蚊子用户-选择：无；-网络工具包-用户-选择：无；} .gf_s { float:左侧；宽度： 4px光标： e-调整大小；背景-color : # fff；border: #99BBE8 1px固体；} .gf_s_g {左侧浮动：宽度： 4px显示器：无；光标： e-调整大小；绝对位置：背景色-: # F0F 0；border: #99BBE8 1px固体；filter: alpha(不透明度=60);-莫兹-奥帕市3360 0.6；-khtml-opa市3360 0.6；opa city 3360 0.6z-指数： 1000；}/style/head body div id=' DivP ' style=' width :100%；高度：100%;div id=' DivLeft ' style='底色：绿色；向左浮动：/div div id=' div s ' class=' gf _ s ' style=' float : left；/div div id=' div SG ' class=' gf _ s _ g ' style=' float : left；/div div id=' div right ' style='底色：蓝色；向左浮动：/div /div脚本类型=' text/JavaScript ' var $ sliderMoving=false；//兼容各种浏览器的，获取鼠标真实位置函数mousePosition(ev) { if(！ev)ev=窗口。事件；如果(曾经。Pagex | | ev。Pagey){ return { x : ev。佩吉克斯，y : ev。pagey }；}返回{ x : ev。clientx文档。文档元素。向左滚动文档。尸体。客户左侧，y : ev。客户文件。文档元素。滚动顶部文档。尸体。客户端top }；};//获取一个差异的绝对坐标的功能函数，即使是非绝对定位，一样能获取到函数getel坐标(DOM){ var t=DOM。偏移；var l=DOM . offsetleftom=DOM . offsetparentwhile(DOM){ t=DOM。偏移；l=DOM . offsetleftom=DOM . offsetparent }；返回{ top: t，左侧： l }；};//分隔条幽灵左右拖动(鼠标移动)函数sliderghostmoveing(e){ $(' # div SG ').css({ left: mousePosition(e)).x - 2，显示： ' block ' })；};//完成分隔条左右拖动(鼠标向上)函数sliderHorizontalMove(e){ var lWidth=getel坐标($(' # div SG ')[0]).左-2;var rWidth=$(窗口)。width()-lWidth-6；$('#divLeft ').css('width '，LwIDth ' px ')；$('#divRight ').css('width '，RwIDth ' px ')；$('#divSG ').css('display '，' none ')；};函数reinitSize() { var width=$(window).宽度()-6;var高度=$(窗口)。高度();$('#divLeft ').css({ height: height 'px，width : width * 0.75 ' px ' })；$(' # DiV ').css({ height: height - 2 'px，width : ' 4px ' })；$('#divSG ').css({ height: height - 2 'px，width : ' 4px ' })；$('#divRight ').css({ height: height 'px，width : width * 0.25 ' px ' })；} $(文档)。ready(function(){ Reinsize()；$(' # DiV ').打开('鼠标向下'，函数(e){ $ sliderMoving=true；$('divP ').css(“”光标、“e-resize”)；});$('#divP ').打开('鼠标移动'，函数(e){ if($ sliderMoving){ sliderhostmoving(e)；} });$('#divP ').on('mouseup '，函数(e){ if($ sliderMoving){ $ sliderMoving=false；sliderHorizontalMove(e)；$('#divP ').css(“”光标','默认');} });});$(窗口)。调整大小()函数(){ ReInSize()；});/脚本/正文/html希望本文所述对大家学习jquery分隔条有所帮助。