源码：

<!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. 分布式缓存技术redis学习（三）——redis高级应用（主从、事务与锁、持久化）

    上文<详细讲解redis数据结构(内存模型)以及常用命令>介绍了redis的数据类型以及常用命令,本文我们来学习下redis的一些高级特性.目录如下: 安全性设置 设置客户端操作秘密 客户 ...

  2. ubuntu thrift 0.9.3编译安装

    Table of Contents 1. 下载thrift源代码 2. 编译并安装 3. 运行测试程序 4. 安装 1 下载thrift源代码 git clone https://git-wip-us ...

  3. C++面向对象设计

    一. 组合(复合),继承,委托 1.composition(组合)has-a 1.1 组合举例:(Adapter 设计模式) 关系: 利用deque功能实现所有queue功能 template < ...

  4. WEB免费打印控件推荐

    在WEB系统中,打印的确是个烦人的问题. 要么自己开发打印控件,如果项目时间紧,肯定来不及. 要么购买成熟的打印控件,如果是大项目可以考虑,但如果项目只有几K到1.2W之间,这就麻烦了. 前段时间有机 ...

  5. Sql 使用备份还是使用脚本

    对sql使用并不熟悉,但是通过项目接触总结出的经验 什么样的场景下选择使用脚本或者备份: 1:当需要创建相关的库的时候使用脚本 2:当需要还原至某个时间点的状态的或者前进至某个版本的数据库的时候就使用 ...

  6. ios UIWebView截获html并修改便签内容（转载）

    ios UIWebView截获html并修改便签内容 博客分类: iphone开发iphone开发phoneGap uiwebviewstringByEvaluatingJavaScriptFromS ...

  7. [Java] 使用 Spring 2 Portlet MVC 框架构建 Portlet 应用

    转自:http://www.ibm.com/developerworks/cn/java/j-lo-spring2-portal/ Spring 除了支持传统的基于 Servlet 的 Web 开发之 ...

  8. Spring Data Jpa 详解 （配置篇）

    前言: JPA全称Java Persistence API,即Java持久化API,它为Java开发人员提供了一种对象/关系映射工具来管理Java应用中的关系数据,结合其他ORM的使用,能达到简化开发 ...

  9. cxGrid使用汇总1

    这些都不是原创,只是平时收集到资料然后整理的,有些可能百度一下到处都是而且还大同小异也有些不是很好找,现在贴出来希望给那些用到cxGrid的人会有所帮助 1. 去掉cxGrid中台头的Box 解决:在 ...

  10. angularJs中图表功能（有集成框架）－angular-flot

    1.柱状图和折线图的数据格式: $scope.Chart.data = [ { label: "离线", data: [[0, 2]] }, { label: "在线&q ...