效果体验：http://hovertree.com/texiao/jqimg/1/

效果图：

代码如下：

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>美女图片浏览特效 - 何问起</title>

<link href="http://hovertree.com/texiao/jqimg/1/css/clearbox.css" rel="stylesheet" type="text/css" />

<script src="http://hovertree.com/texiao/jqimg/1/js/clearbox.js" type="text/javascript"></script>

<script src="http://down.hovertree.com/jquery/jquery-1.12.3.min.js" type="text/javascript"></script>

</head>

<body>

<style type="text/css">

* {

margin: 0;

padding: 0;

list-style-type: none;

}

a, img {

border: 0;

}

body {

font: 12px/180% Arial, Helvetica, sans-serif, "新宋体";

}

.playbox {

width: 840px;

margin: 5px auto;

overflow: hidden;

padding: 20px 0px 0px 20px;

border: solid 1px #ddd;

}

.playbox a {

height: 360px;

overflow: hidden;

display: block;

float: left;

margin-right: 20px;

margin-bottom: 20px;

position: relative;

text-decoration: none;

}

.playbox a img {

max-width: 260px;

_width: expression(this.width > 260 ? "260px" : this.width); /*使ie6支持max-width*/

border: none;

}

.txt {

position: absolute;

left: 0;

bottom: 0;

width: 100%;

height: 45px;

line-height: 45px;

text-align: center;

color: #fff;

background: rgba(0,0,0,0.6);

}

.txt h3 {

font-weight: normal;

margin: 0px;

}

.txt p {

font-size: 14px;

display: block;

line-height: 20px;

-webkit-margin-before: 1em;

-webkit-margin-after: 1em;

-webkit-margin-start: 0px;

-webkit-margin-end: 0px;

-moz-margin-before: 1em;

-moz-margin-after: 1em;

-moz-margin-start: 0px;

-moz-margin-end: 0px;

}

.hovertreeinfo{text-align:center;}.hovertreeinfo a{color:blue}

</style>

<h2 style="margin:0 auto; width:840px; text-align:center; margin-top:10px;">点击美女，相册播放</h2>

<div class="hovertreeinfo"><a href="http://hovertree.com/h/bjaf/flurt6nt.htm" target="_blank">原文</a> <a href="http://hovertree.com/texiao/" target="_blank">特效库</a>

<a href="http://hovertree.com/" target="_blank">首页</a>

</div>

<div class="playbox">

<a href="http://hovertree.com/texiao/jqimg/1/images/1.jpg" rel="clearbox[test1]"><img src="http://hovertree.com/texiao/jqimg/1/images/1.jpg" /><div class="txt"><h3>性感美女</h3><p>送福利了，拿走不懈！</p></div></a>

<a href="http://hovertree.com/texiao/jqimg/1/images/2.jpg" rel="clearbox[test1]"><img src="http://hovertree.com/texiao/jqimg/1/images/2.jpg" /><div class="txt"><h3>性感美女</h3><p>更多请访问：hovertree.com/texiao/ </p></div></a>

<a href="http://hovertree.com/texiao/jqimg/1/images/3.jpg" rel="clearbox[test1]"><img src="http://hovertree.com/texiao/jqimg/1/images/3.jpg" /><div class="txt"><h3>性感美女</h3><p>你过来，我保证不会打你的！</p></div></a>

<a href="http://hovertree.com/texiao/jqimg/1/images/4.jpg" rel="clearbox[test1]"><img src="http://hovertree.com/texiao/jqimg/1/images/4.jpg" /><div class="txt"><h3>性感美女</h3><p>不需要遮罩层的话，可以删除</p></div></a>

<a href="http://hovertree.com/texiao/jqimg/1/images/5.jpg" rel="clearbox[test1]"><img src="http://hovertree.com/texiao/jqimg/1/images/5.jpg" /><div class="txt"><h3>性感美女</h3><p>不需要遮罩层的话，可以删除</p></div></a>

<a href="http://hovertree.com/texiao/jqimg/1/images/6.jpg" rel="clearbox[test1]"><img src="http://hovertree.com/texiao/jqimg/1/images/6.jpg" /><div class="txt"><h3>性感美女</h3><p>何问起，其实是一位美女。</p></div></a>

</div>

<script type="text/javascript">

// 不是必要的代码

//从底部上升的遮罩效果开始

$(".playbox a").hover(function(){

$(this).find(".txt").stop().animate({height:"360px"},200);

$(this).find(".txt h3").stop().animate({paddingTop:"60px"},200);

},function(){

$(this).find(".txt").stop().animate({height:"45px"},200);

$(this).find(".txt h3").stop().animate({paddingTop:"0px"},200);

})

//从底部上升的遮罩效果结 何问起

</script>

</body>

</html>

源码下载：http://hovertree.com/h/bjaf/ljn1fwka.htm

转自：http://hovertree.com/h/bjaf/flurt6nt.htm

特效库：http://www.cnblogs.com/roucheng/p/texiao.html

jQuery点击图片弹出放大特效下载的更多相关文章

  1. jQuery点击图片弹出放大可拖动图片查看

    CSS代码: .popup-bigic { position: absolute; ; ; background: #eee; overflow: hidden; ; } .popup-bigic . ...

  2. jQuery点击图片弹出大图遮罩层

    使用jQuery插件HoverTreeShow弹出遮罩层显示大图 效果体验:http://hovertree.com/texiao/hovertreeshow/ 在开发HoverTreeTop项目的产 ...

  3. jquery 点击图片弹出遮罩层查看大图

    <div class="photobox"> <ul> <li data-date="'+data[i].id+'"> &l ...

  4. 基于jQuery图片弹出翻转特效代码

    分享一款基于jQuery图片弹出翻转特效代码.这是一款基于jQuery+HTML5实现的,里面包含六款不同效果的鼠标点击图片弹出特效下载.效果图如下: 在线预览   源码下载 实现的代码. html代 ...

  5. jQuery效果之封装一个文章图片弹出放大效果

    首先先搭写一个基本的格式: $.fn.popImg = function() { //your code goes here } 然后用自调用匿名函数包裹你的代码,将系统变量以变量形式传递到插件内部, ...

  6. 前端jquery实现点击图片弹出大图层(且滚动鼠标滑轮图片缩放)

    <img src="{$vo.photo}" height="50px" onclick="showdiv({$i});"> & ...

  7. jquery点击按钮弹出图片

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  8. HTML+js+css实现点击图片弹出上传文件窗口的两种思路

    第一种:CSS实现 <style><!-- .fileInputContainer{        height:256px;        background:url(upfil ...

  9. 点击图片弹出input type=file选择器

    <label for="UploadCoverPhoto" class="cursor-pointer"> <img class=" ...

随机推荐

  1. 用"hosting.json"配置ASP.NET Core站点的Hosting环境

    通常我们在 Prgram.cs 中使用硬编码的方式配置 ASP.NET Core 站点的 Hosting 环境,最常用的就是 .UseUrls() . public class Program { p ...

  2. ASP.NET MVC 路由(三)

    ASP.NET MVC路由(三) 前言 通过前两篇的学习会对路由系统会有一个初步的了解,并且对路由系统中的Url规则有个简单的了解,在大家的脑海中也有个印象了,那么路由系统在ASP.NETMVC中所处 ...

  3. MySQL中的全文索引

    之前曾经发表了一篇关于SQL Server全文索引的文章.现在将MySQL全文索引的配置过程记录一下. Step1:创建Student表 CREATE TABLE `student` ( `id` I ...

  4. C语言 · 十六进制转十进制

    问题描述 从键盘输入一个不超过8位的正的十六进制数字符串,将它转换为正的十进制数后输出. 注:十六进制数中的10~15分别用大写的英文字母A.B.C.D.E.F表示. 样例输入 FFFF 样例输出 6 ...

  5. Android 解决方法数 65536 (65k) 限制

    可能出现的错误信息: Conversion to Dalvik format failed: Unable to execute dex: method ID not in [0, 0xffff]: ...

  6. java中集合类中Collection接口中的Map接口的常用方法熟悉

    1:Map接口提供了将键映射到值的对象.一个映射不能包含重复的键:每个键最多只能映射到一个值.Map接口中同样提供了集合的常用方法. 2:由于Map集合中的元素是通过key,value,进行存储的,要 ...

  7. angularjs UI Libraries

    angularjs UI Libraries ● ng-bootstrap is currently available. ● PrimeNG has largest number of compon ...

  8. ThinkPHP3.2设置404跳转页面

    在ThinkPHP3.2版本中当我们访问不存在的页面时会出现非常不友好错误提示页面,类如下图: 解决办法: 1.在ThinkPHP3.2详细的介绍了该框架下的ThinkPHP惯例配置文件convent ...

  9. VS代码提示不出现或者提示变成英文或者各种奇葩问题的解决

    万能法==>重置 代码提示变成英文的了 打开开发员命令提示 输入:devenv.exe /setup /resetuserdata /resetsettings 重新打开,会和你第一次安装完毕一 ...

  10. .NET平台开源项目速览(4).NET文档生成工具ADB及使用

    很久以前就使用ADB这个工具来生成项目的帮助文档.功能强大,在学习一些开源项目的过程中,官方没有提供CHM帮助文档,所以为了快速的了解项目结构和注释.就生成文档来自己看,非常好用.这也是一个学习方法吧 ...