<!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><title>js 层缓冲放大效果</title>
<style>
body {margin:0px}
#Loading {position:absolute;z-index:10;left:10px;top:10px;border:1px #666666 solid;background:#eeeeee;width:10px;height:10px}
</style>
<script LANGUAGE="JavaScript">
<!--
function $(){return document.getElementById?document.getElementById(arguments[0]):eval(arguments[0]);}
var OverH,OverW,ChangeDesc,ChangeH=20,ChangeW=20;
function OpenDiv(_Dw,_Dh,_Desc) {
$("Loading").innerHTML="";
OverH=_Dh;OverW=_Dw;ChangeDesc=_Desc;
$("Loading").style.display='';
if(_Dw>_Dh){ChangeH=Math.ceil((_Dh-10)/((_Dw-10)/20))}else if(_Dw<_Dh){ChangeW=Math.ceil((_Dw-10)/((_Dh-10)/20))}
$("Loading").style.top=(document.documentElement.clientHeight-10)/2+"px";
$("Loading").style.left=(document.documentElement.clientWidth-10)/2+"px";
OpenNow()
}
var Nw=10,Nh=10;
function OpenNow() {
Nw=Nw+ChangeW;Nh=Nh+ChangeH;
if(OverW>Nw||OverH>Nh) {
if(OverW>Nw) {
$("Loading").style.width=Nw+"px";
$("Loading").style.left=(document.documentElement.clientWidth-Nw)/2+"px";
}
if(OverH>Nh) {
$("Loading").style.height=Nh+"px";
$("Loading").style.top=(document.documentElement.clientHeight-Nh)/2+"px"
}
window.setTimeout("OpenNow()",10)
}else{
Nw=10;Nh=10;ChangeH=20;ChangeW=20;
$("Loading").innerHTML=ChangeDesc;
}
}
//-->
</script>
</head>
<body>
<a href="javascript:OpenDiv(500,300,'层1<br>双击关闭')">层1 500*300</a><br><br>
<a href="javascript:OpenDiv(500,200,'层2<br>双击关闭')">层2 500*200</a><br><br>
<a href="javascript:OpenDiv(200,500,'层3<br>双击关闭')">层3 200*500</a><br><br>
<a href="javascript:OpenDiv(500,500,'层4<br>双击关闭')">层4 500*500</a>
<div id="Loading" style="display:none" ondblclick="this.style.display='none'"></div>
</body>
</html>
分享到：
相关推荐
同样地，我们可以编写一个函数来关闭遮罩层： ```javascript function closeMask() { var mask = document.getElementById('mask'); mask.style.display = 'none'; } ``` 五、添加loading图片 在遮罩层内添加...
打开层动画(js封装类,javascript,打开层,动画)
javascript动画效果打开层 关闭层，由http://www.che2.com/提供
不错的js动画效果 鼠标点击打开层/关闭层 层可移动
这个文件可能包含了使用JavaScript打开多层窗口的代码，通过查看和学习这个文件，你可以更好地理解如何在实际项目中实现这一功能。 总结起来，JavaScript的`window.open()`方法和iframe可以实现在一个页面上打开多...
根据描述，压缩包中的资源可能包含了一个示例代码，演示了如何在Chrome中使用上述的一种或多种方法来启动IE。在实际项目中，开发者应根据具体需求选择合适的方法，并注意安全性问题，因为直接调用系统命令可能会带来...
在这个"JS动画打开半透明提示层.zip"压缩包中，包含了一个使用JavaScript实现的动态提示层功能，它允许用户点击按钮后以动画形式打开一个半透明的提示层，同时提供了关闭层的功能。这个功能对于网页中的通知、警告...
js 特效 html 特效 慢慢打开的浮动层 js 特效 html 特效 慢慢打开的浮动层
当我们谈论“超链接打开网页嵌套层”时，我们通常是指在点击一个链接后，不是简单地跳转到新页面，而是将内容加载到当前页面的一个预定义区域，如弹出窗口、模态框或者页面内的滑动层。这种技术可以提供更丰富的用户...
根据给定的信息，本文将详细解释“打开一个层后可以拖动”的实现原理与技术细节。此案例涉及前端开发中的HTML、CSS以及JavaScript技术。主要关注如何通过代码使得页面中的某些元素（层）在被激活之后能够被用户拖动...
javascript实现弹出层和关闭层,自己配置层的大小,颜色 等参数 附带屏蔽F5键的函数
【标题】"一个很好的js弹出层"涉及的是JavaScript中的一种常见用户界面设计技术，用于创建弹出式对话框或窗口。在网页开发中，弹出层通常用于显示额外的信息、提示、表单或者进行某种交互操作，而不离开当前页面。...
### JS打开关闭移动层动画实例知识点解析 #### 一、概览 本示例通过JavaScript实现了div元素的显示、隐藏及拖动功能。这在网页交互设计中非常实用，能够帮助用户更好地操作页面上的浮动窗口或者菜单等组件。 ####...
1. **创建对话框**：提供函数或方法创建一个新的弹出层，可以传入标题、内容、宽度、高度等参数。 2. **显示和隐藏**：提供打开和关闭弹出层的接口，通常通过调用显示和隐藏方法实现。 3. **样式自定义**：支持...
其次，**弹出层嵌套** 是指在一个弹出层中再打开另一个弹出层的功能。这种设计允许更复杂的交互场景，例如在用户选择某个选项时，弹出更详细的设置或信息。实现弹出层嵌套需要精心处理层次结构和事件管理，确保各个...
在提供的"弹出层"压缩包中，可能包含了一个已经封装好的JS弹出层实现。这个库可能包含了弹出层的HTML模板、CSS样式表以及封装的JS函数。通过查看源代码，我们可以学习到如何组织这些组件，以及如何通过参数化设计使...
具体到压缩包中的文件名，我们可以看到涉及了层的关闭与打开、js拖放原理及代码、可拖动的网站地图和DIV拖动的许愿墙示例。这些都是JavaScript层特效和拖放功能的实际应用案例，通过分析和学习这些代码，你可以更好...
"动画效果打开层 关闭层"这一主题，主要涉及的是如何通过CSS和JavaScript来实现网页元素（如div）的动态显示和隐藏，使页面内容能够以更吸引人的形式展现。下面我们将详细探讨这个知识点。 首先，"层"（Layer）在...
在"FineMessBox"这个压缩包中，可能包含了一个自定义的弹出层组件。这类组件通常会提供以下功能： 1. **显示内容**：可以插入文本、图片、表格等各种HTML元素。 2. **样式定制**：提供不同类型的样式预设，如警告、...
JavaScript内置的`alert()`函数是最基础的弹出层形式，它会显示一个包含消息的单行文本框，并有一个“确定”按钮供用户关闭。例如： ```javascript alert('这是一个基本的alert弹出层'); ``` 2. **Confirm...