效果体验：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. CSS3魔法堂：CSS3滤镜及Canvas、SVG和IE滤镜替代方案详解

    一.前言    IE特有的滤镜常常作为CSS3各种新特性的降级处理补充,而Adobe转向HTML5后与Chrome合作推出CSS3的Filter特性,因此当前仅Webkit内核的浏览器支持CSS3 F ...

  2. 剑指Offer面试题：2.二维数组中的查找

    一.题目:二维数组中的查找 题目:在一个二维数组中,每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该整数. ...

  3. IE10，11下_doPostBack未定义错误的解决方法

    出现的原因 .NET2.0和.NET4.0一起发布的浏览器定义文件中有一个错误,它们保存相当一部分浏览器版本的定义.但是浏览器的有些版本(比如IE10,11)则不再在这个范围之内.因此,ASP.NET ...

  4. Mycat 全局系列号

    标签:utf8 概述 本篇文章介绍mycat怎样在分库分表的情况下保证主键的全局唯一方法,接下来就来分析三种方法各自的优缺点. 配置 文件方式获取 1.修改server配置文件 vim server. ...

  5. jQuery源码分析系列(38) : 队列操作

    Queue队列,如同data数据缓存与Deferred异步模型一样,都是jQuery库的内部实现的基础设施 Queue队列是animate动画依赖的基础设施,整个jQuery中队列仅供给动画使用 Qu ...

  6. javascript面向对象系列第一篇——构造函数和原型对象

    × 目录 [1]构造函数 [2]原型对象 [3]总结 前面的话 一般地,javascript使用构造函数和原型对象来进行面向对象编程,它们的表现与其他面向对象编程语言中的类相似又不同.本文将详细介绍如 ...

  7. JBOSS.71.1.Final安装配置

    对于JBOSS大家了解多少,相信做Java开发的小童鞋对于Tomcat一定不陌生,而今天为大家介绍的JBOSS也是一款服务器软件,相比Tomcat,JBOSS对于高级的JavaEE相对来说更强大一点, ...

  8. WebService中使用Aspose.Cells.dll

    首先,目前我是在Json里面使用的,然后关于HTML+WebService+Json怎么使用,可以看看Jsonp跨域的相关例子. 本次的实现原理是:通过HTML传送参数到WebService,然后在W ...

  9. Hibernate学习之——搭建log4j日志环境

    昨天讲了Hibernate开发环境的搭建以及实现一个Hibernate的基础示例,但是你会发现运行输出只有sql语句,很多输出信息都看不见.这是因为用到的是slf4j-nop-1.6.1.jar的实现 ...

  10. AOP的实现机制--转

    原文地址:http://www.iteye.com/topic/1116696 1 AOP各种的实现 AOP就是面向切面编程,我们可以从几个层面来实现AOP. 在编译器修改源代码,在运行期字节码加载前 ...