[前端] 内容拉伸(拖拽效果)

项目中有时候一个简单的展开容器/折叠容器已经不能适应需求了，这时候要把展开的容器再次拉伸显示更多内容，这样的体验效果更好。。

 

效果：当我用鼠标拖动这块区域的时候 ，会显示更多内容，当然这个拖动肯定要有个上限和下限的设置

 

因为是项目中的，所以没有单独用测试效果展现，但主要的原理，是把处理后的clientY动态的赋值给容器，鼠标点击的这个点要处理下偏移大小。。。

代码：

 

/* 拖拽扩展屏幕 */
$('.vmd-tab').mousedown(function(e) {
    // 起始点的坐标
    var startY = e.clientY;
    
    var nMaxHgt = $(window).height() - 240;  // 往上移动的最大值
    var nOffsetTop = $('.vmd-tab-content').offset().top - startY; // 偏移值

    // 移动
    $(document).on('mousemove', function(e) {
        e.preventDefault();
        var endY = e.clientY;

        // 重载函数计算高度
        fHgt();

        // 动态赋值
        $('.vmd-tab-content').outerHeight($(window).height()-endY-nOffsetTop);

        // 判断最大值或最小值
        if($('.vmd-tab-content').outerHeight() >= nMaxHgt) {
            $('.vmd-tab-content').outerHeight(nMaxHgt);
        } else if($('.vmd-tab-content').outerHeight() <= nVmdTabContentHgt) {
            $('.vmd-tab-content').outerHeight(nVmdTabContentHgt);
        }
    });
});

// 鼠标松开，取消其移动事件
$(document).mouseup(function() {
    $(this).off('mousemove');
});

 

欢迎关注技术开发分享录：http://fenxianglu.cn/