源码：

<!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. Golang学习 - unicode/utf8 包

    ------------------------------------------------------------ // 编码所需的基本数字 const ( RuneError = '\uFFF ...

  2. 关于报错The specified child already has a parent的解决办法

    报错信息为:java.lang.IllegalStateException: The specified child already has a parent. You must call remov ...

  3. kafka的一些名词

    broker.id 区kafka集群中每台机器的标识 log.dirs 日志的存放目录,这个最好不要放到/tmp目录下,因为kafka的已被消费和未被消费的数据也被当成“日志”存放到了日志目录,: l ...

  4. scala基础备忘

    声明一个变量 声明一个常量 显式指定类型 定义一个main函数 package org.admln.scala class HelloScala { } object HelloScala { def ...

  5. iOS开发 - 一个天真的搜索控制器的独白

    文/Azen(简书作者)原文链接:http://www.jianshu.com/p/6d5327111511著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”. 正文 一.关于横向模块开发 ...

  6. android基础学习之布局

    我学习android第一步接触的就是布局的学习.布局是androidUI的基础,是重中之重.总的来说android有6种布局,分别是线性布局LinearLayout.相对布局RelativeLayou ...

  7. Oracle基础（七）数据表

    一.创建表 语法: CREATE TABLE [schema.]table (column datatype[,column datatype[,...]); 说明: CREATE TABLE:为创建 ...

  8. python 装 ez_setup.py 出错

    python 装 ez_setup.py出错setuptools,pip,install,UnicodeDecodeError: 'ascii' codec can't decode byte.解决: ...

  9. 【转】loadrunner场景对性能测试策略的映射

    性能测试策略 LoadRunner性能测试场景 压力测试 面向目标测试场景+忽略think time 负载测试 手工测试场景+同步点+think time+虚拟IP+带宽模拟…… 并发测试 同步点+多 ...

  10. Sublime_Tip_01

    //JerryWeb //20150601 //WebTool | Sublime ======= Sublime_Tip_01======= 接触了Sublime后,才真正开始爱上了coding # ...