效果体验：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. 解读ASP.NET 5 & MVC6系列（6）：Middleware详解

    在第1章项目结构分析中,我们提到Startup.cs作为整个程序的入口点,等同于传统的Global.asax文件,即:用于初始化系统级的信息(例如,MVC中的路由配置).本章我们就来一一分析,在这里如 ...

  2. 【直播】APP全量混淆和瘦身技术揭秘

    [直播]APP全量混淆和瘦身技术揭秘 近些年来移动APP数量呈现爆炸式的增长,黑产也从原来的PC端转移到了移动端,通过逆向手段造成数据泄漏.源码被盗.APP被山寨.破解后注入病毒或广告现象让用户苦不堪 ...

  3. Code First开发系列之领域建模和管理实体关系

    返回<8天掌握EF的Code First开发>总目录 本篇目录 理解Code First及其约定和配置 创建数据表结构 管理实体关系 三种继承模式 本章小结 自我测试 本篇的源码下载:点击 ...

  4. HTML5特性速记图

    今天推荐大家一张HTML5特性速记图,供大家平时查阅,也可以打印放在电脑旁帮助速记.速查.此图笔者收集于网络图片.

  5. MA均线组合

    MA5.MA13.MA21.MA34.MA55.MA90.MA120.MA250

  6. padding标准盒模型和怪异盒子模型

    我们都知道padding是为块级元素设置内边距 但是在使用过程中,我们却会遇到一些问题.padding的标准盒模型和怪异盒模型 padding盒子模型 我们通过demo来讲这个问题,用文字干讲第一没意 ...

  7. fc-san

    在SAN网络中,所有的数据传输在高速.高带宽的网络中进行,SAN存储实现的是直接对物理硬件的块级存储访问,提高了存储的性能和升级能力. 早期的SAN采用的是光纤通道(FC,Fibre Channel) ...

  8. HTML5 音频播放器-Javascript代码(短小精悍)

    直接上干货咯! //HTML5 音频播放器 lzpong 2015/01/19 var wavPlayer = function () { if(window.parent.wavPlayer) re ...

  9. js中的块作用域

    今天我们来一起研究下JavaScript中的变量作用域问题,话不多说,直接上代码. <script type="text/javascript"> (function( ...

  10. Jquery中的(function($){...})(jQuery)

    当你第一眼看到“(function($){...})(jQuery)”的时候,你有什么感觉?呵呵呵,我当时还是止不住的从心底里骂了一句——操,这他妈什么劳什子.时过境迁,对于现在无比倚重Jquery的 ...