<style type="text/css">
body {
margin: 0px;
}
#div1 {
display: none;
position: absolute;
z-index: 1000;
height: 100%;
width: 100%;
background: #CCCCCC;/*遮掩背景的颜色*/
filter:Alpha(opacity=30);/*遮掩背景颜色的透明度*/
}
#div2 {
display: none;
position: absolute;
height: 100%;
width: 100%;
padding-top: 30%;/*离上面的距离*/
z-index: 1001;
}
#div3 {
display: block;
position: absolute;
z-index: 999;
}
</style>
<script type="text/javascript">
//定义移动对象和移动坐标
var Mouse_Obj="none",_x,_y;
//拖动对象函数(自动)
document.onmousemove=function()
{
if(Mouse_Obj!=="none")
{
document.getElementById(Mouse_Obj).style.left=_x+event.x;
document.getElementById(Mouse_Obj).style.top=_y+event.y;
event.returnValue=false;
}
}
//停止拖动函数(自动)
document.onmouseup=function()
{
Mouse_Obj="none";
}
//确定被拖动对象函数 o为被拖动对象
function m(o)
{
Mouse_Obj=o;
_x=parseInt(document.getElementById(Mouse_Obj).style.left)-event.x;
_y=parseInt(document.getElementById(Mouse_Obj).style.top)-event.y;
}
</script>
<body></body>
<div id="div1"></div>
<div id="div2" onmousedown="m(this.id)" style="left: 0px;top: 0px;">
<table width="50%" border="0" cellpadding="3" cellspacing="1" style="background: #0E4A88;
position:static;filter:progid:DXImageTransform.Microsoft.DropShadow(color=#666666,offX=4,offY=4,positives=true)" align="center">
<tr style="cursor: move;">
<td><font color="#FFFFFF">发表留言：</font></td>
<td align="right"><input type="button" value="ｘ" onClick="document.getElementById('div1').style.display='none';document.getElementById('div2').style.display='none';" style="cursor: hand;"></td>
</tr>
<tr valign="top">
<td width="100%" height="150" colspan="2" align="middle" bgcolor="#f6f6f6">
<table width="100%" border="0" cellspacing="0" cellpadding="3">
<form name=lyform method=post action="lyxxs.do">
<tr>
<td width="17%" align="center" valign="bottom">姓名</td>
<td width="83%"><input name="xm" type=text class=textfield size=25 value=""></td>
</tr>
<tr>
<td align="center" valign="middle">留言</td>
<td><textarea name="ly" cols="60%" rows="5" class=textfield ></textarea></td>
</tr>
<tr align="right">
<td colspan="2"><input type="submit" name="Submit" value="发表留言->"></td>
</tr>
</form>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div id="div3"><input type="button" value="打开层"
onClick="document.getElementById('div1').style.display='block';document.getElementById('div2').style.display='block';">
</div>
分享到：
相关推荐
在网页中，"层"通常指的是一个可以隐藏或显示的独立区域，常用于弹出窗口、对话框或者菜单等。使用JS，我们可以轻松控制层的显示和隐藏。基础的方法是通过改变元素的`style.display`属性，将其设置为`none`来隐藏，...
在网页设计和开发中，"动态打开关闭层并实现层的拖动"是一个常见的交互功能，主要用于提升用户体验和页面的可操作性。层（Layer）是网页设计中的一个概念，它允许我们将页面元素以独立的、可以控制的方式展示或隐藏...
在网页设计和开发中，"DIV层拖动、关闭、打开"是一个常见的功能，它涉及到用户界面的交互性和用户体验。这个功能通常应用于弹出框、模态窗口或者对话框等元素，使得用户能够通过拖动调整层的位置，通过关闭和打开...
动态打开和关闭层,而且还能拖拽 动态打开和关闭层,而且还能拖拽 动态打开和关闭层,而且还能拖拽 动态打开和关闭层,而且还能拖拽 动态打开和关闭层,而且还能拖拽 动态打开和关闭层,而且还能拖拽
具体到压缩包中的文件名，我们可以看到涉及了层的关闭与打开、js拖放原理及代码、可拖动的网站地图和DIV拖动的许愿墙示例。这些都是JavaScript层特效和拖放功能的实际应用案例，通过分析和学习这些代码，你可以更好...
6. **事件监听与处理**：使用JavaScript的`addEventListener`方法可以监听用户交互，如点击按钮以打开或关闭弹出层，或者拖动弹出层。 7. **动画效果**：为了增加用户体验，可以使用CSS3的过渡（transition）或动画...
例如，要打开一个层，你可以先隐藏该层（默认状态），然后在用户触发某个事件（如点击按钮）时，使用`style.display = 'block'`将其显示；反之，要关闭层，只需将`display`属性设置为`'none'`。 拖拽功能的实现则...
通过以上步骤，我们可以创建一个可拖动的遮罩层，提供更丰富的交互体验。在提供的`032.fla`文件中，可能包含了一个实际的示例，你可以打开文件来查看和学习具体实现。通过实践，你将更好地掌握这一技术，并能在未来...
总之，“层的拖拽效果（带阴影效果）”是一个集交互性、视觉效果和数据管理于一体的复杂技术实现，它需要对前端开发和用户体验设计有深入的理解。通过这样的功能，开发者可以创建更生动、更具吸引力的用户界面。
标题中的“缓冲动画效果弹出层...总之，这个示例展示了如何利用JavaScript和CSS实现一个具有缓冲动画效果的可拖动弹出层。开发者可以根据自己的需求调整代码，例如修改动画速度、尺寸、颜色等，以适应不同的应用场景。
在JavaScript（JS）中实现一个支持拖动的弹出层是一项常见的前端开发任务，它可以增强用户的交互体验。这里我们将深入探讨如何实现这个功能，并结合标签"js"和"拖动"来讨论相关技术。 首先，我们需要理解弹出层...
5. **关闭和开启**：弹出层的打开和关闭可以通过添加或移除CSS类来实现，例如添加一个表示“打开”的类，设置相应的显示样式，然后移除这个类来隐藏弹出层。 6. **动画效果**：jQuery提供了丰富的动画功能，如`....
标题 "修改后的 DIV 拖动层" 涉及的是网页开发中的一个常见功能，即使用 HTML 和 JavaScript 创建可拖动的层（div元素）。这个功能在许多交互式网页应用中都有应用，如对话框、窗口或者自定义控件等。通过允许用户...
网页层拖动技术是网页交互设计中的一个重要组成部分，它允许用户通过鼠标拖拽来移动页面上的元素，增强用户的操作体验。这个"不带Cookies保存的网页层拖动实例"是基于jQuery库实现的一个示例，它专注于提供一个无...
这个“jQuery可拖拽对话框弹出层代码.zip”文件包含了一个实现特定功能的代码集，即创建一个可以被用户拖动的对话框弹出层。这种功能在网页设计中非常常见，用于显示警告、确认信息或提供用户交互界面。 首先，...
在IT行业中，创建一个可以拖动的层是常见的交互设计需求，这种技术常用于消息提示、弹出信息窗口以及各种需要用户交互的场景。本文将深入探讨如何实现这样的功能，并结合"遮盖层"的概念，为用户提供更好的用户体验。...
在网页设计和开发中，"弹出层"是一种常见的用户界面元素，用于显示额外的信息或者交互功能，而不离开当前页面。...通过分析这些文件，我们可以深入了解如何创建一个在不同浏览器环境下具有良好用户体验的可拖动弹出层。
标题中的“自己写的jquery 弹出层插件,可拖动”表明这是一个基于jQuery的自定义弹出框插件，具备拖动功能。在Web开发中，弹出层（也称为对话框或模态窗口）常用于显示警告、确认信息或者提供用户交互界面。这个插件...
在本文中，我们将深入探讨如何使用jQuery实现一个点击按钮后弹出可拖动的层的功能。这个功能在网页设计和开发中非常常见，用于创建模态对话框、提示信息或者设置窗口等。让我们逐步了解这一过程，以及相关的核心知识...