- 浏览: 606656 次
文章分类
- 全部博客 (411)
- 常用工具 (21)
- 喜好 (14)
- 英语 (3)
- java (51)
- ext (4)
- css (44)
- php (34)
- window (7)
- jquery (21)
- js (31)
- struts (4)
- tomcat (1)
- struts2 (11)
- 网络 (4)
- c# (7)
- linux (27)
- oracle (15)
- tag标签 (5)
- 生成静态页面 (6)
- sql (12)
- hibernate (13)
- DesignPattern (3)
- spring (2)
- flex (17)
- excel应用 (1)
- 报表 (2)
- 业界 (2)
- 数据建模 (1)
- 平板 (1)
- ppt (1)
- rich (1)
最新评论
-
youngdze:
受教了,谢谢!
十步解决php utf-8编码 -
DiLiya:
感谢你的讲解;帮了大忙了!
解决-innerHTML无法在TBODY中使用 -
eppen:
强的没话说。帮了大忙。感谢goby2008 ,感谢google ...
解决-innerHTML无法在TBODY中使用 -
cxs4808:
rr
flex 设计模式 -
liuxingvsyou:
3个jQuery弹出窗口插件
某人想要在点击链接的时候,弹出一个遮罩层。
本来想直接使用lightbox来实现,但是该效果只能调用一张图片,而不能调用一个html,无奈自己写了一份。大家可以点击这里查看演示效果
实现方法
1.添加如下javascript:
function showlightbox(ShowUrl) { document.getElementById('lightbox-content').style.display='block'; document.getElementById('lightbox-bg').style.display='block'; if(ShowUrl!='') { document.getElementById('lightbox-iframe').src=ShowUrl; } } function closelightbox() { document.getElementById('lightbox-content').style.display='none'; document.getElementById('lightbox-bg').style.display='none'; document.getElementById('lightbox-iframe').src='about:blank'; }
2.在页面内添加一个iframe层,并指定调用链接
<a href="javascript:void(0)" onclick="showlightbox('ranqi.html')">open lightbox from inside an iframe</a> <!--lightbox--> <div id="lightbox-bg"></div> <div id="lightbox-content"> <iframe id="lightbox-iframe" width="100%" frameborder="0" scrolling="no" src="about:blank" height="100%" ></iframe> <p><a href="javascript:void(0)" onclick="closelightbox()"><img src="images/closelabel.gif" border="0"/></a></p> </div>
3.写点样式
#lightbox-content{position:absolute;height:370px;width:470px;margin:-250px 0px 0px -250px;top: 50%;left: 50%;text-align: right;background-color: #FFF;border: 1px solid #000;display:none;z-index:100;overflow:hidden;padding:10px 10px 40px 10px;} #lightbox-content p{ margin-top:8px;} #lightbox-bg{position:absolute;top:0;left:0;z-index: 90;background:#000;display:none;width:100%;height:100%;_height:2000px;filter:alpha(opacity=70);-moz-opacity:0.6;opacity:0.6;}
发表评论
-
JQuery限制复选框checkbox可选中个数
2012-12-16 16:33 1479<script type="text/j ... -
IE和Firefox兼容的iframe刷新
2010-11-20 11:04 1377parent.document.getElementById( ... -
Firefox和IE之间7个JavaScript的差异
2010-08-12 15:59 697尽管 JavaScript 历史上使用冗长而令人生厌的代码块来 ... -
JS实用代码
2010-08-12 15:50 1145事件源对象 event.srcElement.tagName ... -
jQuery.inArray注意事项
2010-08-12 14:25 1437有这么一段程序: <script language=& ... -
CKEditor配置使用
2010-07-31 13:50 2548ckeditor 的官方网站是 http://ckeditor ... -
通过js读取或设置 FCKeditor中的值 js操作fckeditor
2010-07-30 00:26 1573FCKeditor确实挺好用,但却缺乏一个详细的开发文档,以致 ... -
关于用CSS区分Firefox、IE6、IE7
2010-07-16 15:44 798<html> <head> ... -
js 动态创建select 并赋予onchange事件
2010-06-30 17:20 2838function createSelect(iid,pid,n ... -
javascript对话框(弹出层)组件artDialog
2010-05-25 08:10 864http://www.planeart.cn/downs/ar ... -
用JavaScript检查文件是否存在
2010-05-13 15:11 1178function checkURL(URL) { ... -
JavaScript打印
2010-04-07 15:41 11171.JavaScript打印 <input id=&q ... -
JavaScript, AJAX树形控件大全(all kinds of TreeView Controls by JavaScript, AJAX)
2010-03-22 17:09 12191、dTree2、Treeview JavaScript3、Y ... -
javascript获取ul中li的个数
2010-03-04 13:06 2984有这样一段代码: <ul id="mycar ... -
location.hash实现跨域iframe自适应
2010-03-02 12:57 1437页面域关系: 主页面a.html所属域A:www.taoba ... -
15个基于Web的HTML编辑器
2009-09-11 23:26 731http://paranimage.com/15-web-ba ... -
父页面里两个iframe之间互相访问
2009-09-08 23:42 1990转载:http://hi.baidu.com/xeelytec ... -
JS压缩处理
2009-09-08 14:03 866试用几个工具,但是对语法要求比较高,有些js没法通过语法,固找 ... -
常用的js正则表达式
2009-07-24 14:10 1023把项目中最近用到的一些正则表达式总结一下。 1.验证身份证号 ... -
模仿abcnews.com制作新闻(图片展示)
2009-06-23 22:07 1146<!DOCTYPE html PUBLIC " ...
相关推荐
将HTML5 LightBox整合进你的项目中,通常需要在HTML文件中引入相关的JS和CSS文件,然后对图片链接应用特定的类名或者使用JavaScript API来初始化插件。 9. **源代码分析**: 压缩包中的“texiao4831_1560681077”...
4. **HTML 示例**:可能包含一些演示如何正确嵌入和使用Lightbox的HTML代码片段。 5. **文档**:可能包含README文件或其他形式的说明,解释如何安装、配置和自定义Lightbox。 在"注册"这个标签下,可能意味着该版本...
为了在自己的网站上使用Lightbox效果,开发者需要将这些文件上传到服务器,并在HTML文件中引入相应的CSS和JavaScript资源,然后将图片链接以特定的方式标记,以便Lightbox JS能够识别并应用效果。此外,根据项目需求...
Lightbox是一种流行的网页图片展示技术,它允许用户在当前页面上弹出一个半透明的窗口来查看大图,而不需要跳转到新的页面或者打开新窗口。这种技术极大地提升了用户体验,因为它使得用户可以轻松地浏览一系列图片,...
使用Lightbox插件时,开发者需要将其引入到项目中,可以通过在HTML头部添加链接引用CSS文件和脚本文件,然后将需要开启Lightbox效果的图片包裹在特定的HTML元素中,比如`<a>`标签,并设置相应的数据属性来指定图片的...
3. **标记图片链接**:使用特定的HTML类名或者数据属性标记需要开启Lightbox效果的图片链接。 4. **初始化插件**:在jQuery的$(document).ready()函数中调用jQuery Lightbox的初始化方法,如`$('a.gallery')....
4. **图片旋转**:虽然Lightbox2原生不支持图片旋转,但可以通过扩展其功能或使用其他JavaScript库(如jQuery Rotate)来实现。 5. **关闭按钮**:用户可以通过点击右上角的关闭按钮或者按键盘的Esc键退出预览模式...
8. **Lightbox2.04** - Lightbox2是一个非常流行且广泛使用的Lightbox实现,此版本2.04可能修复了一些已知问题,增强了兼容性,或者引入了新的设计元素。 9. **Lightbox.zip** 和 **leightbox.zip** - 这两个文件...
5. **图片预加载**:为了防止在打开Lightbox时图片加载延迟,可以使用JavaScript预先加载即将显示的大图,提升用户体验。 6. **事件处理**:除了点击事件外,还需要处理键盘事件(如Esc键关闭Lightbox)和滚动事件...
这个"Lightbox v2.04代码及使用方法"资料包包含了关于Lightbox 2.04版本的详细信息,帮助开发者理解和应用这个功能强大的工具。 Lightbox 2.04的主要特点和改进包括: 1. **响应式设计**:此版本已经考虑到了不同...
6. **键盘导航**:对于无障碍访问,Lightbox应支持使用键盘进行导航,比如使用Esc键关闭Lightbox,使用箭头键切换图片。 7. **多媒体支持**:除了图片,Lightbox还可以用于播放视频或嵌入其他富媒体内容。 在...
HTML Lightbox是一种网页设计技术,用于在用户点击图像或链接时以弹出窗口的形式展示大图,通常带有半透明背景,使用户可以清晰地聚焦在图片上,而不会完全离开当前页面。Lightbox效果常用于图片画廊、产品展示、...
通常,这样的文件可能包含 JavaScript 文件(用于实现 Lightbox 功能)、CSS 文件(定义样式)和 HTML 文件(展示如何使用 Lightbox)。开发者可以通过查看这些文件了解 Lightbox 的具体实现方式,或者直接在自己的...
HTML5手机触屏LightBox幻灯片切换代码是一种在移动设备上实现图片或内容滑动展示的技术,广泛应用于移动端网站和应用中。LightBox是一种流行的网页设计元素,它允许用户在点击图片预览链接后,弹出一个大图窗口显示...
3. 使用特定的HTML标记或者类名来标识需要开启Lightbox效果的图片链接。 4. 在页面加载完成后,调用jQuery Lightbox的初始化函数,例如`$("selector").lightbox()`。 在实际应用中,开发者可以根据需求对Lightbox...
3. **标记图片**:在 HTML 中为要使用 Lightbox JS 的图片添加特定的类名或数据属性,以供脚本识别。 4. **初始化脚本**:在页面加载完成后,调用 Lightbox JS 的初始化函数,如 `lightbox.setup()`。 ### 3. 兼容...
使用jQuery Lightbox插件,开发者需要在网页中引入jQuery库和Lightbox的CSS及JS文件,并按照文档说明对HTML元素进行适当的标记。例如,将图片链接包裹在特定的类名下,如`rel="lightbox"`,这样Lightbox就能识别并...
2. **HTML标记**:为要显示的每张图片添加特定的HTML标记,通常是在`<a>`标签中使用`rel="lightbox"`属性,并将`href`设置为大图的URL。 3. **初始化脚本**:在HTML页面底部添加`<script>`标签,调用Lightbox JS V...
在使用Lightbox2.03.3时,开发者通常需要做以下几步操作: 1. **引入库文件**:将Lightbox2.03.3中的JavaScript和CSS文件添加到HTML文档的`<head>`部分。 2. **标记图片**:为要启用Lightbox效果的图片添加特定的...
4. 初始化插件:在页面加载完成后,使用jQuery选择器找到标记的图片并调用Lightbox方法进行初始化。 例如,HTML代码可能如下所示: ```html <link rel="stylesheet" href="jquery.lightbox.css"> ...