基于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的效果,当鼠标在小图片上悬停时,会弹出一个大图,该大图会跟随鼠标的移动而移动.这个效果最初源于小敏同志的一个想法,刚开始做的时候只能实现弹出的图片是固定的,不能随鼠标移动,最后 ...
随机推荐
- 指定的值不是类型“Edm.Int32”的实例
指定的值不是类型“Edm.Int32”的实例参数名: value 说明: 执行当前 Web 请求期间,出现未经处理的异常.请检查堆栈跟踪信息,以了解有关该错误以及代码中导致错误的出处的详细信息. 异常 ...
- Having the Result Set of a Stored Proc Sent to You by RSS Feed.
Having the Result Set of a Stored Proc Sent to You by RSS Feed. by JBrooks 14. 十二月 2010 12:44 I wa ...
- datagrid url json
<div class="easyui-accordion" style="width:500px;height:300px;"> <div t ...
- Controlling GameObjects Using Components
[Accessing Components] The most common case is where a script needs access to other Components attac ...
- C++11空指针
[C++11空指针] 早在 1972 年,C语言诞生的初期,常数 0 带有常数及空指针的双重身分. C 使用 preprocessor macro NULL 表示空指针, 让 NULL 及 0 分别代 ...
- hdu 1155 Bungee Jumping
http://acm.hdu.edu.cn/showproblem.php?pid=1155 Bungee Jumping Time Limit: 2000/1000 MS (Java/Others) ...
- Python基础 基本运算符
什么是操作符 形如 1+1 = 2 这样的 1 就是操作数 + 就是操作符 python语言支持的操作符: 算数运算符 比较运算符(关系) 赋值运算符 逻辑运算符 位运算符 会员操作符 标志操作符 算 ...
- 利用 Heritrix 构建特定站点爬虫
http://www.ibm.com/developerworks/cn/opensource/os-cn-heritrix/
- Custom ReadOnlyProperty【PluraSight】
Limited functionality: Not settable No data binding No validation No animation No Inheritance When t ...
- 十年MFC经历认识的Microsoft技术 [转]
十年MFC经历认识的Microsoft技术[原创] 孙辉 自从2005年3月8日下午16时“十年MFC经历认识的Microsoft技术”以帖子的方式发表于CSDN论坛后,引起了许多网友得好评,使得笔者 ...