首页 > 网络编程 > JavaScript > javascript技巧 > 可拖动改变大小

可拖动可改变大小div的实现代码

2009-08-23 02:34:49 作者：

可拖动可改变大小div的实现代码，非常不错的应用，大家可以参考下。

<!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=gb2312" /> 
<title>Dialog</title> 
<style type="text/css"></style><style type="text/css" bogus="1">.dialogcontainter{height:400px; width:400px; border:1px solid #14495f; position:absolute; font-size:13px;} 
.dialogtitle{height:26px; width:auto; background-image:url('//img.jbzj.com/file_images/200908/103444839.p.gif');} 
.dialogtitleinfo{float:left;height:20px; margin-top:2px; margin-left:10px;line-height:20px; vertical-align:middle; color:#FFFFFF; font-weight:bold; } 
.dialogtitleico{float:right; height:20px; width:21px; margin-top:2px; margin-right:5px;text-align:center; line-height:20px; vertical-align:middle; background-image:url('//img.jbzj.com/file_images/200908/103419495.p.gif');background-position:-21px 0px} 
.dialogbody{ padding:10px; width:auto; background-color: #FFFFFF;} 
.dialogbottom{ 
bottom:1px; right:1px;cursor:nw-resize; 
position:absolute; 
background-image:url('//img.jbzj.com/file_images/200908/103419495.p.gif'); 
background-position:-42px -10px; 
width:10px; 
height:10px; 
font-size:0;}</style> 
</head> 
<body > 
<input value="创建" type="button" onclick="creat()" /> 
<div id='aa'></div> 
<script type="text/javascript"><!-- 
var z=1,i=1,left=10 
var isIE = (document.all) ? true : false;

var $ = function (id) { 
return document.getElementById(id); 
};

var Extend = function(destination, source) { 
for (var property in source) { 
destination[property] = source[property]; 
} 
}

var Bind = function(object, fun,args) { 
return function() { 
return fun.apply(object,args||[]); 
} 
}

var BindAsEventListener = function(object, fun) { 
var args = Array.prototype.slice.call(arguments).slice(2); 
return function(event) { 
return fun.apply(object, [event || window.event].concat(args)); 
} 
}

var CurrentStyle = function(element){ 
return element.currentStyle || document.defaultView.getComputedStyle(element, null); 
}

var Class = function(properties){ 
var _class = function(){return (arguments[0] !== null && this.initialize && typeof(this.initialize) == 'function') ? this.initialize.apply(this, arguments) : this;}; 
_class.prototype = properties; 
return _class; 
};

function creat(){ 
     new Dialog({Info:title="标题"+i,Left:300+left,Top:300+left,Content:'内容'+i,Zindex:(++Dialog.Zindex)}); 
i++;left +=10; 
} 
// --></script> 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

可拖动可改变大小div的实现代码

您可能感兴趣的文章: