`
lan13217
  • 浏览: 496181 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

弹出div

阅读更多

<!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>-</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=50,ChangeW=50;

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)/50))}else if(_Dw<_Dh){ChangeW=Math.ceil((_Dw-10)/((_Dh-10)/50))}
	$("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() {
	if (Nw>OverW-ChangeW)ChangeW=2;
	if (Nh>OverH-ChangeH)ChangeH=2;
	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=50;ChangeW=50;
		$("Loading").innerHTML=ChangeDesc;
	}
}
//-->
</script> 
</head>
<body>
<a href="javascript:OpenDiv(200,150,'层1<br>双击关闭')">层1 200*150</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>

分享到:
评论

相关推荐

    NET弹出层弹出div

    在ASP.NET开发中,"NET弹出层弹出div"是一种常见的交互设计,它允许用户在不离开当前页面的情况下与一些额外的信息或功能进行交互。弹出层通常用于显示详细信息、表单输入、警告消息等,提高了用户体验,因为它们不...

    css + div 滑动弹出div效果

    结合JavaScript(尤其是jQuery库)可以实现丰富的交互效果,比如滑动弹出div的效果。这种效果常见于下拉菜单、模态框或者侧边栏等,能够提供良好的用户体验,使网站更具动态感和吸引力。 首先,我们要理解CSS在实现...

    js弹出div demo

    本文将深入探讨如何使用JavaScript实现弹出div,以及如何返回原来的页面。 首先,我们需要理解什么是弹出div。在HTML中,div是一个常用的布局元素,可以用来组织和分隔内容。在JavaScript中,通过改变CSS样式,我们...

    滚动条到底部弹出div

    在网页设计中,"滚动条到底部弹出div"是一种常见的交互效果,它通常用于实现无限滚动、加载更多内容或显示底部菜单等场景。这个功能是通过JavaScript和CSS结合实现的,下面我们将详细探讨如何实现这个效果。 首先,...

    JS+DIV以层代替弹出窗口的例子,弹出DIV层窗口

    JS+DIV以层代替弹出窗口的例子,弹出DIV层窗口 JS+DIV以层代替弹出窗口的例子,弹出DIV层窗口 JS+DIV以层代替弹出窗口的例子,弹出DIV层窗口 JS+DIV以层代替弹出窗口的例子,弹出DIV层窗口 JS+DIV以层代替弹出窗口的例子...

    Jquery弹出DIV

    **jQuery弹出DIV详解** 在Web开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作、事件处理以及动画效果。"Jquery弹出DIV"是指利用jQuery来实现一个可交互的模态对话框(通常称为弹出窗口或浮层)...

    JAVASCRIPT弹出DIV层窗口实例

    在本实例中,我们将深入探讨如何使用JavaScript来创建一个弹出DIV层窗口。 首先,我们需要了解HTML结构。`index.htm`和`test.html`文件可能包含了用于展示弹出窗口的基础HTML元素。通常,一个基本的HTML结构会包括...

    jQuery插件集之(弹出div4)+Demo

    本资源“jQuery插件集之(弹出div4)+Demo”提供了一个实用的解决方案,即用div而非模态窗口实现弹出功能。这个插件设计巧妙,能够为用户提供一种灵活的方式来展示信息,而无需依赖于传统的模态框。 首先,让我们深入...

    jquery 弹出 div 模式窗口

    在这个场景中,我们关注的是如何使用jQuery结合magnific-popup插件来实现一个弹出Div模式窗口的功能。 `jquery.magnific-popup.js`是magnific popup插件的核心脚本,它提供了一种优雅的方式来创建各种类型的弹出...

    jquery弹出div+异步加载数据

    本项目"jquery弹出div+异步加载数据"旨在实现一个功能丰富的用户界面,其中包含一个可拖动的弹出div,并能通过异步方式从服务器获取并显示数据。下面我们将详细探讨这个项目中的关键知识点。 首先,**jQuery弹出div...

    用jQuery实现弹出窗口弹出div层

    在页面加载后或者点击页面的某个链接时弹出一个div层,同时页面的其他地方会变灰

    Jquery弹出div层窗口以及div屏幕居中,背景滤镜效果,div拖拽效果

    **jQuery弹出div层窗口** 在网页开发中,jQuery提供了便捷的方式来创建动态的、可交互的弹出div层窗口。这种技术通常用于显示警告、消息、表单或任何需要用户注意的内容。创建一个弹出div层窗口的关键在于利用...

    JS弹出Div窗口(可拖拽)

    这个“JS弹出Div窗口(可拖拽)”的示例就是一个解决此类需求的实用方案。 首先,让我们深入理解Div元素。Div是HTML中的一个块级元素,它可以容纳其他HTML元素并进行样式化。通过CSS,我们可以设置Div的宽高、边距、...

    简洁弹出div

    简洁清爽的弹出div效果,内含css,可迅速移植

    JS弹出DIV浮层.

    JS弹出DIV浮层.

    弹出DIV层窗口(javascript脚本代码)

    在给定的标题和描述中提到的"弹出DIV层窗口"是指使用HTML、CSS和JavaScript实现的浮动窗口效果。这种技术常用于创建模态对话框或轻量级的弹出窗口。 首先,让我们深入理解HTML部分: ```html &lt;!DOCTYPE ...

    JQuery完美弹出div窗口/ 弹出窗口/ 弹出层

    完美弹出div窗口 修改版 完美遮罩 修复JQuery对浏览器判断的bug 支持IE6,7,8,FF jspanduanIE.html test无边框iframe完美遮罩.html demo.html 多种测试页面

    js弹出div效果

    当我们说“弹出div”,就是指让一个&lt;div&gt;元素在页面上以弹出窗口的形式出现。 实现js弹出div效果,通常包括以下几个步骤: 1. **创建&lt;div&gt;元素**:在HTML文档中定义一个&lt;div&gt;元素,并为其设置相应的ID以便在...

    网页弹出DIV层,带关闭按钮

    基本的网页弹出div层效果,带关闭按钮。div层浮动在原网页之上。

    弹出div拖动层

    在网页设计和开发中,创建一个可拖动的弹出div层是非常常见且实用的技术,尤其是在构建用户交互界面时。标题“弹出div拖动层”所指的就是这样一个功能,它允许用户通过鼠标来移动一个浮层div,这种功能常见于对话框...

Global site tag (gtag.js) - Google Analytics