垂直拖动中间层调整上下层高度

Posted

又是死胖子，找我来要JS了。这次是垂直拖动中间层调整上下层高度。网上找了个JS的源码，看了看感觉不是很好用，这里拿来改了改。改成了jquery插件。

老规矩先看 在线示例

插件代码

(function($) {
    $.fn.move = function(options){
        var options = options || {};
        $(this).mousedown(function(){
            var othis = $(this);
            var disY = event.clientY;
            var offset = $(this).offset();
            var thisTop = offset.top;
            $(document).mousemove(function(){
                var iT = thisTop + (event.clientY - disY);
                var maxT = othis.parent().clientHeight - othis.offsetHeight;
                iT < 0 && (iT = 0);                 iT > maxT && (iT = maxT);
                iT < options.minheight && (iT = options.minheight);                 iT > options.maxheight && (iT = options.maxheight);
                othis.css({top: iT});
                othis.prev().css({height: iT});
                var boxheight = othis.parent().height() - othis.height();
                othis.next().css({height: boxheight-iT});
                return false
            });
            $(document).mouseup(function(){
                $(document).unbind( "mousemove" );
                $(document).unbind( "mouseup" );
                othis.releaseCapture && othis.releaseCapture()
            })
            othis.releaseCapture && othis.releaseCapture();
            return false
        });
    }
})( jQuery );

关键html代码

<div id="box">
<div id="top">
<ul>
 <li>据说是个好东西</li>
    <li>83个人博客</li>
 <li>997722.com</li>
 <li>这个文章真是太好了</li>
  <li>eWebEditor v4.60 最新通用精简版</li>
   <li>FCKeditor 2.6.4.1 网页编辑器</li>
    <li>jQuery平滑图片滚动</li>
   <li>Xml+JS省市县三级联动菜单</li>
    <li>jQuery 鼠标滑过链接文字弹出层提示的效果</li>
    <li>JS可控制的图片左右滚动特效（走马灯）</li>
</ul>
</div>
<div id="line"></div>
<div id="bot">
<ul>
  <li>网页上部大Banner广告特效及图片横向滚动代码</li>
   <li>FlexSlider网页广告、图片焦点图切换插件</li>
   <li>兼容IE，火狐的JavaScript图片切换</li>
 <li>jQuery仿ios无线局域网WIFI提示效果（折叠面板）</li>
  <li>TopUp js图片展示及弹出层特效代码</li>
   <li>jQuery仿Apple苹果手机放大镜阅读效果</li>
    <li>Colortip 文字title多样式提示插件</li>
    <li>网页换肤，Ajax网页风格切换代码集</li>
 <li>超强大、漂亮的蓝色网页弹出层效果</li>
   <li>jQuery 图像预览功能的代码实现</li>
</ul>
</div>
</div>

这里主要用到4个层，外面大层box。上层top。中间层line(主要拖动这个层改变上层，和下层的高度)。下层bot。

如何使用


$(document).ready(function() {
        $("#line").move({maxheight:400,minheight:100});
});

这里有2个高度参数，主要是控制上层top层的最大最小高度。

本文为原创 转载请注明 83

Comments are closed.