仿LightBox提示效果框 - 共享世纪
本站推荐
相关资讯
仿LightBox提示效果框
  • 文件大小: 5KB
  • 软件作者: yaohaixiao
  • 软件类别: 其它源码 / 开源软件 / .html
  • 软件语言: 简体中文
  • 软件星级: ★★★★★
  • 应用平台: Html+JavaScript
  • 更新时间: 2009-01-19
  • 下载统计:
  • 程序演示: 在线演示 - 【 前台 - 无 】
  • 官方网址: 官方网站
  • 错误报告: 点此报告下载错误!
仿LightBox提示效果框简介:
实现原理:
1、创建节点--利用docment.createElement()/element.createTextNode()方法动态创建节点,再通过使用element.appenChild()方法,向文档中添加创建的子节点。
2、利用position:absolute的特性--将遮照层和提示框节点的position设置为absolute,利用absolute的特性,position:absolute的节点的特点是不影响其周围节点的布局。所以我们将遮照层的position属性设置为absolute,这样遮照层即使覆盖了整个页面,但是却不影响其他节点的(正文)布局。
3、遮照--就是要覆盖到其他层上面,所以我们就利用Javascript给遮照设置了一个z-index:10;让它覆盖到正文之上(或者说他比较厚,把其的节点都包起来了)。接着我们把再提示框的z-index设置为999从而使它在最上面显示,模拟出提示框的效果。
4、透明--原本的遮照层是蓝色的背景,是会把它下面的正文全部遮住,但是我们使用了filter(IE)和 opacity属性设置层是透明的,以便让正文得以显示。
5、移除节点--使用removeChilde()方法移除提示框节点。
6、提示框居中--其实很简单,left:50%,top:50%;然后就是设置margin:-(element.height/2)px 0 0 -(element.width/2)px;,这样就做到了提示层在屏幕中间显示。

呵呵,效果我们看到,但是具体是如何来实现的呢?不要急,我在下面的内容会一步一步的给大家做分析。现在我们先来补习一些DOM编程的基础知识。

Tag:

文件下载:

会员登陆close X