基于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的效果,当鼠标在小图片上悬停时,会弹出一个大图,该大图会跟随鼠标的移动而移动.这个效果最初源于小敏同志的一个想法,刚开始做的时候只能实现弹出的图片是固定的,不能随鼠标移动,最后 ...
随机推荐
- 使用Go开发一个简单的服务器程序
最近有个小项目,需要一个简单的后台程序来支撑,本来想用Nodejs来做,但是由于本人js一直很菜,并且很讨厌callback,虽然我也很喜欢异步模型,但我一直都觉得JS是反人类的.后台就用了go处理, ...
- WinForms 使用Graphics绘制字体阴影
C#以两种方法实现文字阴影效果,同时还实现了简单的动画效果: 一种是对文本使用去锯齿的边缘处理,在两个不同的位置绘制文本,形成阴影: 另一个是以阴影为线条,构造影线画刷,先画背景再画前景,使用grap ...
- How to check “hasRole” in Java Code with Spring Security?
From:http://stackoverflow.com/questions/3021200/how-to-check-hasrole-in-java-code-with-spring-securi ...
- thinkphp 防止sql注入
防止SQL注入 对于WEB应用来说,SQL注入攻击无疑是首要防范的安全问题,系统底层对于数据安全方面本身进行了很多的处理和相应的防范机制,例如: $User = M("User") ...
- iOS Framework lipo报错 lipo: can't map input file
fatal error: /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/bin/ ...
- Spring REST实践之Error Handling
Error Responses 在REST API中,HTTP状态码有非常重要的作用.API开发者应该坚持为每一个请求返回一个正确合适的状态码,而且应该在响应body中包含有用的.细粒度的错误信息.这 ...
- ckeditor 升级到 4.5
原来的项目用的是4.0+asp.net 3.5的,一直不错,这两天升级一下ckeditor到最新版4.5.1,用的是chrome浏览器测试,发觉TextBox.Text获取不到数据,在页面用js写do ...
- 读写锁:ReadWriteLock
http://my.oschina.net/20076678/blog/173165 一.在JDK文档中关于读写锁的相关说明 ReadWriteLock 维护了一对相关的 锁 ,一个用于只读操作, ...
- 从UnitedStack OS 1.0 Preview试用申请问卷调查学习OpenStack
http://www.diaochapai.com/survey/ 您的角色最可能是? * (必填, 多选) OpenStack私有云用户,希望能将OpenStack/UOS用于公司内部私有云 云计算 ...
- windows win7 win10 多系统启动菜单 多系统引导设置
win键+R 输入msconfig 根据显示的程序设置(除非你看不懂文字)