动态改变DIV大小
不多说上菜。
js代码
(function($){
$.fn.jqDrag=function(h){return i(this,h,'d');};
$.fn.jqResize=function(h){return i(this,h,'r');};
$.jqDnR={dnr:{},e:0,
drag:function(v){
if (M.k == 'd') {
E.css({left:M.X+v.pageX-M.pX,top:M.Y+v.pageY-M.pY});
}
else {
E.css({width:Math.max(v.pageX-M.pX+M.W,0),height:Math.max(v.pageY-M.pY+M.H,0)});
E.find("img").each(function(){
$(this).css("width", E.width() - 1); // 设定实际显示宽度
$(this).css("height", E.height() - 1); // 设定实际显示宽度
});
}
return false;
},
stop:function(){
E.css('opacity',M.o);$().unbind('mousemove',J.drag).unbind('mouseup',J.stop);
}
};
var J=$.jqDnR,M=J.dnr,E=J.e,
i=function(e,h,k){
return e.each(function(){
h=(h)?$(h,e):e;
//alert(h.css("width"));
h.bind('mousedown',{e:e,k:k},function(v){var d=v.data,p={};E=d.e;
// attempt utilization of dimensions plugin to fix IE issues
if(E.css('position') != 'relative'){
try{E.position(p);}catch(e){}
}
M={
X:p.left||f('left')||0,
Y:p.top||f('top')||0,
W:f('width')||E[0].scrollWidth||0,
H:f('height')||E[0].scrollHeight||0,
pX:v.pageX,
pY:v.pageY,
k:d.k,
o:E.css('opacity')
};
E.css({opacity:0.8});$().mousemove($.jqDnR.drag).mouseup($.jqDnR.stop);
return false;
});
});
},
f=function(k){return parseInt(E.css(k))||false;};
})(jQuery);
HTML代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<style>
.drag{position:absolute;border:1px solid #ddd;text-align:center;padding:5px;top:100px;left:20px;cursor:move;}
.jqHandle {
background-color:#FFF;
height:15px;
z-index: 100;
}
.jqDrag {
width: 100%;
cursor: move;
}
.jqResize {
width: 15px;
position: absolute;
bottom: 0;
right: 0;
cursor: se-resize;
}
.jqDnR {
z-index: 3;
position: relative;
width: 150px;
height: 150px;
font-size: 0.77em;
color: #618d5e;
margin: 5px 10px 10px 10px;
padding: 1px;
background-color: #EEE;
border: 1px solid #CCC;
}
</style>
<title>Insert title here</title>
<script>
$(function() {
$('#ex1').jqResize('.jqResize');
});
</script>
</head>
<body>
<div id="ex1" class="jqDnR">
sdfsdf
<div class="jqHandle jqResize"></div>
</div>
</body>
</html>
完活手工。。。 。。。。