效果体验: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='/images/loading.gif' data-original="http://hovertree.com/texiao/jqimg/1/js/clearbox.js" type="text/javascript"></script><script src='/images/loading.gif' data-original="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='/images/loading.gif' data-original="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='/images/loading.gif' data-original="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='/images/loading.gif' data-original="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='/images/loading.gif' data-original="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='/images/loading.gif' data-original="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='/images/loading.gif' data-original="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