“你好”层打开效果,可关闭

分类 : 代码案例

“你好”层打开效果,可关闭,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><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=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>更多代码请访问 <a href="http://www.lanrentuku.com/" target="_blank">懒人图库</a>


</body>

</html>


分类: 代码案例    访问() .NET技术    Web前端    JAVA开发    HTML基础    数据库    CSS基础    电脑知识   
CSS教程-web前端教程-免费教程
HTML教程-web前端教程-免费教程

Copyright © 2017 CSS5.NET教程.CSS5 内容仅用于学习和测试参考。 css5.net All Rights Reserved 蜀ICP备15003849号-16