<!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>DOM_text01</title>
<style type="text/css">
body,span,div,td{font-size:12px;line-height:1.5em;color:#849BCA;}
#bodyL{
float:left;
width:84px;
margin-right:2px;
}
a.od{
width:80px;
height:25px;
line-height:25px;
text-align:center;
font-weight:bold;
border: 2px solid #849BCA;
display:block;
color:#547BC9;
float:left;
text-decoration:none;
margin-top:2px;
}
a.od:link{
background:#EEF1F8;
}
a.od:visited{
background:#EEF1F8;
}
a.od:hover{
background:#EEE;
}
a.od:active{
background:#EEE;
}
#fd{
width:500px;
height:200px;
background:#EDF1F8;
border: 2px solid #849BCA;
margin-top:2px;
margin-left:2px;
float:left;
overflow:hidden;
position:absolute;
left:100px;
top:100px;
cursor:move;
float:left;
/*filter:alpha(opacity=50);*/
}
.content{
padding:10px;
}
</style>
</head>
<body>
<div id="bodyL">
<a href="#" class="od" onclick = "show('fd');return false;">
[打开层]
</a>
<a href="#" class="od" onclick = "closeed('fd');return false;">
[关闭层]
</a>
</div>
<div id="fd" style="display:none;filter:alpha(opacity=100);opacity:1;">
<div class="content">移动层</div>
</div>
<script type="text/javascript">
var prox;
var proy;
var proxc;
var proyc;
function show(id){/*--打开--*/
clearInterval(prox);
clearInterval(proy);
clearInterval(proxc);
clearInterval(proyc);
var o = document.getElementById(id);
o.style.display = "block";
o.style.width = "1px";
o.style.height = "1px";
prox = setInterval(function(){openx(o,500)},10);
}
function openx(o,x){/*--打开x--*/
var cx = parseInt(o.style.width);
if(cx < x)
{
o.style.width = (cx + Math.ceil((x-cx)/5)) +"px";
}
else
{
clearInterval(prox);
proy = setInterval(function(){openy(o,200)},10);
}
}
function openy(o,y){/*--打开y--*/
var cy = parseInt(o.style.height);
if(cy < y)
{
o.style.height = (cy + Math.ceil((y-cy)/5)) +"px";
}
else
{
clearInterval(proy);
}
}
function closeed(id){/*--关闭--*/
clearInterval(prox);
clearInterval(proy);
clearInterval(proxc);
clearInterval(proyc);
var o = document.getElementById(id);
if(o.style.display == "block")
{
proyc = setInterval(function(){closey(o)},10);
}
}
function closey(o){/*--关闭y--*/
var cy = parseInt(o.style.height);
if(cy > 0)
{
o.style.height = (cy - Math.ceil(cy/5)) +"px";
}
else
{
clearInterval(proyc);
proxc = setInterval(function(){closex(o)},10);
}
}
function closex(o){/*--关闭x--*/
var cx = parseInt(o.style.width);
if(cx > 0)
{
o.style.width = (cx - Math.ceil(cx/5)) +"px";
}
else
{
clearInterval(proxc);
o.style.display = "none";
}
}
/*-------------------------鼠标拖动---------------------*/
var od = document.getElementById("fd");
var dx,dy,mx,my,mouseD;
var odrag;
var isIE = document.all ? true : false;
document.onmousedown = function(e){
var e = e ? e : event;
if(e.button == (document.all ? 1 : 0))
{
mouseD = true;
}
}
document.onmouseup = function(){
mouseD = false;
odrag = "";
if(isIE)
{
od.releaseCapture();
od.filters.alpha.opacity = 100;
}
else
{
window.releaseEvents(od.MOUSEMOVE);
od.style.opacity = 1;
}
}
//function readyMove(e){
od.onmousedown = function(e){
odrag = this;
var e = e ? e : event;
if(e.button == (document.all ? 1 : 0))
{
mx = e.clientX;
my = e.clientY;
od.style.left = od.offsetLeft + "px";
od.style.top = od.offsetTop + "px";
if(isIE)
{
od.setCapture();
od.filters.alpha.opacity = 50;
}
else
{
window.captureEvents(Event.mousemove);
od.style.opacity = 0.5;
}
//alert(mx);
//alert(my);
}
}
document.onmousemove = function(e){
var e = e ? e : event;
//alert(mrx);
//alert(e.button);
if(mouseD==true && odrag)
{
var mrx = e.clientX - mx;
var mry = e.clientY - my;
od.style.left = parseInt(od.style.left) +mrx + "px";
od.style.top = parseInt(od.style.top) + mry + "px";
mx = e.clientX;
my = e.clientY;
}
}
</script>
</body>
</html>
分享到：
相关推荐
动态打开和关闭层,而且还能拖拽 动态打开和关闭层,而且还能拖拽 动态打开和关闭层,而且还能拖拽 动态打开和关闭层,而且还能拖拽 动态打开和关闭层,而且还能拖拽 动态打开和关闭层,而且还能拖拽
在网页设计和开发中，"动态打开关闭层并实现层的拖动"是一个常见的交互功能，主要用于提升用户体验和页面的可操作性。层（Layer）是网页设计中的一个概念，它允许我们将页面元素以独立的、可以控制的方式展示或隐藏...
在网页设计和开发中，"DIV层拖动、关闭、打开"是一个常见的功能，它涉及到用户界面的交互性和用户体验。这个功能通常应用于弹出框、模态窗口或者对话框等元素，使得用户能够通过拖动调整层的位置，通过关闭和打开...
在网页设计和开发中，动态效果常常用于提升用户体验，其中"打开关闭层"与"层拖动"是两种常见的交互式功能。这篇文章将详细讲解如何使用JavaScript（JS）和层叠样式表（CSS）实现这两种特效。 首先，我们来探讨"打开...
2. **显示和隐藏**：提供打开和关闭弹出层的接口，通常通过调用显示和隐藏方法实现。 3. **样式自定义**：支持设置对话框的背景颜色、边框、内边距等样式，以及按钮、标题等组件的样式。 4. **事件处理**：允许...
它们通常包括标题、内容区域、按钮等组件，可以通过JavaScript进行打开、关闭、显示和隐藏等操作。此资源中的对话框控件2.0可能包含了更完善的API，支持更多的自定义选项和交互效果。 JavaScript（JS）和JavaScript...
具体到压缩包中的文件名，我们可以看到涉及了层的关闭与打开、js拖放原理及代码、可拖动的网站地图和DIV拖动的许愿墙示例。这些都是JavaScript层特效和拖放功能的实际应用案例，通过分析和学习这些代码，你可以更好...
根据给定的信息，本文将详细解释“打开一个层后可以拖动”的实现原理与技术细节。此案例涉及前端开发中的HTML、CSS以及JavaScript技术。主要关注如何通过代码使得页面中的某些元素（层）在被激活之后能够被用户拖动...
这可能涉及到改变对话框的透明度、大小或位置，以达到打开和关闭时的视觉效果。 4. **事件处理**：添加事件监听器来响应用户操作，比如点击关闭按钮或背景层关闭对话框，或者点击确认按钮执行相应的操作。 `images`...
这里我们探讨的是一个基于jQuery实现的、无规则排列的浮动层许愿墙，它支持用户对内容进行拖拽和关闭操作。这个功能的实现涉及到多个JavaScript和jQuery的核心概念和技术。 首先，jQuery库是JavaScript的一个轻量级...
6. **打开/关闭功能**：提供方法来打开和关闭模式窗口，可能包括淡入淡出效果。 7. **自定义配置**：插件可能允许开发者通过参数设置窗口的初始位置、大小、是否可拖动等。 ### 文件结构 - **jWindow.html**：示例...
包括以下javascript例子： 实现多级关联选择地址 js代码－全国省市县无刷新多级关联菜单.html 背景居中.htm 变颜色的菜单.htm 标题栏显示时间.htm 打开于关闭窗口.htm 带阴影的时钟.htm 倒计时.htm 倒计时2.htm 导 ...
6. **事件监听与处理**：使用JavaScript的`addEventListener`方法可以监听用户交互，如点击按钮以打开或关闭弹出层，或者拖动弹出层。 7. **动画效果**：为了增加用户体验，可以使用CSS3的过渡（transition）或动画...
这可能包括窗口的打开、关闭、最大化、最小化、拖动和大小调整等功能。在Web开发中，这样的插件可以为用户提供更接近桌面应用的交互体验，增加网站的可用性和吸引力。 实现"窗口可调节大小"的功能，通常会涉及到...
2. **弹出框**：比如模态对话框，用于显示额外信息或确认操作，JavaScript可以控制其显示和关闭。 3. **动画效果**：JavaScript可以创建各种动画，例如淡入淡出、旋转、缩放等，这些效果可以通过CSS3配合使用，或者...
JavaScript部分包含了一些函数，用于控制弹出层的打开、关闭和拖动。`show`函数首先将弹出层的宽度和高度设置为1像素，然后通过`setInterval`定时器以每10毫秒递增一定数值来逐渐扩展到指定尺寸（500px宽，200px高）...
总的来说，"新打开窗口可拖动调整大小和关闭代码"这一知识点涵盖了Web开发和桌面应用程序设计的基础知识，包括DOM操作、事件处理、用户交互以及不同编程语言和框架的API使用。理解并掌握这些技能，对于任何从事UI...
### JS打开关闭移动层动画实例知识点解析 #### 一、概览 本示例通过JavaScript实现了div元素的显示、隐藏及拖动功能。这在网页交互设计中非常实用，能够帮助用户更好地操作页面上的浮动窗口或者菜单等组件。 ####...
3. **拖拽**：监听mousedown、mousemove和mouseup事件，根据鼠标位置动态调整模态窗口的位置。 4. **关闭按钮**：提供一个关闭按钮，让用户能够方便地关闭模态窗口。 5. **键盘交互**：支持使用Esc键关闭模态窗口，...