源码：

<!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. ORM框架-VB/C#.Net实体代码生成工具(EntitysCodeGenerate)【ECG】4.5

    摘要:VB/C#.Net实体代码生成工具(EntitysCodeGenerate)[ECG]是一款专门为.Net数据库程序开发量身定做的(ORM框架)代码生成工具,所生成的程序代码基于OO.ADO.N ...

  2. Golang学习 - unicode 包

    ------------------------------------------------------------ const ( MaxRune = '\U0010FFFF' // Unico ...

  3. 架构设计：负载均衡层设计方案（5）——LVS单节点安装

    1.概述 上篇文章<架构设计:负载均衡层设计方案(4)——LVS原理>(http://blog.csdn.net/yinwenjie/article/details/46845997),我 ...

  4. 小白日记47：kali渗透测试之Web渗透-XSS（一）

    XSS [推荐书籍:XSS跨站脚本攻击剖析与防御] xss表示Cross Site Scripting(跨站脚本攻击),它与SQL注入攻击类似,SQL注入攻击中以SQL语句作为用户输入,从而达到查询/ ...

  5. [Java] JSTL格式化时间计算时差

    引入JSLT标签: <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> ...

  6. Oracle基础 数据库备份和恢复

    一.为什么需要数据备份 造成数据丢失的主要原因: 1.介质故障. 2.用户的错误操作. 3.服务器的彻底崩溃. 4.计算机病毒. 5.不可预料的因素. Oracle中故障类型分为以下4种. 1.语句故 ...

  7. CSS属性（常用的属性）

    CSS属性(常用的属性)http://www.w3school.com.cn/cssref/index.asp 一:文本与字体属性 1.字体属性 (1):font-size:字体的大小(例如:font ...

  8. GDB使用

    1.display val 设置显示格式 2.i b显示所有断点

  9. Android studio 安装和使用

    之前一直是使用eclipse+ADT+SDK进行Android的开发的,不愿意转到Android studio是因为熟悉了eclipse的开发环境,最近偶然使用了android studio,感觉比使 ...

  10. Table of Contents - TCP/IP

    网络访问层 Ethernet II 网际层 IP IPv4 报文格式 ICMP ICMP 报文分析 ping: 向网络主机发送 ICMP ECHO_REQUEST 包 ARP ARP 过程 arp 命 ...