当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 实现lightBox时的样式与行为分离减少JS

Javascript
Javascript初学者实例教程(10):图像属性
FF与IE下javascript计算屏幕尺寸
可输入的下拉框
超强图片数量上传无限制
提高代码性能技巧谈—以创建千行表格为例
让插入到 innerHTML 中的 script 跑起来的实现代码
自动设为主页
脚本写的IE右键助手
[原创]checkbox实现全选的多种方法 不断更新
Div+CSS+JS树型菜单,可刷新
CSS+JS构建的图片查看器
如何实现iframe(嵌入式帧)的自适应高度
颜色渐变效果
一条一条新闻向上的滚动 不错
模拟抽奖
[原创]用srcElement实现添加效果
获取对象
带Checkbox的列表框
[原创]图片分页查看
[原创]手机号码本地检测

Javascript 中的 实现lightBox时的样式与行为分离减少JS


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-10-12   浏览: 322 ::
收藏到网摘: n/a

本教程旨在实现lightBox时的样式与行为分离,减少JS在各方面(全屏遮蔽、ie6中遮蔽select、双向居中、高度自适应内容等)的工作。

[参与测试的浏览器:IE6 / IE7 / IE8 / FF3.5 / OP9.6 / SF4 / Chrome2 ]
[操作系统:Windows]
本教程旨在实现lightBox时的样式与行为分离,减少JS在各方面(全屏遮蔽、ie6中遮蔽select、双向居中、高度自适应内容等)的工作。
先上代码:

复制代码 代码如下:
2. 单行居中,多行居左的方法(看demo吧,表述能力有限):
点击运行可以看到效果:
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]

3. 使用inline-block实现未知高度垂直居中的方法(看图和demo吧,表述能力有限):

图示:

代码演示:

点击运行可以看到效果:
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]

存在的两个细节性问题:
大家可以看到完整demo中并未出现font-size:0;,而在垂直居中法中却出现了。
因为font-size:0在完整demo中,将使firefox3.5中读者完整阅读时lightBox的鼠标滚轮失效,原因不详,这一点大家可以作情处理。
maxHeight这东西只能放在lightBoxContent的后面,因为在opera9.6中会出现bug,囧。