基于jQuery向下弹出遮罩图片相册
今天给大家分享一款基于jQuery向下弹出遮罩图片相册。单击相册图片时,一个遮罩层从上到下动画出现。然后弹出显示图片。这款插件适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗。

实现的代码。
html代码:
<center>
<h1>
点击图片查看效果</h1>
</center>
<br>
<br>
<div id='container'>
<div id='image-gallery'>
<!-- Start of Flickr Badge -->
<div id="flickr_badge_uber_wrapper">
<div id="flickr_badge_wrapper">
<!-- Enter your own flickr badge href below -->
<div class="flickr_badge_image">
<a href="img/photo/1.jpg">
<img src="img/photo/1.jpg" alt="站长素材" title="站长素材标题一" width="75" height="75"></a></div>
<div class="flickr_badge_image">
<a href="img/photo/2.jpg">
<img src="img/photo/2.jpg" alt="站长素材" title="站长素材标题二" width="75" height="75"></a></div>
<div class="flickr_badge_image">
<a href="img/photo/3.jpg">
<img src="img/photo/3.jpg" alt="站长素材" title="站长素材标题三" width="75" height="75"></a></div>
<div class="flickr_badge_image">
<a href="img/photo/4.jpg">
<img src="img/photo/4.jpg" alt="站长素材" title="站长素材标题四" width="75" height="75"></a></div>
<div class="flickr_badge_image">
<a href="img/photo/5.jpg">
<img src="img/photo/5.jpg" alt="站长素材" title="站长素材标题五" width="75" height="75"></a></div>
</div>
</div>
<!-- End of Flickr Badge -->
<!-- preload the images -->
<div style='display: none'>
<img src='img/gallery/loading.gif' alt='' />
</div>
</div>
</div>
</div>
via:http://www.w2bc.com/Article/19381
基于jQuery向下弹出遮罩图片相册的更多相关文章
- 使用jquery完成定时弹出广告图片
<script src="../js/jquery-1.8.3.js"></script> <script type="text/javas ...
- 一款基于jQuery的漂亮弹出层
特别提示:本人博客部分有参考网络其他博客,但均是本人亲手编写过并验证通过.如发现博客有错误,请及时提出以免误导其他人,谢谢!欢迎转载,但记得标明文章出处:http://www.cnblogs.com/ ...
- 基于jQuery悬停弹出遮罩显示按钮代码
今天给大家分享一款基于jQuery悬停弹出遮罩显示按钮代码.这是是一款当鼠标悬停在图片上后,会出现一系列的按钮,文字等弹性动画效果.效果图如下: 在线预览 源码下载 实现的代码. html代码: ...
- 基于jQuery弹出层图片动画查看代码
分享一款基于jQuery弹出层图片动画查看代码是一款鼠标单击文字或图片内容放大显示且含圆角投影效果.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class=&q ...
- 一款基于jquery的下拉点击改变背景图片
今天给大家介绍一款基于jquery的下拉点击改变背景图片.单击右上角的图片,下拉显示可选择的背景图片,单击图片变为背景图.效果图下: 在线预览 源码下载 实现的代码. html代码: <a ...
- JQuery弹出层,点击按钮后弹出遮罩层,有关闭按钮【转】
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...
- jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
本文实例讲述了jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能.分享给大家供大家参考,具体如下: 弹出层:两种方式 一是打开网页就自动弹出层二是点击弹出 <!DOCTYPE html ...
- jquery特效(7)—弹出遮罩层且内容居中
上周写了几个小特效,其中有个点击按钮弹出遮罩层的特效,下面来看最终实现的效果: 由于是测试的程序,所以我未加关闭的按钮. 一.主体程序 <!DOCTYPE html> <html&g ...
- 基于jQuery的鼠标悬停时放大图片的效果制作
这是一个基于jQuery的效果,当鼠标在小图片上悬停时,会弹出一个大图,该大图会跟随鼠标的移动而移动.这个效果最初源于小敏同志的一个想法,刚开始做的时候只能实现弹出的图片是固定的,不能随鼠标移动,最后 ...
随机推荐
- (转)oracle字符集与汉字
Oracle与汉字问题与字符集 分类: oracle 2012-10-29 17:31 425人阅读 评论(0) 收藏 举报 Oracle字符集引起的几个问题,常见的就是汉字占多少个字节,其次就是字符 ...
- hadoop 异常及处理总结-01(小马哥-原创)
试验环境: 本地:MyEclipse 集群:Vmware 11+ 6台 Centos 6.5 Hadoop版本: 2.4.0(配置为自动HA) 试验背景: 在正常测试MapReduce(下简称MR)程 ...
- 使用Eclipse的几个必须掌握的快捷方式(能力工场小马哥收集)
“工若善其事,必先利其器”,感谢Eclipse,她 使我们阅读一个大工程的代码更加容易,在阅读的过程中,我发现掌握几个Eclipse的快捷键会使阅读体验更加流畅,写出来与诸君分享,欢迎补充. 1. C ...
- 代理(Proxy)模式简介
Proxy 模式简介 代理模式的两个应用: 打开文档时加载大图片 例如:如果有个对象是一张很大的图片,而这张图片需要花费很长时间才能显示出来,那么当这个图片包含在文档中的后面时,使用编辑器或浏览器打开 ...
- 第二百一十二天 how can I 坚持
在家待了一天,过个周六日也就这样,时间.感觉好堕落. 下午心情特烦闷.好想结婚.为什么不认输,为什么会这样.这到底是一种什么心态. 哎.不懂自己. 睡觉. fordream.
- Django 1.6 最佳实践: 如何正确使用 Signal(转)
原文:http://www.weiguda.com/blog/38/ 如何正确的使用signal: 简单回答是: 在其他方法无法使用的情况下, 才最后考虑使用signal. 因为新的django开发人 ...
- 自己制作 SPx N合1 自动安装盘(x86)
来处"xinso" 一.制作方法: 以技嘉和惠普为例作,其它的可以如法泡制及变通: 1.复制一份最常用的 OEM XP,例如技嘉,到D:\1TO2 2.在 D:\ 创造一个 HP ...
- HDU 5164Matching on Array(AC自动机)
这是BC上的一道题,当时比赛没有做,回头看看题解,说是AC自动机,想着没有写过AC自动机,于是便试着抄抄白书的模板,硬是搞了我数个小时2000ms时限1800过了= = ! 这里就直接贴上BC的结题报 ...
- UVaLive 6805 Pantun Grader (恶心的模拟)
题意:给定 n 首诗,然后让你给他打分,有四种规则,第一种是按音节打,如果音节在8-12之间,就加10,第二种就是按押韵打,如果13,24一个押韵就加20分. 第三种按音节数打,13,24有一个一样的 ...
- UVa 11536 Smallest Sub-Array (水题, 滑动窗口)
题意:给定 n 个由0~m-1的整数组成的序列,输入 k ,问你找出连续的最短序列,使得这个序列含有1-k的所有整数. 析:这个题,很简单么,只要从头开始扫一遍就OK,时间复杂度为O(n). 代码如下 ...