软件开发培训班 >> 编程开发 >> JavaScript

可拖动可改变大小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(http://files.jb51.net/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(http://files.jb51.net/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(http://files.jb51.net/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>

技术文章快速查找

javascript仿126邮箱TAB切换效果

页面中js执行顺序

javascript textContent与innerText的异同分析

在VS2008中使用jQuery智能感应的方法

根据分辩率调用不同的CSS.

Jquery获得控件值的三种方法总结

jquer之ajaxQueue简单实现代码

利用jQuery实现可输入搜索文字的下拉框

相关下载

在线教程导航

软件应用
·Windows8	·Windows7	·Word
·Excel	·PPT	·WPS
Web开发
·ASP	·JavaScript	·DIV+CSS
·JSP	·VbScript	·XML
·PHP
开发语言
·VB	·VC	·ASP.NET
·Java	·C++	·Delphi
数据库开发
·MySQL	·MsSQL	·Access
·Oracle	·DB2
手机系统
·Android	·iOS	·WindowsPhone
网站设计
·Flash	·Dreamweaver	·Fireworks
平面设计
·Photoshop	·CorelDraw	·AutoCAD
·3DsMAX	·Illustrator
网络技术
·网站运营	·网络安全	·网络搭建