编程论坛's Archiver

xinzheng 发表于 2008-6-15 14:37

求助!!!

[url=http://xdong2007.141.tofor.com/2007/xdong.htm]http://xdong2007.141.tofor.com/2007/xdong.htm[/url]

这是个全flash站,很想知道他的每个可拖动板块的式样能不能用html等实现??

hmhz 发表于 2008-6-15 14:56

可以用JS实现层的拖动

xinzheng 发表于 2008-6-15 15:03

能写个最简单的例子或提供相关知识的链接吗?

hmhz 发表于 2008-6-15 15:41

[code]<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
body {margin:0;}
body,td,th {font-size:12px;}
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:none;}
a:active {text-decoration:none;}
</style>

<script language="JavaScript" type="text/JavaScript">
//控制层移动
function drag(obj){
var s = obj.style
var b = document.body
var x = event.clientX + b.scrollLeft - s.pixelLeft
var y = event.clientY + b.scrollTop - s.pixelTop
var m = function(){
if (event.button == 1){
s.pixelLeft = event.clientX + b.scrollLeft - x;
s.pixelTop = event.clientY + b.scrollTop - y;
}else{document.detachEvent("onmousemove", m);}
}
document.attachEvent("onmousemove", m);

if (!this.z){this.z = 999;}else{s.zIndex = ++this.z;}
event.cancelBubble = true;
}

//控制显示/隐藏
function show(ID){
obj=document.getElementById("news_"+ID);
if(obj.style.display=="none"){obj.style.display="";}else{obj.style.display="none";}
}
</script>
</head>

<body ondragstart="return false" style="margin:0px">
<div onmousedown="drag(this)" style="left:260px;position:absolute;width:250px; border:solid 1px #000000; line-height:180%; margin-left:5px; margin-top:0px">
<div style="float:left;background:#FF9900; width:68%; padding-left:5px">新闻中心</div><div style="float:right;background:#FF9900;width:30%"><a onClick="show(1)" href="#">展开/隐藏</a></div>
<div style="width:250px; height:200px" id="news_1">你好吗?</div>
</div>
</body>
</html>[/code]

xinzheng 发表于 2008-6-15 15:53

谢了!!!!!

页: [1]

Powered by Discuz! Archiver 6.1.0  © 2001-2007 Comsenz Inc.