效果体验：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. java stopwatch 功能

    C#中有一个stopwatch的功能,主要是用来监测程序执行时间的.java之前一直都在用如下方式完成: public static void main(String[] args) { long s ...

  2. 用css画出三角形

    看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...

  3. 谈谈关键字final

    final:可用于修饰类.方法.变量,表示它修饰的类.方法和变量不可改变. (1)修饰变量:变量只能被赋值一次,赋值后不能更改.按照Java代码惯例,final变量就是常量,而且通常常量名要大写: ① ...

  4. 数据结构与算法JavaScript (三) 链表

    我们可以看到在javascript概念中的队列与栈都是一种特殊的线性表的结构,也是一种比较简单的基于数组的顺序存储结构.由于javascript的解释器针对数组都做了直接的优化,不会存在在很多编程语言 ...

  5. 前端学PHP之变量范围

    × 目录 [1]范围跨度 [2]函数范围 [3]global[4]预定义变量[5]超全局变量 前面的话 变量范围即它定义的上下文背景(也就是它的生效范围).在javascript中,并没有变量范围这一 ...

  6. js中用tagname和id获取元素的3种方法

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

  7. （转）运维角度浅谈MySQL数据库优化

    转自:http://lizhenliang.blog.51cto.com/7876557/1657465 一个成熟的数据库架构并不是一开始设计就具备高可用.高伸缩等特性的,它是随着用户量的增加,基础架 ...

  8. Hive Tutorial（上）（Hive 入门指导）

    用户指导 Hive 指导 Hive指导 概念 Hive是什么 Hive不是什么 获得和开始 数据单元 类型系统 内置操作符和方法 语言性能 用法和例子(在<下>里面) 概念 Hive是什么 ...

  9. 自己在总结前人经验下弄的几个opencv封装函数

    第一个是增加对比度的函数,就是变亮. IplImage* EqualizeHistColorImage(IplImage *pImage) { IplImage *pEquaImage = cvCre ...

  10. C/C++ 双精度double 数据相加出错缺陷解释

    不知道有没有人和我一样遇到过这样一个问题,请看下面代码. #include<iostream> using namespace std; int main(){ double a=2.3, ...