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=" ...
随机推荐
- [解惑]JavaScript事件机制
群里童鞋问到关于事件传播的一个问题:“事件捕获的时候,阻止冒泡,事件到达目标之后,还会冒泡吗?”. 初学 JS 的童鞋经常会有诸多疑问,我在很多 QQ 群也混了好几年了,耳濡目染也也收获了不少,以后会 ...
- 关于大型网站技术演进的思考（二十一）--网站静态化处理—web前端优化—下【终篇】（13）
本篇继续web前端优化的讨论,开始我先讲个我所知道的一个故事,有家大型的企业顺应时代发展的潮流开始投身于互联网行业了,它们为此专门设立了一个事业部,不过该企业把这个事业部里的人事成本,系统运维成本特别 ...
- eclipse启动时报告错误：Java was started but returned exit code=-805306369
这两天也没改过eclipse和java的配置,但eclipse启动时报告错误:Java was started but returned exit code=-805306369 后来在eclipse ...
- iOS --------Crash 分析（一）
iOS Crash 分析(文一)- 开始 1. 名词解释 1. UUID 一个字符串,在iOS上每个可执行文件或库文件都包含至少一个UUID.目的是为了唯一识别这个文件. 2. dwarfdump 苹 ...
- weblogic配置数据源
启动weblogic 管理服务器,使用管理用户登录weblogic管理控制台 打开管理控制台后,在左侧的树形域结构中,选择服务->数据源. 在右侧的窗口中,选择 新建->一般数据源 ...
- Ajax_03之接收数据
1.使用XHR接收服务器返回的数据--text 服务器端: header('Content-Type:text/plain'); echo 'xxx'; 客户端: xhr.responseTex ...
- OpenCASCADE BRepTools
OpenCASCADE BRepTools eryar@163.com Abstract. OpenCASCADE BRepTools provides utilities for BRep data ...
- Web APi之消息处理管道（五）
前言 MVC有一套请求处理的机制,当然Web API也有自己的一套消息处理管道,该消息处理管道贯穿始终都是通过HttpMessageHandler来完成.我们知道请求信息存在 RequestMessa ...
- 用js实现放大镜的效果
第一次发博客,还有点小激动,本人现在正在天津上大学,希望以后从事前端这一行业,学习的时间不长,写博客为了记录自己的学习过程和收获,当然也算是巩固.可能写的东西不会像大牛那样高大上,只是一些基本的内容, ...
- 在Windows环境中开始Docker的学习和体验
研究docker有一段时间了,当然我主要的使用环境还是在Linux中,确实很方便. 但也有不少朋友希望使用Windows来工作学习,这里介绍一下在Windows中如何快速开始Docker的学习和体验吧 ...