nciky1984
- 浏览: 19532 次
- 来自: 0
-
文章分类
最新评论
-
萧十一狼：
3D引擎采用java monkey engine啊，
最近在用 ...
以前写的一个小程序，游戏Mabinogi(洛奇)的模型编辑器 -
supertaxi：
3D这玩意好复杂啊.
以前写的一个小程序，游戏Mabinogi(洛奇)的模型编辑器 -
nciky1984：
这玩意当初设想是用来做类似个性化网站或者论坛的东西...
在中 ...
.... -
darkfxux：
宽和高都是写死了的，万一我的底层是用的自适应宽度的话。。。。。 ...
....
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Hello</title>
<style type="text/css">
BODY
{
font-family: verdana, tahoma, arial, sans-serif;
font-size: 10pt;
margin: 0px;
padding: 0px;
}
div.box
{
width:300px;/*宽度*/
padding:0px;
margin:0px;
position:absolute;
z-index:1;
left:10px;/*横坐标*/
top:10px;/*纵坐标*/
}
div.topline
{
padding:0px;
margin:0px;
border-top-color:blue;/*边框色*/
border-top-width:1px;/*边框粗细*/
border-top-style:solid;/*边框类型*/
cursor:s-resize;
}
div.bottomline
{
padding:0px;
margin:0px;
border-bottom-color:blue;/*边框色*/
border-bottom-width:1px;/*边框粗细*/
border-bottom-style:solid;/*边框类型*/
cursor:s-resize;
}
div.drag
{
cursor: move;
}
div.innerhead
{
background-color:blue;/*标题色*/
border-top:1px outset white;
border-left:1px outset white;
border-right:1px outset black;
border-bottom:1px outset black;
padding-top:2px;
padding-left:2px;
padding-right:2px;
padding_bottom:1px;
overflow:hidden;
height:26px;
}
/*IE6计算修正*/
*html div.innerhead
{
height:26px;
h\eight:21px;
}
span.title
{
color:white;/*标题字色*/
font-family:宋体;/*标题字体*/
text-overflow:ellipsis;
overflow:hidden;
height:24px;
position: relative;
left:2px;
top:4px;
cursor:default;
}
span.icon
{
width:16;
height:16;
background-image: url("..\image\icon.gif");/*标题图标*/
position: relative;
bottom:4px;
}
div div.innerbody
{
background-color:window;/*背景色*/
padding:0px;/*内部宽度*/
margin:0px;
overflow:auto;
height:300px;
}
div.leftline
{
float:left;
height:326px;/*高度,值为innerbody+26*/
padding:0px;
margin:0px;
border-left-color:blue;/*边框色*/
border-left-width:1px;/*边框粗细*/
border-left-style:solid;/*边框类型*/
cursor: w-resize;
}
div.rightline
{
float:right;
height:326px;/*高度,值为innerbody+26*/
padding:0px;
margin:0px;
border-right-color:blue;/*边框色*/
border-right-width:1px;/*边框粗细*/
border-right-style:solid;/*边框类型*/
cursor: w-resize;
}
span.minsize
{
width:21;
height:21;
background-image: url("..\image\buttons.gif");
background-position: left top;
margin-right:1px;
float:right;
cursor:hand;
z-index: 2;
}
span.maxsize
{
width:21;
height:21;
background-image: url("..\image\buttons.gif");
background-position-y:-22;
margin-right:1px;
float:right;
cursor:hand;
}
span.closebox
{
width:21;
height:21;
background-image: url("..\image\buttons.gif");
background-position-y:22;
margin-right:1px;
float:right;
cursor:hand;
}
div.iframe
{
}
iframe.iframe
{
width: 100%;
height: 100%;
}
.boxbody
{
float:left;
}
</style>
<script language="javascript">
/**
功能：拖动指定对象，并置当前对象为最高层
作者：feifengxlq《许立强》feifengxlq@hotmail.com http://www.phpobject.net
时间: 2006-10-28
演示：
*/
var drag={
x0:0,
y0:0,//(x0,y0)开始拖动时鼠标的位置
x1:0,
y1:0,//(x1,y1)为对象初始状态的top,left值(也是坐标位置)
move_enable:false,//标识是否可以移动
obj_index:1000,
obj:null, //移动控制对象，一般是title
moveobj:'', //移动对象
moveobjWidth:0, //移动对象宽度
moveobjHeight:0, //移动对象高度
width:0,//移动对象width
height:0,//innerbody高度
topLineHeight:0,
bottomLineHeight:0,
minwidth:95,//最小宽度
minheight:1,
titleHeight:26,
//---------public-----------------------------//
min_top:100,
min_left:100,
max_top:600,
max_left:900,
/**********private**************************/
//设置移动边界
setmin:function(top,left)
{
this.min_top=top;
this.min_left=left;
},
//设置移动边界最大
setmax:function(top,left)
{
this.max_top=top;
this.max_left=left;
},
/***********public*********************************/
setRange:function(min_t,min_l,max_t,max_l)
{
this.setmin(min_t,min_l);
this.setmax(max_t,max_l);
},
//开始移动
start:function(obj,moveobj,min_t,min_l,max_t,max_l)
{
try{
this.obj=obj;
this.moveobj=moveobj;
moveobj.style.cursor = "move";
moveobj.style.filter = "progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=30,finishOpacity=100)";
moveobj.style.zIndex = 100;
if(!((min_t=='')||(min_t)==null)){
this.setmin(min_t,min_l);
}
if(!((max_t=='')||(max_t)==null)){
this.setmax(max_t,max_l);
}
if(event.button==1)
{
obj.setCapture();
this.x0=event.clientX;
this.y0=event.clientY;
this.x1=parseInt(getStyle(moveobj,"left"));
this.y1=parseInt(getStyle(moveobj,"top"));
this.move_enable=true;
var innerbody = moveobj.childNodes[3].childNodes[1];
this.width = parseInt(getStyle(moveobj,"width"));
this.height = parseInt(getStyle(innerbody,"height"));
var magrin = parseInt(getStyle(moveobj,"margin"));
var padding = parseInt(getStyle(moveobj,"padding"));
var topline = moveobj.childNodes[0];
var bottomline = moveobj.childNodes[4];
this.topLineHeight = parseInt(getStyle(topline,"borderTopWidth"));
this.bottomLineHeight = parseInt(getStyle(bottomline,"borderBottomWidth"));
//宽度
moveobjWidth = this.width + magrin*2;
//高度
moveobjHeight = this.height + magrin*2 + this.topLineHeight + this.bottomLineHeight + this.titleHeight;
}
}catch(e){
alert(e)
return false;
}
},
//移动对象
move:function(moveobj)
{
try{
if((moveobj=='')||(moveobj==null))moveobj=this.moveobj;
if(this.move_enable)
{
var left = 0;
var top = 0;
left = event.clientX+this.x1-this.x0;
top = event.clientY+this.y1-this.y0;
left = (left<this.min_left)?this.min_left:left;
top = (top<this.min_top)?this.min_top:top;
left = (left>(this.max_left-moveobjWidth))?(this.max_left-moveobjWidth):left;
top = (top>(this.max_top-moveobjHeight))?(this.max_top-moveobjHeight):top;
moveobj.style.left=left;
moveobj.style.top=top;
}
}catch(e){
alert(e)
return false;
}
},
//横向拉伸-左边框
moveXL:function(moveobj)
{
try{
if((moveobj=='')||(moveobj==null))moveobj=this.moveobj;
if(this.move_enable)
{
var left = 0;
var left2= 0;
left = event.clientX-this.x0;
left2 = event.clientX+this.x1-this.x0;
var tarWidth = this.width - left;
var isMin = (tarWidth<this.minwidth);
tarWidth = (isMin)?this.minwidth:tarWidth; //检测是否最小
left2 = (isMin)?(this.x1+this.width-this.minwidth):left2; //检测是否最小,限制向右移动
tarWidth = ((left2)<this.min_left)?(this.width+this.x1-this.min_left):tarWidth;//检测是否与左边界碰撞
left2 = (left2<this.min_left)?this.min_left:left2; //检测是否与左边界碰撞
moveobj.style.width = tarWidth;
moveobj.style.left=left2;
}
}catch(e){
alert(e)
return false;
}
},
//横向拉伸-右边框
moveXR:function(moveobj)
{
try{
if((moveobj=='')||(moveobj==null))moveobj=this.moveobj;
if(this.move_enable)
{
var left = 0;
left = event.clientX-this.x0;
var tarWidth = this.width + left;
tarWidth = (tarWidth<this.minwidth)?this.minwidth:tarWidth; //检测是否最小
tarWidth = ((left+this.x0)>this.max_left)?(this.max_left-this.x1):tarWidth;//检测是否与右边界碰撞
moveobj.style.width = tarWidth;
}
}catch(e){
alert(e)
return false;
}
},
//纵向拉伸-下边框
moveYB:function(moveobj)
{
try{
if((moveobj=='')||(moveobj==null))moveobj=this.moveobj;
if(this.move_enable)
{
var top = 0;
top = event.clientY-this.y0;
var tarHeight = this.height + top;
var innerbody = moveobj.childNodes[3].childNodes[1];
var leftline = moveobj.childNodes[1];
var rightline = moveobj.childNodes[2];
var borderHeight = this.topLineHeight + this.bottomLineHeight;
tarHeight = (tarHeight<this.minheight)?this.minheight:tarHeight;//检测是否最小
tarHeight = ((top+this.y0)>this.max_top)?(this.max_top-this.y1-this.titleHeight-borderHeight):tarHeight;
innerbody.style.height = tarHeight;
leftline.style.height = tarHeight + this.titleHeight;
rightline.style.height = tarHeight + this.titleHeight;
}
}catch(e){
alert(e)
return false;
}
},
//纵向拉伸-上边框
moveYT:function(moveobj)
{
try{
if((moveobj=='')||(moveobj==null))moveobj=this.moveobj;
if(this.move_enable)
{
var top = 0;
var top2 = 0;
top2 = event.clientY+this.y1-this.y0;
top = event.clientY-this.y0;
var tarHeight = this.height - top;
var innerbody = moveobj.childNodes[3].childNodes[1];
var leftline = moveobj.childNodes[1];
var rightline = moveobj.childNodes[2];
var borderHeight = this.topLineHeight + this.bottomLineHeight;
var isMin = tarHeight<this.minheight;
tarHeight = (isMin)?this.minheight:tarHeight;//检测是否最小
top2 = (isMin)?(this.y1+this.height-this.minheight+borderHeight):top2; //检测是否最小,限制向下移动
tarHeight = ((top2)<this.min_top)?(this.height+borderHeight+this.y1-this.min_top):tarHeight;//检测是否与上边界碰撞
top2 = (top2<this.min_top)?this.min_top:top2; //检测是否与上边界碰撞
innerbody.style.height = tarHeight;
leftline.style.height = tarHeight + this.titleHeight;
rightline.style.height = tarHeight + this.titleHeight;
moveobj.style.top=top2;
}
}catch(e){
alert(e)
return false;
}
},
//停止对对象得移动
stopdrag:function(moveobj,obj)
{
if((obj=='')||(obj==null))obj=this.obj;
this.moveobj.style.cursor = "auto";
this.moveobj.style.filter = "progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=100,finishOpacity=100)";
this.moveobj.style.zIndex = 1;
if(this.move_enable)
{
obj.releaseCapture();
this.move_enable=false;
}
this.move_enable=false;
document.getElementById("out").value="w:"+this.width+";h:"+this.height;
//调用ajax方法保存长，宽，x,y
},
//最小化
minsize:function(moveobj)
{
try
{
moveobj.style.display="none";
//调用ajax方法设置最小化
}catch(e){
alert(e)
return false;
}
}
}
// 说明：准确获取指定元素 CSS 属性值 // 作者：John Resig 《Pro JavaScript Techniques》
// 来源：http://bbs.blueidea.com/viewthread.php?tid=2745446
// 整理：CodeBit.cn ( http://www.CodeBit.cn )
function getStyle( elem, name ) {
//如果该属性存在于style[]中，则它最近被设置过(且就是当前的)
if (elem.style[name])
{
return elem.style[name];
}
//否则，尝试IE的方式
else if (elem.currentStyle)
{
return elem.currentStyle[name];
}
//或者W3C的方法，如果存在的话
else if (document.defaultView && document.defaultView.getComputedStyle)
{
//它使用传统的"text-Align"风格的规则书写方式，而不是"textAlign"
name = name.replace(/([A-Z])/g,"-$1");
name = name.toLowerCase();
//获取style对象并取得属性的值(如果存在的话)
var s = document.defaultView.getComputedStyle(elem,"");
return s && s.getPropertyValue(name);
//否则，就是在使用其它的浏览器
}
else
{
return null;
}
}
//修改css某一类的值
function changeCss(id,className,name,n){
var cssO;
var cssObj = document.styleSheets[id];
var cssRules = cssObj.rules || cssObj.cssRules;
for(var i=0;cssO=cssRules[i];i++){
if(cssO.selectorText==className)
{
cssO.style[name] = n;
return;
}
}
}
function px2int( px ){
return parseInt(px.substring(0,px.length-2));
}
//获取IE版本，不是IE浏览器返回-1;否则返回浏览器版本
function getIEVersonNumber()
{
var isIE = (navigator.appName == "Microsoft Internet Explorer");
if(isIE)
{
var ua = navigator.userAgent;
var msieOffset = ua.indexOf("MSIE ");
if(msieOffset < 0)
{
return 0;
}
return parseFloat(ua.substring(msieOffset + 5, ua.indexOf(";", msieOffset)));
}
else
{
return -1;
}
}
function a(){
var elem = document.getElementById("0");
//changeCss(0,"DIV.box","width",80);
elem.style.display="block";
}
function changecolor()
{
var color = document.getElementById("select").value;
//修改标题颜色
changeCss(0,"DIV.innerhead","backgroundColor",color);
changeCss(0,"DIV.topline","borderTopColor",color);
changeCss(0,"DIV.bottomline","borderBottomColor",color);
changeCss(0,"DIV.leftline","borderLeftColor",color);
changeCss(0,"DIV.rightline","borderRightColor",color);
}
</script>
</head>
<body>
<div style="width:800;height:500px;border:1px red dotted;margin-left: 100px;margin-top: 100px;">
<div></div>
<div class="box" id="0">
<div class="topline" onmousedown="drag.start(this,document.getElementById('0'))" onmousemove="drag.moveYT()" onmouseup="drag.stopdrag(document.getElementById('0'))"></div>
<div class="leftline" onmousedown="drag.start(this,document.getElementById('0'))" onmousemove="drag.moveXL()" onmouseup="drag.stopdrag(document.getElementById('0'))"></div>
<div class="rightline" onmousedown="drag.start(this,document.getElementById('0'))" onmousemove="drag.moveXR()" onmouseup="drag.stopdrag(document.getElementById('0'))"></div>
<div class="boxbody">
<div class="innerhead" id="title_0" onmousedown="drag.start(this,document.getElementById('0'))" onmouseup="drag.stopdrag(document.getElementById('0'))" onmousemove="drag.move()">
<span class="closebox" title="关闭"></span>
<span class="maxsize" title="最大化"></span>
<span class="minsize" title="最小化" onclick="drag.minsize(document.getElementById('0'))"></span>
<span class="icon"></span>
<span class="title">title - hello</span>
</div>
<div id="content_0" class="innerbody">
Hello
</div>
</div>
<div class="bottomline" onmousedown="drag.start(this,document.getElementById('0'))" onmousemove="drag.moveYB()" onmouseup="drag.stopdrag(document.getElementById('0'))"></div>
</div>
<!--
<div class="box" style="left:100px;top:100px;" id="1">
<div class="topline"></div>
<div class="leftline"></div>
<div class="rightline" onmousedown="drag.start(this,document.getElementById('1'))" onmousemove="drag.moveXR()" onmouseup="drag.stopdrag(document.getElementById('1'))"></div>
<div class="boxbody">
<div class="innerhead" id="title_1" onmousedown="drag.start(this,document.getElementById('1'))" onmouseup="drag.stopdrag(document.getElementById('1'))"onmousemove="drag.move()">
<span class="closebox" title="关闭"></span>
<span class="maxsize" title="最大化"></span>
<span class="minsize" title="最小化"></span>
<span class="icon"></span>
<span class="title">title - hello</span>
</div>
<div id="content_1" class="innerbody">
Hello
</div>
</div>
<div class="bottomline"></div>
</div>
-->
<br>
<br>
<br>
<select onchange="changecolor()" id="select" style="z-index: 0;">
<option value="red" selected>red</option>
<option value="green">green</option>
<option value="purple">purple</option>
<option value="activecaption">activecaption</option>
<option value="lightgreen">lightgreen</option>
</select>
<input type="button" value="ssss" onclick="a();" style="z-index: -5;">
<input type="text" id="out"/>
</div>
</body>
</html>
分享到：
评论
2 楼
nciky1984
2008-03-10
这玩意当初设想是用来做类似个性化网站或者论坛的东西...
在中间设置任意个小窗口可以用来拖动..
CSS标签和一些数据用作参数来保存到服务器上..
这只是个大概的DEMO而已
所以宽度和高度当初设想就是用来限制拖动的边界而不是浏览器的边界...
你想要设的话获取下IE的长宽再算下就好了..
在中间设置任意个小窗口可以用来拖动..
CSS标签和一些数据用作参数来保存到服务器上..
这只是个大概的DEMO而已
所以宽度和高度当初设想就是用来限制拖动的边界而不是浏览器的边界...
你想要设的话获取下IE的长宽再算下就好了..
1 楼
darkfxux
2008-03-07
宽和高都是写死了的，万一我的底层是用的自适应宽度的话。。。。。。
那我一调节显示器解析度，那不就不好了吗？
如何解决？设置100%?讨论下xux@tfol.com
那我一调节显示器解析度，那不就不好了吗？
如何解决？设置100%?讨论下xux@tfol.com
发表评论
相关推荐
目录.....................................................................................................................................................2 第一章 JavaScript 快速入门......................
.....................
欢迎使用...........................................................................................................................................2 1. 产品简介 ........................................
关于文档 ................................ ................................ ................................ ................................ ............... - 1 - 目录 ...................................
一级保护要求...............................................................................................................................................56.1 系统运维管理...............................
Essbase ...................................................................................................................................... 21 Financial Reporting .....................................
测量.............
整理了一些PHP的类，希望能对大家有所帮助 activeCodeObj.class.php ascii.class.php book.class.php cache2.class.php database.class.php file_dir.class.php . . . . . .
目录 .........................................................................................................................................................1 JVM ......................................
2--[震惊，你家电脑可能安装了一个假的Windows，速来查看......].zip源码scratch2.0 3.0编程项目源2--[震惊，你家电脑可能安装了一个假的Windows，速来查看......].zip源码scratch2.0 3.0编程项目源2--[震惊，你家...
东菱EPS-B2系列伺服驱动器技术手册pdf,安全注意事项........................................................................................................................................... 2 第一章...
1 概述 ................................................................................................................................................. 5 1.1 项目背景 ..................................
..............................362.3.4 Traceview性能分析工具 ......................................372.4 Git版本控制系统 ...............................................382.4.1 Git简介 ....................
2.1.1 功能需求......................................................................................................................................................9 2.1.2 非功能需求.....................
Contents Contents ii List of Tables x List of Figures xiv 1 Scope 1 2 Normative references 2 3 Terms and definitions 3 4 General principles 7 4.1 Implementation compliance . ....4.2 Structure of this ...
基于Openstack的云桌面管理平台设计...................................................................................234.1 平台架构设计.....................................................................
.............................................................................50二、公共交通票务系统 ...............................................................................52三、航空行李追踪 .....
.................................................................25(一)、当前技术特点......................................................................................................................
WINDOWS和LINUX文件互传............