首页
矢量素材
PNG图标
JS代码
网页小图标
网页素材
设计欣赏
广告达人
有趣新鲜
技术文档
懒人博客
懒人论坛
当前位置:
首页
>
JS代码
>
JS特效代码
>
表格图层
> 第1页
虚线变实线的层打开效果
VIEW:357
来源:懒人图库
2009-05-26
<!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;width:10px;height:10px} .LoadContent {width:100%;height:100%;overflow:auto} </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=''; $("Loading").style.border='1px #000000 dashed'; $("Loading").style.backgroundColor=''; 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").style.border='1px #000000 solid'; $("Loading").style.backgroundColor='#eeeeee'; //这里是开始加载时的loading事件,可以插入图片 $("Loading").innerHTML="Loading..."; AjaxGet(ChangeDesc) } } //创建XML对象 function createXMLHttps(){ var ret = null; try {ret = new ActiveXObject('Msxml2.XMLHTTP')} catch (e) { try {ret = new ActiveXObject('Microsoft.XMLHTTP')} catch (ee) {ret = null} } if (!ret&&typeof XMLHttpRequest !='undefined') ret = new XMLHttpRequest(); return ret; } function AjaxGet(URL) { var xmlhttp = createXMLHttps(); xmlhttp.open("Get",URL,true); xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status==404) {$("Loading").innerHTML='读取页面失败,文件'+URL+'不存在!';return} if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { $("Loading").innerHTML="<div class='LoadContent'>"+xmlhttp.responseText+"</div>"; } } xmlhttp.send(null); } //--> </script> </head> <body> 由于不能跨域,读取的文件须在同一域名下,如果出现错误,<br>原因是在目标文件上的,本例代码本身没有错误<br> <font color=red>如果目标文件数据过大,花费的时间也相对较长,外部文件需用utf-8编码,否则中文可能显示为乱码</font> <br><br> <a href="javascript:OpenDiv(500,300,'lanrentuku.html')">lanrentuku.html 500*300</a><br><br> <a href="javascript:OpenDiv(500,200,'faq.php')">faq.php 500*200</a><br><br> <a href="javascript:OpenDiv(200,500,'1.html')">1.html 200*500</a><br><br> <a href="javascript:OpenDiv(500,500,'lrtk.html')">lrtk.html 500*500</a><br><br> 双击关闭层 <div id="Loading" style="display:none" ondblclick="this.style.display='none'"></div>更多代码请访问 <a href="http://www.lanrentuku.com/" target="_blank">懒人图库</a> </body> </html>
提示:您可以先修改部分代码再运行,复制代码和保存代码功能在Firefox下无效。
可以在打开的时候看不到背景只看到border的边框吗?边框可以在打开时候是虚线打开完后变成实线吗?
↑上一篇:
让div居中对齐的css
↓下一篇:
简单的缓冲的淡入层打开效果
AJAX仿EXCEL表格功能
玩转表格之表格边框魔鬼教程
给表格做链接
无图片的圆角表格
用CSS控制表格的交替颜色
可拖动的弹出层提示效果
AJAX可以拖动的DIV块
表格颜色渐变效果
给表格加上滚动条
广告代码
共
338
个JS广告代码
››全部
焦 点 图(156)
全屏广告(11)
对联广告(6)
在线客服(5)
相册代码(39)
菜单导航(32)
TAB标签(13)
悬浮漂浮(3)
视频播放(4)
图片特效(23)
翻牌书角(7)
其他代码(39)
特效代码
共
273
个JS特效代码
››全部
导航菜单(55)
表单按钮(43)
文字特效(11)
表格图层(35)
图片特效(15)
时间日期(21)
滚动代码(11)
窗口特效(8)
颜色背景(2)
网站常用(42)
CSS样式(13)
其他特效(17)
最近浏览过的特效代码
更多››
关于我们
-
版权声明
-
广告服务
-
懒人西西
-
RSS订阅
-
工作机会
-
网站地图
-
友情链接
-
联系我们
-
在线留言
Copyright © 2006-2009
lanrentuku.com
All Rights Reserved.
-
京ICP备08001501号