今天给大家分享一款基于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向下弹出遮罩图片相册的更多相关文章

  1. 使用jquery完成定时弹出广告图片

    <script src="../js/jquery-1.8.3.js"></script> <script type="text/javas ...

  2. 一款基于jQuery的漂亮弹出层

    特别提示:本人博客部分有参考网络其他博客,但均是本人亲手编写过并验证通过.如发现博客有错误,请及时提出以免误导其他人,谢谢!欢迎转载,但记得标明文章出处:http://www.cnblogs.com/ ...

  3. 基于jQuery悬停弹出遮罩显示按钮代码

    今天给大家分享一款基于jQuery悬停弹出遮罩显示按钮代码.这是是一款当鼠标悬停在图片上后,会出现一系列的按钮,文字等弹性动画效果.效果图如下: 在线预览   源码下载 实现的代码. html代码: ...

  4. 基于jQuery弹出层图片动画查看代码

    分享一款基于jQuery弹出层图片动画查看代码是一款鼠标单击文字或图片内容放大显示且含圆角投影效果.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=&q ...

  5. 一款基于jquery的下拉点击改变背景图片

    今天给大家介绍一款基于jquery的下拉点击改变背景图片.单击右上角的图片,下拉显示可选择的背景图片,单击图片变为背景图.效果图下: 在线预览   源码下载 实现的代码. html代码: <a ...

  6. JQuery弹出层,点击按钮后弹出遮罩层,有关闭按钮【转】

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

  7. jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例

    本文实例讲述了jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能.分享给大家供大家参考,具体如下: 弹出层:两种方式 一是打开网页就自动弹出层二是点击弹出 <!DOCTYPE html ...

  8. jquery特效(7)—弹出遮罩层且内容居中

    上周写了几个小特效,其中有个点击按钮弹出遮罩层的特效,下面来看最终实现的效果: 由于是测试的程序,所以我未加关闭的按钮. 一.主体程序 <!DOCTYPE html> <html&g ...

  9. 基于jQuery的鼠标悬停时放大图片的效果制作

    这是一个基于jQuery的效果,当鼠标在小图片上悬停时,会弹出一个大图,该大图会跟随鼠标的移动而移动.这个效果最初源于小敏同志的一个想法,刚开始做的时候只能实现弹出的图片是固定的,不能随鼠标移动,最后 ...

随机推荐

  1. 在Python中怎么表达True

    在Python中怎么表达True   为False的几种情况 0为False,其他所有数值皆为True 空串("")为False,其他所有字符串皆为True 空list([])为F ...

  2. 【转】Linux下的多线程编程

    1 引言 线程(thread)技术早在60年代就被提出,但真正应用多线程到操作系统中去,是在80年代中期,solaris是这方面的佼佼者.传统的 Unix也支持线程的概念,但是在一个进程(proces ...

  3. C#获取ftp文件最后修改时间

    public static DateTime GetFileModifyDateTime(string ftpServerIP,string ftpFolder,string ftpUserID,st ...

  4. 如何开启php报错

    今天碰到一个很二的问题,安装了php网站之后,发现nginx一直无法解析到index.php文件,显示为空白,从后台的日志来看是500错误,但是同目录下的phpinfo.php却可以正常解析.想来应该 ...

  5. 转载-SQL中的where条件,在数据库中提取与应用浅析

    1        问题描述 一条SQL,在数据库中是如何执行的呢?相信很多人都会对这个问题比较感兴趣.当然,要完整描述一条SQL在数据库中的生命周期,这是一个非常巨大的问题,涵盖了SQL的词法解析.语 ...

  6. 第三百四十六天 how can I 坚持

    徐斌的电脑来了,thinkpad,感觉还好,电脑也就这样,联想..不好说,不做评论,末日王者吧. 为什么写博客tab键不管用了呢. 下午又去奥体跑了一圈,好累,刚跑完腿疼,现在还好. 还没洗澡呢,都这 ...

  7. CentOS下MySQL 5.7.9编译安装

    MySQL 5.7 GA版本的发布,也就是说从现在开始5.7已经可以在生产环境中使用,有任何问题官方都将立刻修复. MySQL 5.7主要特性: 更好的性能:对于多核CPU.固态硬盘.锁有着更好的优化 ...

  8. UVALive 5881 Unique Encryption Keys (DP)

    Unique Encryption Keys 题目链接: http://acm.hust.edu.cn/vjudge/problem/26633 Description http://7xjob4.c ...

  9. Codeforces Round #365 (Div. 2) D. Mishka and Interesting sum (离线树状数组+前缀xor)

    题目链接:http://codeforces.com/contest/703/problem/D 给你n个数,m次查询,每次查询问你l到r之间出现偶数次的数字xor和是多少. 我们可以先预处理前缀和X ...

  10. .java 文件中只能定义一个public class 且与文件名相同