分享
 
 
 

Dhtml:3个不同高度的三维可拖动图层的例子

王朝html/css/js·作者佚名  2006-01-09
窄屏简体版  字體: |||超大  

<!-- xWin by WildWind<http://wildcity.126.com> -->

<html>

<head>

<title>_xWin</title>

<style type='text/css'>

<!--

a:visited{text-decoration:none;color:slategray;}

a:hover{text-decoration:underline;color:slategray;}

a:link{text-decoration:none;color:slategray;}

-->

</style>

<script language=JScript>

<!--

//可以打包为js文件;

var x0=0,y0=0,x1=0,y1=0;

var offx=6,offy=6;

var moveable=false;

var hover='orange',normal='slategray';//color;

var index=10000;//z-index;

//开始拖动;

function startDrag(obj)

{

//锁定标题栏;

obj.setCapture();

//定义对象;

var win = obj.parentNode;

var sha = win.nextSibling;

//记录鼠标和层位置;

x0 = event.clientX;

y0 = event.clientY;

x1 = parseInt(win.style.left);

y1 = parseInt(win.style.top);

//记录颜色;

normal = obj.style.backgroundColor;

//改变风格;

obj.style.backgroundColor = hover;

win.style.borderColor = hover;

obj.nextSibling.style.color = hover;

sha.style.left = x1 + offx;

sha.style.top = y1 + offy;

moveable = true;

}

//拖动;

function drag(obj)

{

var win = obj.parentNode;

var sha = win.nextSibling;

if(moveable)

{

win.style.left = x1 + event.clientX - x0;

win.style.top = y1 + event.clientY - y0;

sha.style.left = parseInt(win.style.left) + offx;

sha.style.top = parseInt(win.style.top) + offy;

}

}

//停止拖动;

function stopDrag(obj)

{

var win = obj.parentNode;

var sha = win.nextSibling;

win.style.borderColor = normal;

obj.style.backgroundColor = normal;

obj.nextSibling.style.color = normal;

sha.style.left = obj.parentNode.style.left;

sha.style.top = obj.parentNode.style.top;

//放开标题栏;

obj.releaseCapture();

moveable = false;

}

//获得焦点;

function getFocus(obj)

{

index = index + 2;

var idx = index;

obj.style.zIndex=idx;

obj.nextSibling.style.zIndex=idx-1;

}

function min(obj)

{

var win = obj.parentNode.parentNode;

var sha = win.nextSibling;

var tit = obj.parentNode;

var msg = tit.nextSibling;

var flg = msg.style.display=="none";

if(flg)

{

win.style.height = parseInt(msg.style.height) + parseInt(tit.style.height) + 2*2;

sha.style.height = win.style.height;

msg.style.display = "block";

obj.innerHTML = "0";

}

else

{

win.style.height = parseInt(tit.style.height) + 2*2;

sha.style.height = win.style.height;

obj.innerHTML = "2";

msg.style.display = "none";

}

}

function cls(obj)

{

var win = obj.parentNode.parentNode;

var sha = win.nextSibling;

win.style.visibility = "hidden";

sha.style.visibility = "hidden";

}

//创建一个对象;

function xWin(id,w,h,l,t,tit,msg)

{

index = index+2;

this.id = id;

this.width = w;

this.height = h;

this.left = l;

this.top = t;

this.zIndex = index;

this.title = tit;

this.message = msg;

this.obj = null;

this.bulid = bulid;

this.bulid();

}

//初始化;

function bulid()

{

var str = ""

+ "<div id=xMsg" + this.id + " "

+ "style='"

+ "z-index:" + this.zIndex + ";"

+ "width:" + this.width + ";"

+ "height:" + this.height + ";"

+ "left:" + this.left + ";"

+ "top:" + this.top + ";"

+ "background-color:" + normal + ";"

+ "color:" + normal + ";"

+ "font-size:10px;"

+ "font-family:Verdana;"

+ "position:absolute;"

+ "cursor:default;"

+ "border:2px solid " + normal + ";"

+ "' "

+ "onmousedown='getFocus(this)'>"

+ "<div "

+ "style='"

+ "background-color:" + normal + ";"

+ "width:" + (this.width-2*2) + ";"

+ "height:20;"

+ "color:white;"

+ "' "

+ "onmousedown='startDrag(this)' "

+ "onmouseup='stopDrag(this)' "

+ "onmousemove='drag(this)' "

+ ">"

+ "<span style='width:" + (this.width-2*12-4) + ";padding-left:3px;'>" + this.title + "</span>"

+ "<span style='width:12;border-width:0px;color:white;font-family:webdings;' onclick='min(this)'>0</span>"

+ "<span style='width:12;border-width:0px;color:white;font-family:webdings;' onclick='cls(this)'>r</span>"

+ "</div>"

+ "<div style='"

+ "width:100%;"

+ "height:" + (this.height-20-4) + ";"

+ "background-color:white;"

+ "line-height:14px;"

+ "word-break:break-all;"

+ "padding:3px;"

+ "'>" + this.message + "</div>"

+ "</div>"

+ "<div style='"

+ "width:" + this.width + ";"

+ "height:" + this.height + ";"

+ "top:" + this.top + ";"

+ "left:" + this.left + ";"

+ "z-index:" + (this.zIndex-1) + ";"

+ "position:absolute;"

+ "background-color:black;"

+ "filter:alpha(opacity=40);"

+ "'>?</div>";

//alert(str);

document.body.insertAdjacentHTML("beforeEnd",str);

}

//-->

</script>

<script language='JScript'>

<!--

function initialize()

{

var a = new xWin("1",160,200,200,200,"Message","xWin <br> A Cool Pop Div Window<br>Version:1.0<br>2002-8-13");

var b = new xWin("2",240,200,100,100,"Wildwind's Msgbox","Welcome to visited my personal website:<br><a href=http://www14.brinkster.com/wildcity target=_blank>http://wildcity.126.com</a><br>and u can also sign my guestbook at:<br><a href=http://www14.brinkster.com/wildcity/gbook target=_blank>http://wildcity.126.com/gbook</a><br><br>thx!!! =)...");

var c = new xWin("3",200,160,250,50,"Copyright","Copyright by <a href='mailto:wildwind_zz@21cn.com'>Wildwind</a>!");

}

window.onload = initialize;

//-->

</script>

</head>

<body onselectstart='return false' oncontextmenu='return false'>

</body>

</html>

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有