jquery调整大小(resizable)

发布时间：2020-04-29 17:51:18 来源：网络阅读：1214 作者：huxiaoqi567 栏目：web开发
看着jquery的大小收缩，自己也尝试写了一个，其实就是增加了三个div来控制大小。
jquery调整大小(resizable) 效果图
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>resizable</title> 
<style type="text/css"> 
body{    
  -moz-user-focus:ignore;    
  -moz-user-input:disabled;    
  -moz-user-select:none;    
}      
.ui-resizable-bd{ 
    background:none; 
    position: absolute; 
    z-index: 1000; 
} 
.ui-resizable-bd-east{ 
    cursor: e-resize; 
} 
.ui-resizable-bd-south{ 
    cursor: s-resize; 
} 
.ui-resizable-bd-corner{ 
    width:16px; 
    height:16px; 
    cursor: nw-resize; 
/*  右下角小图标 */ 
    background: url(p_w_picpaths/resizable.JPG) no-repeat;  
} 
</style> 
</head> 
<body> 
<div style='width:960px;height:600px;margin: 0px auto;'> 
    <div id='demo' style='width:200px;height:200px;border: 1px solid;margin: 0px auto;'> 
         
    </div> 
</div> 
<script type="text/javascript" src='http://code.jquery.com/jquery-latest.min.js'></script>  
<script type="text/javascript"> 
/** 
 * jquery resizable 
 * @author huxiaoqi 
 */ 
(function($){ 
    $.fn.resizable = function(cfg){ 
        var self = $(this); 
        var BD_E = $("<div class='ui-resizable-bd ui-resizable-bd-east'></div>"); 
        var BD_S = $("<div class='ui-resizable-bd ui-resizable-bd-south'></div>"); 
        var BD_SE = $("<div class='ui-resizable-bd ui-resizable-bd-corner'></div>"); 
        var WIDTH = self.width(); 
        var HEIGHT = self.height(); 
        var pos = self.offset(); 
        var BD_WIDTH = 3;   //default border width 
        var documentObj = $(document); 
        var bodyObj = $('body',documentObj); 
        /* 
         * 定义缩放最小值 
         */ 
        var _default = {                     
                            minwidth:50, 
                            minheight:50 
                        }; 
        var config = $.extend({},_default,cfg); 
        //放入节点 
        BD_E.insertAfter(self); 
        BD_S.insertAfter(self); 
        BD_SE.insertAfter(self); 
        setBDPos(WIDTH, HEIGHT, pos.left, pos.top); 
        documentObj.bind({ 
            'mousedown':function(e){ 
                if(isBD(e.target)){ 
                    var currentTarget = e.target; 
                    var className = currentTarget.className; 
                    documentObj.bind('mousemove',function(e){ 
                        pos = self.offset(); 
                        WIDTH = self.width(); 
                        HEIGHT = self.height(); 
                        var width = e.pageX - pos.left; 
                        var height = e.pageY - pos.top; 
                        if(className.indexOf('bd-east') != -1){ 
                            /* 
                             * east border 
                             */                          
                            if(width > config.minwidth ){ 
                                self.width(width); 
                                setBDPos(width, HEIGHT, pos.left, pos.top); 
                            } 
                            bodyObj.css('cursor','e-resize'); 
                        } 
                        else if(className.indexOf('bd-south') != -1){ 
                            /* 
                             * south border 
                             */ 
                            if(height > config.minheight ){ 
                                self.height(height); 
                                setBDPos(WIDTH, height, pos.left, pos.top); 
                            } 
                            bodyObj.css('cursor','s-resize'); 
                        } 
                        else if(className.indexOf('bd-corner') != -1){ 
                            /* 
                             * south-east border 
                             */ 
                            if(width > config.minwidth && height > config.minheight){ 
                                self.width(width); 
                                self.height(height); 
                                setBDPos(width, height, pos.left, pos.top); 
                            } 
                            bodyObj.css('cursor','se-resize'); 
                        } 
                    }); 
                } 
            }, 
            'mouseup':function(e){ 
                documentObj.unbind('mousemove'); 
                bodyObj.css('cursor','default'); 
            } 
        }); 
         
        //get border position 
        function setBDPos(w,h,l,t){ 
            BD_E.css({'width':BD_WIDTH,'height':h,'left':l+w,'top':t}); 
            BD_S.css({'width':w,'height':BD_WIDTH,'top':t+h,'left':l}); 
            BD_SE.css({'left':l+w-BD_SE.width(),'top':t+h-BD_SE.height()}); 
        }; 
        //justify target is border ? 
        function isBD(target){       
            if(target && target.className){ 
                return target.className.indexOf('ui-resizable-bd') != -1; 
            }    
            return false; 
        } 
    }; 
})(jQuery); 
</script> 
<script type="text/javascript"> 
$('#demo').resizable(); 
</script> 
</body> 
</html>
向AI问一下细节
jquery调整大小(resizable)

猜你喜欢

最新资讯

相关推荐

相关标签
