关于js和层,我有N个div隐藏层,谁能帮我做个例子

发布网友发布时间：2022-05-06 01:56

共1个回答

热心网友时间：2022-04-25 06:33

很简单，样式不要用#，用#开头的话，就锁定了id对象，所以如果你要控制多个而且样式是一样的，就用.来表示，这样就可以用class定义样式了，还有就是js方面，用一个方法来调用，这是代码，你自已慢慢看
<!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>无标题文档</title>
<style>

</style>
</head>

<body>

<a href="#" onClick="javascript:divop('test1','show',1);" />链接1</a>
<a href="#" onClick="javascript:divop('test2','show',2);" />链接2</a>
<a href="#" onClick="javascript:divop('test3','show',3);" />链接3</a>
<a href="#" onClick="javascript:divop('test4','show',4);" />链接4</a>

</p>
<div id="test1" class="aaa">
<div class="b" onMouseDown="startDrag(this)" onMouseUp="stopDrag(this)" onMouseMove="drag(this)">请选择类型一</div>
<div class="c"><span style="text-decoration:underline; cursor:hand;" onClick="javascript:divop('test1','hid');">X</span> </div>
<div class="clear"></div>
<div class="d">
这里是内容
</div>
<div class="e"><input type="button" value="下一步" /> <input type="button" value="关闭" onClick="javascript:divop('test1','hid');" /></div>
</div>

<div id="test2" class="aaa">
<div class="b" onMouseDown="startDrag(this)" onMouseUp="stopDrag(this)" onMouseMove="drag(this)">请选择类型一</div>
<div class="c"><span style="text-decoration:underline; cursor:hand;" onClick="javascript:divop('test2','hid');">X</span> </div>
<div class="clear"></div>
<div class="d">
这里是内容
</div>
<div class="e"><input type="button" value="下一步" /> <input type="button" value="关闭" onClick="javascript:divop('test2','hid');" /></div>
</div>

<div id="test3" class="aaa">
<div class="b" onMouseDown="startDrag(this)" onMouseUp="stopDrag(this)" onMouseMove="drag(this)">请选择类型一</div>
<div class="c"><span style="text-decoration:underline; cursor:hand;" onClick="javascript:divop('test3','hid');">X</span> </div>
<div class="clear"></div>
<div class="d">
这里是内容
</div>
<div class="e"><input type="button" value="下一步" /> <input type="button" value="关闭" onClick="javascript:divop('test3','hid');" /></div>
</div>

<div id="test4" class="aaa">
<div class="b" onMouseDown="startDrag(this)" onMouseUp="stopDrag(this)" onMouseMove="drag(this)">请选择类型一</div>
<div class="c"><span style="text-decoration:underline; cursor:hand;" onClick="javascript:divop('test4','hid');">X</span> </div>
<div class="clear"></div>
<div class="d">
这里是内容
</div>
<div class="e"><input type="button" value="下一步" /> <input type="button" value="关闭" onClick="javascript:divop('test4','hid');" /></div>
</div>

<script language="javascript">
function $(id)
{
return document.getElementById(id);
}

function divop(objid,stat,num)//控制层的显示和隐藏
{
//alert(objid);
if (stat=="show")
{
$(objid).style.display="block";
$(objid).style.left=(num*20)+"px";//
$(objid).style.top=(num*100)+"px";
}
else
{
$(objid).style.display="none";

}
}

var x0=0,y0=0,x1=0,y1=0;
var moveable=false;
//开始拖动;
function startDrag(obj){
if(event.button==1){
obj.setCapture();
var win = obj.parentNode;
x0 = event.clientX;
y0 = event.clientY;
x1 = parseInt(win.offsetLeft);
y1 = parseInt(win.offsetTop);
moveable = true;
}
}
//拖动;
function drag(obj){
if(moveable){
var win = obj.parentNode;
win.style.left = x1 + event.clientX - x0;
win.style.top = y1 + event.clientY - y0;
}
}
//停止拖动;
function stopDrag(obj){
if(moveable){
obj.releaseCapture();
moveable = false;
}
}
</script>
</body>
</html>