源码：

<!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. poll机制分析

    更多文档:http://pan.baidu.com/s/1sjzzlDF linux poll/select用法及在字符驱动中的简单实现 1.poll和select 使用非阻塞I/O 的应用程序常常使 ...

  2. 3.6html学习笔记之样式选择

    1.元素选择器 *{padding:0;margin:0;} p,span{} 2.类选择器 *.class{} p.class{} <p class="important class ...

  3. easyui datagrid 列拖拽2

    1.拖动前 2.拖动中 3.拖动后 5.代码1 $("#corp-grid").datagrid({ title:"泥头车企业管理", toolbar:&quo ...

  4. go can't find import: "github.com/** 错误

    go get 后 go build 错误 can't find import: "github.com/ 原因: 1.gopath 没配好 2.go get 后要先 go install , ...

  5. find the nth digit

    Problem Description 假设:S1 = 1S2 = 12S3 = 123S4 = 1234.........S9 = 123456789S10 = 1234567891S11 = 12 ...

  6. javaEE学习笔记-单例模式

    定义: 确保一个类只有一个实例,而且自行实例化并向整个系统提供这个实例. 单例模式的三要素: (1)私有的静态的成员变量 (2)私有的构造方法 (3)公共的静态的入口点方法 单例模式的分类: (1)饿 ...

  7. 杂乱无章之Oracle（二）

    六.IMPDP用法 1.导入表 impdp hsiufo/hsiufo directory=dump_dir dumpfile=full.dmp tables=scott.emp remap_sche ...

  8. 【阿里云产品公测】PTS测试 SLB+ECS+RDS组合的DZ论坛负载极限压力,100并发2000页

    作者:阿里云用户woaj01 ​​环境介绍: 1.ECS:1核 1G 5M 杭州 2.RDS:240M  5G  杭州内网 3.SLB:私网实例​ 配置测试环境: 测试脚本: 1.生成参数文件,我的方 ...

  9. iis8 默认不支持svc解决方法

    最近在IIS8中发布WCF服务应用时,发现IIS8不支持WCF服务svc请求,后来发现IIS8缺少对WCF服务的Managed Handler,按照以下步骤添加后,IIS8即支持WCF服务. 1. 首 ...

  10. python 基础——运算符重载

    方法 重载 调用 __init__ 构造函数 x = Class() __del__ 析构函数 del x __str__ 打印 print x __call__ 调用函数 x(*args) __ge ...