jQuery点击图片弹出放大特效下载
效果体验：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点击图片弹出放大特效下载的更多相关文章
- jQuery点击图片弹出放大可拖动图片查看
CSS代码: .popup-bigic { position: absolute; ; ; background: #eee; overflow: hidden; ; } .popup-bigic . ...
- jQuery点击图片弹出大图遮罩层
使用jQuery插件HoverTreeShow弹出遮罩层显示大图 效果体验:http://hovertree.com/texiao/hovertreeshow/ 在开发HoverTreeTop项目的产 ...
- jquery 点击图片弹出遮罩层查看大图
<div class="photobox"> <ul> <li data-date="'+data[i].id+'"> &l ...
- 基于jQuery图片弹出翻转特效代码
分享一款基于jQuery图片弹出翻转特效代码.这是一款基于jQuery+HTML5实现的,里面包含六款不同效果的鼠标点击图片弹出特效下载.效果图如下: 在线预览 源码下载 实现的代码. html代 ...
- jQuery效果之封装一个文章图片弹出放大效果
首先先搭写一个基本的格式: $.fn.popImg = function() { //your code goes here } 然后用自调用匿名函数包裹你的代码,将系统变量以变量形式传递到插件内部, ...
- 前端jquery实现点击图片弹出大图层(且滚动鼠标滑轮图片缩放)
<img src="{$vo.photo}" height="50px" onclick="showdiv({$i});"> & ...
- jquery点击按钮弹出图片
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- HTML+js+css实现点击图片弹出上传文件窗口的两种思路
第一种:CSS实现 <style><!-- .fileInputContainer{ height:256px; background:url(upfil ...
- 点击图片弹出input type=file选择器
<label for="UploadCoverPhoto" class="cursor-pointer"> <img class=" ...
随机推荐
- oracle中查询、禁用、启用、删除表外键
1.查询所有表的外键的: select table_name, constraint_name from user_constraints where constraint_type = 'R'; ...
- Maven 最佳实践
持续不断地学习maven Maven是一个很好的工具,但同时也拥有陡峭的学习曲线.因此,将 http://books.sonatype.com/mvnref-book/reference/ 加入到你的 ...
- MySQL外键之级联
简介 MySQL外键起到约束作用,在数据库层面保证数据的完整性.例如使用外键的CASCADE类型,当子表(例如user_info)关联父表(例如user)时,父表更新或删除时,子表会更新或删除记录,这 ...
- Swift语言快速入门
Swift语言快速入门(首部同步新版官方API文档和语法的Swift图书,确保代码可编译,作者专家在线答疑,图书勘误实时跟进) 极客学院 编著 ISBN 978-7-121-24328-8 201 ...
- [转] Android优秀开源项目
Android经典的开源项目其实非常多,但是国内的博客总是拿着N年前的一篇复制来复制去,实在是不利于新手学习.今天爬爬把自己熟悉的一些开源项目整理起来,希望能对Android开发同学们有所帮助.另外, ...
- 替代jquery1.9版本以前的toggle事件函数（开关）
以上文章为转载自http://blog.sina.com.cn/s/blog_50042fab0101c7a9.html var flag=1; $(".selector").cl ...
- 设有一数据库，包括四个表：学生表（Student）、课程表（Course）、成绩表（Score）以及教师信息表（Teacher）。
一. 设有一数据库,包括四个表:学生表(Student).课程表(Course).成绩表(Score)以及教师信息表(Teacher).四个表的结构分别如表1-1的表(一)~表( ...
- android应用安全——（数据抓包）跟踪监控android数据包
转载博客:http://blog.csdn.net/xyz_lmn/article/details/8808169 web开发中Chrome.IE.firefox等浏览器都自带提供了插件帮助开发者跟踪 ...
- Android数据存储之SharedPreferences及如何安全存储
前言: 最近一直在学习ios的数据存储,当学习到NSUserDefaults的时候让我回想起了SharedPreferences,今天闲来无事,想着总结一下SharedPreferences的使用. ...
- NFS Volume Provider（Part I） - 每天5分钟玩转 OpenStack（62）
cinder-volume 支持多种 volume provider,前面我们一直使用的是默认的 LVM,本节我们将增加 NFS volume provider. 虽然 NFS 更多地应用在实验或小规 ...