源码：

<!doctype html>

<html class="no-js" lang="en">

<head>

<meta charset="utf-8">

<title>CollagePlus for jQuery Example</title>

<link rel="stylesheet" type="text/css" href="../support/examples.css" media="all" />

<link rel="stylesheet" type="text/css" href="../css/transitions.css" media="all" />

<!--[if lt IE 9]>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

    <![endif]-->

<!--[if (gte IE 9) | (!IE)]><!-->

<script src="jquery.js"></script>

<!--<![endif]-->

<!--[if IE]>

    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

    <![endif]-->

<script src="../jquery.collagePlus.js"></script>

<script src="../jquery.removeWhitespace.js"></script>

<script src="../jquery.collageCaption.js"></script>

<script type="text/javascript">

    // All images need to be loaded for this plugin to work so

    // we end up waiting for the whole window to load in this example

    $(window).load(function () {

        $(document).ready(function(){

            collage();

            $('.Collage').collageCaption();

        });

    });

    // Here we apply the actual CollagePlus plugin

    function collage() {

        $('.Collage').removeWhitespace().collagePlus(

            {

                'fadeSpeed'     : 2000,

                'targetHeight'  : 200

            }

        );

    };

    // This is just for the case that the browser window is resized

    var resizeTimer = null;

    $(window).bind('resize', function() {

        // hide all the images until we resize them

        $('.Collage .Image_Wrapper').css("opacity", 0);

        // set a timer to re-apply the plugin

        if (resizeTimer) clearTimeout(resizeTimer);

        resizeTimer = setTimeout(collage, 200);

    });

    </script>

</head>

<body>

<div style="text-align:center; font-weight:bold; font-size:24px;"><a style="color:#2dbdf1;"href="http://www.100sucai.com">100sucai.com</a></div>

<section class="Collage effect-parent">

  <div class="Image_Wrapper" data-caption="This is some data <u>with</u>html in it"><a href="http://www.100sucai.com"><img src="01.gif"></a></div>

  <div class="Image_Wrapper" data-caption="This is some data <u>with</u>html in it. Also a really long sentence with a <a href="http://www.100sucai.com">link</a> in it"><a href="http://www.100sucai.com"><img src="02.gif"></a></div>

  <div class="Image_Wrapper" data-caption="This is some data <u>with</u>html in it This is some data <u>with</u>html in it. Also a really long sentence with a <a href="http://www.100sucai.com">link</a> in it This is some data <u>with</u>html in it. Also a really long sentence with a <a href="http://www.100sucai.com">link</a> in it"><a href="http://www.100sucai.com"><img src="03.gif"></a></div>

  <div class="Image_Wrapper" data-caption="This is some data <u>with</u>html in it This is some data <u>with</u>html in it. Also a really long sentence with a <a href="http://www.100sucai.com">link</a> in it"><a href="http://www.100sucai.com"><img src="04.gif"></a></div>

  <div class="Image_Wrapper" data-caption="This is some data <u>with</u>html in it"><a href="http://www.100sucai.com"><img src="05.gif"></a></div>

  <div class="Image_Wrapper" data-caption="This is some data <u>with</u>html in it This is some data <u>with</u>html in it. Also a really long sentence with a <a href="http://www.100sucai.com">link</a> in it"><a href="http://www.100sucai.com"><img src="06.gif"></a></div>

</section>

</body>

</html>

　　

效果图：

演示地址：www.100sucai.com/code/769.html

鼠标悬浮图片时弹出透明提示图层的jQuery特效的更多相关文章

  1. [UWP]在应用退出时弹出确认提示框

    1. 需求 在应用退出时(点击右上角的关闭按钮)弹出一个确认按钮可以说是一个最常见的操作了,例如记事本的"你是否保存": 但这个功能在UWP上居然有点小复杂.这篇文章将解释如何实现 ...

  2. Devexpress XtraReport 打印时弹出Margins提示解决办法

    当我们用Dev的报表引擎做报表时,如果把边缘设置为0时会弹出提示. 可以通过代码 XtraReport.PrintingSystem.ShowMarginsWarning = false; 取消该提示

  3. Jquery实现鼠标hover图片遮罩弹出提示层特效

    1.引入JS文件和所需要的样式文件 2.简单的写上以下18行代码就可以实现了 $(document).ready(function() { $("div.tip_trigger a.img& ...

  4. SQL Server 新建 数据库关系图 时弹出警告提示此数据库没有有效所有者，因此无法安装数据库关系图支持对象。

    今天创建数据库关系图,发现提示此数据库没有有效所有者,因此无法安装数据库关系图支持对象.若要继续,请首先使用 数据库属性 对话框的文件页或 ALTER AUTHORIZAITION 语句将数据库所有者 ...

  5. 配置Info.plist (设置状态栏样式、自定义定位时系统弹出的提示语、配置3DTouch应用快捷菜单)

    一.概述 iOS中很多功能需要配置Info.plist才能实现,如设置后台运行.支持打开的文件类型.自定义访问隐私内容时弹出的提示等.了解Info.plist中各字段及其含义,可以访问苹果开发网站相关 ...

  6. 浅谈CSS和JQuery实现鼠标悬浮图片放大效果

    对于刚刚学习网页前台设计的同学一定对图片的处理非常苦恼,那么这里简单的讲解一下几个图片处理的实例. 以.net为平台,微软的Visual Studio 2013为开发工具,当然前台技术还是采用CSS3 ...

  7. js在关闭页面前弹出确认提示【转载】

    最近项目中出现个bug,就是导出数据后,会提示确认导航,其实实际需求并不需要这个提示,可能是之前遗留的问题.查了下资料是在触发了onbeforeunload事件,那么剩下的就是代码组织问题了. 众所周 ...

  8. SVN 安装后右键出现点击鼠标右键弹出错误提示：CrashHandler initialization error

    SVN 安装后右键出现点击鼠标右键弹出错误提示:CrashHandler initialization error 原因是目标文件夹中缺少SendRpt.exe文件 解决方案:找svn是好的的同事将b ...

  9. PLSQL 登录时弹出(没有登录)空白提示框

    如题,在登录的时候莫名出现了plsql登录时弹出(没有登录)的空白提示框,在网上找了很多方法之后都不行,然后发现plsql的 oracle主目录名莫名的成了空,然后直接重新把它的目录设置上 重启pls ...

随机推荐

  1. archlinux locale-gen 命令出错

    如果运行locale-gen命令出现以下的错误“locale alias file `/usr/share/locale/locale.alias' not found: No such file o ...

  2. Android获取网页上的图片的代码

    public Bitmap getWebBitmap(String imgUrl) { Bitmap bitmap =null; try { InputStream inputStream = nul ...

  3. Python Counter()计数工具

    Table of Contents 1. class collections.Counter([iterable-or-mapping]) 1.1. 例子 1.2. 使用实例 2. To Be Con ...

  4. MR 的 mapper 数量问题

    看到群里面一篇文章涨了贱识 http://www.cnblogs.com/xuxm2007/archive/2011/09/01/2162011.html 之前关注过 reduceer 的数量问题,还 ...

  5. iOS （UIButton封装）仿糯米首页缩放“按钮”效果

    前言 过年期间,少不了各种聚会,当下聚会大多数情况下自然是团购,然后就是用各种APP...使用度娘糯米时(不是广告,不是广告,不是广告!),偶然注意到了它的首页中一个有意思的效果,就是那些“按钮”点击 ...

  6. Load Balancing 折半枚举大法好啊

    Load Balancing 给出每个学生的学分.   将学生按学分分成四组,使得sigma (sumi-n/4)最小.         算法:   折半枚举 #include <iostrea ...

  7. Python练习题 029：Project Euler 001：3和5的倍数

    开始做 Project Euler 的练习题.网站上总共有565题,真是个大题库啊! # Project Euler, Problem 1: Multiples of 3 and 5 # If we ...

  8. jquery 请求apache solr 跨域解决方案

    <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> ...

  9. 函数查询（Function Query）

    函数查询 可以利用 numeric字段的值 或者 与字段相关的的某个特定的值的函数,来对文档进行评分. 1.    使用函数查询的方法 这里主要有三种方法可以使用函数查询,这三种s方法都是通过solr ...

  10. IOS开发UI篇之自动滚动图片

    我们在做项目是有时候会遇到设置自动滚动图片,所以我自己也遇到过两次.觉得他是一个挺有意思东西,所以做了下总结 DEMO: .h #import <UIKit/UIKit.h> @inter ...