....

最新推荐文章于 2023-03-22 10:52:47 发布

nciky1984

最新推荐文章于 2023-03-22 10:52:47 发布

阅读量100

点赞数

文章标签： IE CSS 浏览器 Microsoft HTML

[code]
<!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" οnmοusedοwn="drag.start(this,document.getElementById('0'))" οnmοusemοve="drag.moveYT()" οnmοuseup="drag.stopdrag(document.getElementById('0'))"></div>
<div class="leftline" οnmοusedοwn="drag.start(this,document.getElementById('0'))" οnmοusemοve="drag.moveXL()" οnmοuseup="drag.stopdrag(document.getElementById('0'))"></div>
<div class="rightline" οnmοusedοwn="drag.start(this,document.getElementById('0'))" οnmοusemοve="drag.moveXR()" οnmοuseup="drag.stopdrag(document.getElementById('0'))"></div>
<div class="boxbody">
<div class="innerhead" id="title_0" οnmοusedοwn="drag.start(this,document.getElementById('0'))" οnmοuseup="drag.stopdrag(document.getElementById('0'))" οnmοusemοve="drag.move()">
<span class="closebox" title="关闭"></span>
<span class="maxsize" title="最大化"></span>
<span class="minsize" title="最小化" οnclick="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" οnmοusedοwn="drag.start(this,document.getElementById('0'))" οnmοusemοve="drag.moveYB()" οnmοuseup="drag.stopdrag(document.getElementById('0'))"></div>
</div>

<br>
<br>
<br>
<select οnchange="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" οnclick="a();" style="z-index: -5;">
<input type="text" id="out"/>
</div>
</body>
</html>

[/code]

nciky1984

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
....

[code] Hello BODY { font-family: verdana, tahoma, arial, sans-serif; font-size: 10pt; margin: 0px; padding: 0px; } div.box { width:300p...
复制链接

扫一扫