jQuery圖片列表點擊彈出大圖層
編輯：網頁特效代碼
效果體驗：http://hovertree.com/texiao/jqimg/1/
Demo 2：http://hovertree.com/texiao/jqimg/1/1/
效果圖：
代碼如下，後面附源碼下載：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>clearbox圖片浏覽特效 - 何問起</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
Demo 2：http://hovertree.com/texiao/jqimg/1/1/
效果圖：
代碼如下，後面附源碼下載：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>clearbox圖片浏覽特效 - 何問起</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
小編推薦
熱門推薦