Discuz!官方免费开源建站系统

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索

自己做的透明浮动层效果,非常棒

[复制链接]
mingkong 发表于 2007-12-13 13:47:32 | 显示全部楼层 |阅读模式
效果图片如下:

演示地址可以看这里,这是将下面的代码美化过
打开http://www.noosee.com/html/2/n-2.html然后点查看下载地址

下面的代码可以自己保存为HTM文件然后打开,就可以看到了

整体实现效果代码:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>无标题文档</title>
  6. <style type="text/css">
  7. <!--
  8. body{ margin:0 auto; text-align:center;}
  9. #downloading {
  10.         position:fixed;
  11.         width:400px;
  12.         height:400px;
  13.         z-index:2;
  14.         background-color: #FFFFFF;
  15.         visibility: hidden;
  16.         top:50%; left:50%;

  17.         margin:-200px -200px;
  18.         border: 1px solid #CCCCCC;
  19. }
  20. #downloadingall {
  21.         position:fixed;
  22.         width:100%;
  23.         height:100%;
  24.         z-index:1;
  25.         background-color: #000000;
  26.         visibility: hidden;
  27.         left: 0;
  28.         top: 0;
  29.         border: 1px solid #CCCCCC;
  30.         filter:alpha(opacity=80);
  31.         -moz-opacity:0.8;
  32. }
  33. -->
  34. </style>

  35. <script type="text/javascript">
  36. <!--
  37. function MM_showHideLayers() { //v9.0
  38.   var i,p,v,obj,args=MM_showHideLayers.arguments;
  39.   for (i=0; i<(args.length-2); i+=3)
  40.   with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) { v=args[i+2];
  41.     if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
  42.     obj.visibility=v; }
  43. }
  44. //-->
  45. </script>
  46. </head>

  47. <body>
  48. <div>
  49.   <input name="downloadurl" type="submit" id="mvdownloadinfo" onclick="MM_showHideLayers('downloadingall','','show');MM_showHideLayers('downloading','','show')" value="查看下载地址"  />
  50. </div>
  51. 2342342342342


  52. <!--内部DIV -->
  53. <div id="downloading">
  54. <div id="close"><a href="#" onclick="MM_showHideLayers('downloadingall','','hide');MM_showHideLayers('downloading','','hide')">关闭</a></div>
  55. </div>
  56. <!--内部DIV结束 -->

  57. <!--外部背景DIV -->
  58. <div id="downloadingall"></div>
  59. <!--外部背景DIV结束 -->
  60. </body>
  61. </html>
复制代码

[ 本帖最后由 mingkong 于 2007-12-13 14:02 编辑 ]

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

x
bladeng 发表于 2007-12-13 13:48:35 | 显示全部楼层
不错!
回复

使用道具 举报

maikongjian14 发表于 2007-12-13 13:50:04 | 显示全部楼层
不错

收藏了..

谢谢 .
回复

使用道具 举报

zhuzhu1722 发表于 2007-12-13 13:50:50 | 显示全部楼层
演示呢???????????
回复

使用道具 举报

 楼主| mingkong 发表于 2007-12-13 14:02:57 | 显示全部楼层
原帖由 zhuzhu1722 于 2007-12-13 13:50 发表
演示呢???????????

已更新演示
回复

使用道具 举报

六月飛雪 发表于 2007-12-13 14:36:31 | 显示全部楼层
喜欢............
回复

使用道具 举报

ocean57 发表于 2007-12-13 14:52:05 | 显示全部楼层
不错
回复

使用道具 举报

fangchi 发表于 2007-12-13 15:01:25 | 显示全部楼层
不错,收藏了,
回复

使用道具 举报

`___pw 发表于 2012-4-17 12:11:54 | 显示全部楼层
不错 收藏了 哈哈
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

手机版|小黑屋|Discuz! 官方站 ( 皖ICP备16010102号 )star

GMT+8, 2024-11-16 15:57 , Processed in 0.034415 second(s), 3 queries , Gzip On, Redis On.

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.

快速回复 返回顶部 返回列表