今天给大家分享一款基于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. 20151227感知机(perceptron)

    1 感知机 1.1 感知机定义 感知机是一个二分类的线性分类模型,其生成一个分离超平面将实例的特征向量,输出为+1,-1.导入基于误分类的损失函数,利用梯度下降法对损失函数极小化,从而求得此超平面,该 ...

  2. pip install 下载慢的问题

    建个文件 ~/.pip/pip.conf, 内容如下 [global] timeout = 6000 index-url = https://pypi.doubanio.com/simple [ins ...

  3. HTML5边玩边学(1)画布实现方法

    一.<canvas>标签 Html5 引入了一个新的 <canvas> 标签,这个标签所代表的区域就好象一块画布,你的所有图形绘制最后都要在这块画布上呈现.有了这个标签,浏览器 ...

  4. <系统函数实现>memcmp

    这是我实现的memcmp函数: #include <stdio.h> #include <string.h> /* *int memcmp (const void *s1,co ...

  5. HDU 1846 Brave Game(简单巴什博弈)

    Brave Game Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total ...

  6. LightOJ 1370 - Bi-shoe and Phi-shoe (欧拉函数思想)

    http://lightoj.com/volume_showproblem.php?problem=1370 Bi-shoe and Phi-shoe Time Limit:2000MS     Me ...

  7. hdu 5475 An easy problem(暴力 || 线段树区间单点更新)

    http://acm.hdu.edu.cn/showproblem.php?pid=5475 An easy problem Time Limit: 8000/5000 MS (Java/Others ...

  8. Oracle日志文件管理与查看

    Oracle日志文件管理与查看 from:http://hi.baidu.com/shuker/item/25ee611ee960c7426826bb1f 1.查询系统使用的是哪一组日志文件: sel ...

  9. 转载:linux vi命令详解

    转自:http://www.cnblogs.com/mahang/archive/2011/09/01/2161672.html 刚开始学着用linux,对vi命令不是很熟,在网上转接了一篇. vi编 ...

  10. 汉字简体繁体转换----Javascript

    最近看到有个简体--繁体字互相转换的程序,是用JS实现的,感觉很好玩,所以拿来研究研究.先看看界面如下: 汉字简体繁体转换 // 0&&parent.frames.length) { ...