基于jQuery的超酷预览图展示特效代码
前台部分代码
代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="JS代码,图片特效,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为基于jQuery的预览图展示特效代码，属于站长常用代码，更多图片特效代码请访问网页前端设计吧JS代码频道。" />
<title>基于jQuery的预览图展示特效代码_网页前端设计吧</title>
<style type="text/css">
*{ padding:0px; margin:0px; }
body{ background:#D5DEE7; }
a{ color:#C8DCE5; }
h3{ margin: 10px 10px 0 10px; color:#FFF; font:18pt Arial, sans-serif; letter-spacing:-1px; font-weight: bold; }
.boxgrid{
width: 325px;
height: 260px;
margin:10px;
float:left;
background:#161613;
border: solid 2px #8399AF;
overflow: hidden;
position: relative;
}
.boxgrid img{
position: absolute;
top: 0;
left: 0;
border: 0;
}
.boxgrid p{
padding: 0 10px;
color:#afafaf;
font-weight:bold;
font:10pt "Lucida Grande", Arial, sans-serif;
}
.boxcaption{
float: left;
position: absolute;
background: #000;
height: 100px;
width: 100%;
opacity: .8;
/* For IE 5-7 */
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
/* For IE 8 */
-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}
.captionfull .boxcaption {
top: 260;
left: 0;
}
.caption .boxcaption {
top: 220;
left: 0;
}
</style>
<script type="text/javascript" src="js/jquery-1.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//To switch directions up/down and left/right just place a "-" in front of the top/left attribute
//Vertical Sliding
$('.boxgrid.slidedown').hover(function(){
$(".cover", this).stop().animate({top:'-260px'},{queue:false,duration:300});
}, function() {
$(".cover", this).stop().animate({top:'0px'},{queue:false,duration:300});
});
//Horizontal Sliding
$('.boxgrid.slideright').hover(function(){
$(".cover", this).stop().animate({left:'325px'},{queue:false,duration:300});
}, function() {
$(".cover", this).stop().animate({left:'0px'},{queue:false,duration:300});
});
//Diagnal Sliding
$('.boxgrid.thecombo').hover(function(){
$(".cover", this).stop().animate({top:'260px', left:'325px'},{queue:false,duration:300});
}, function() {
$(".cover", this).stop().animate({top:'0px', left:'0px'},{queue:false,duration:300});
});
//Partial Sliding (Only show some of background)
$('.boxgrid.peek').hover(function(){
$(".cover", this).stop().animate({top:'90px'},{queue:false,duration:160});
}, function() {
$(".cover", this).stop().animate({top:'0px'},{queue:false,duration:160});
});
//Full Caption Sliding (Hidden to Visible)
$('.boxgrid.captionfull').hover(function(){
$(".cover", this).stop().animate({top:'160px'},{queue:false,duration:160});
}, function() {
$(".cover", this).stop().animate({top:'260px'},{queue:false,duration:160});
});
//Caption Sliding (Partially Hidden to Visible)
$('.boxgrid.caption').hover(function(){
$(".cover", this).stop().animate({top:'160px'},{queue:false,duration:160});
}, function() {
$(".cover", this).stop().animate({top:'220px'},{queue:false,duration:160});
});
});
</script>
</head>
<body>
<div class="boxgrid captionfull">
<img src="images/jareck.jpg"/>
<div class="cover boxcaption">
<h3>Jarek Kubicki</h3>
<p>Artist<br/><a href="http://www.jscss8.com/" target="_BLANK">More Work</a></p>
</div>
</div>
<div class="boxgrid caption">
<img src="images/kamil.jpg"/>
<div class="cover boxcaption">
<h3>Kamil Smala</h3>
<p>Artist<br/><a href="http://www.jscss8.com/" target="_BLANK">More Work</a></p>
</div>
</div>
<div class="boxgrid slideright">
<img class="cover" src="images/martin.jpg"/>
<h3>Martin Stranka</h3>
<p>Photographer<br/><a href="http://www.jscss8.com/" target="_BLANK">More Work</a></p>
</div>
<div class="boxgrid thecombo">
<img class="cover" src="images/florian.jpg"/>
<h3>Florian Nicolle</h3>
<p>Graphic Designer<br/><a href="http://www.jscss8.com/" target="_BLANK">More Work</a></p>
</div>
<div class="boxgrid slidedown">
<img class="cover" src="images/nonsense.jpg"/>
<h3>The Nonsense Society</h3>
<p>Art, Music, Word<br/><a href="http://www.jscss8.com/" target="_BLANK">Website</a></p>
</div>
<div class="boxgrid peek">
<a href="http://www.jscss8.com/" target="_BLANK"><img src="images/birss.jpg"/></a>
<a href="http://www.jscss8.com/" target="_BLANK"><img class="cover" src="images/buildinternet.jpg"/></a>
</div>
<p>代码整理：网页前端设计吧 www.jscss8.com</p>
<p>＊尊重他人劳动成果，转载请自觉注明出处！注：此代码仅供学习交流，请勿用于商业用途。</p>
<p></p>
<p><p>基于jQuery实现预览图+简介的内容展示代码，鼠标放在图片上可以产生多种效果，例如：显示简介，图片移动等。<br />
</p></p>
<p></p>
</body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="JS代码,图片特效,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为基于jQuery的预览图展示特效代码，属于站长常用代码，更多图片特效代码请访问网页前端设计吧JS代码频道。" />
<title>基于jQuery的预览图展示特效代码_网页前端设计吧</title>
<style type="text/css">
*{ padding:0px; margin:0px; }
body{ background:#D5DEE7; }
a{ color:#C8DCE5; }
h3{ margin: 10px 10px 0 10px; color:#FFF; font:18pt Arial, sans-serif; letter-spacing:-1px; font-weight: bold; }
.boxgrid{
width: 325px;
height: 260px;
margin:10px;
float:left;
background:#161613;
border: solid 2px #8399AF;
overflow: hidden;
position: relative;
}
.boxgrid img{
position: absolute;
top: 0;
left: 0;
border: 0;
}
.boxgrid p{
padding: 0 10px;
color:#afafaf;
font-weight:bold;
font:10pt "Lucida Grande", Arial, sans-serif;
}
.boxcaption{
float: left;
position: absolute;
background: #000;
height: 100px;
width: 100%;
opacity: .8;
/* For IE 5-7 */
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
/* For IE 8 */
-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}
.captionfull .boxcaption {
top: 260;
left: 0;
}
.caption .boxcaption {
top: 220;
left: 0;
}
</style>
<script type="text/javascript" src="js/jquery-1.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//To switch directions up/down and left/right just place a "-" in front of the top/left attribute
//Vertical Sliding
$('.boxgrid.slidedown').hover(function(){
$(".cover", this).stop().animate({top:'-260px'},{queue:false,duration:300});
}, function() {
$(".cover", this).stop().animate({top:'0px'},{queue:false,duration:300});
});
//Horizontal Sliding
$('.boxgrid.slideright').hover(function(){
$(".cover", this).stop().animate({left:'325px'},{queue:false,duration:300});
}, function() {
$(".cover", this).stop().animate({left:'0px'},{queue:false,duration:300});
});
//Diagnal Sliding
$('.boxgrid.thecombo').hover(function(){
$(".cover", this).stop().animate({top:'260px', left:'325px'},{queue:false,duration:300});
}, function() {
$(".cover", this).stop().animate({top:'0px', left:'0px'},{queue:false,duration:300});
});
//Partial Sliding (Only show some of background)
$('.boxgrid.peek').hover(function(){
$(".cover", this).stop().animate({top:'90px'},{queue:false,duration:160});
}, function() {
$(".cover", this).stop().animate({top:'0px'},{queue:false,duration:160});
});
//Full Caption Sliding (Hidden to Visible)
$('.boxgrid.captionfull').hover(function(){
$(".cover", this).stop().animate({top:'160px'},{queue:false,duration:160});
}, function() {
$(".cover", this).stop().animate({top:'260px'},{queue:false,duration:160});
});
//Caption Sliding (Partially Hidden to Visible)
$('.boxgrid.caption').hover(function(){
$(".cover", this).stop().animate({top:'160px'},{queue:false,duration:160});
}, function() {
$(".cover", this).stop().animate({top:'220px'},{queue:false,duration:160});
});
});
</script>
</head>
<body>
<div class="boxgrid captionfull">
<img src="images/jareck.jpg"/>
<div class="cover boxcaption">
<h3>Jarek Kubicki</h3>
<p>Artist<br/><a href="http://www.jscss8.com/" target="_BLANK">More Work</a></p>
</div>
</div>
<div class="boxgrid caption">
<img src="images/kamil.jpg"/>
<div class="cover boxcaption">
<h3>Kamil Smala</h3>
<p>Artist<br/><a href="http://www.jscss8.com/" target="_BLANK">More Work</a></p>
</div>
</div>
<div class="boxgrid slideright">
<img class="cover" src="images/martin.jpg"/>
<h3>Martin Stranka</h3>
<p>Photographer<br/><a href="http://www.jscss8.com/" target="_BLANK">More Work</a></p>
</div>
<div class="boxgrid thecombo">
<img class="cover" src="images/florian.jpg"/>
<h3>Florian Nicolle</h3>
<p>Graphic Designer<br/><a href="http://www.jscss8.com/" target="_BLANK">More Work</a></p>
</div>
<div class="boxgrid slidedown">
<img class="cover" src="images/nonsense.jpg"/>
<h3>The Nonsense Society</h3>
<p>Art, Music, Word<br/><a href="http://www.jscss8.com/" target="_BLANK">Website</a></p>
</div>
<div class="boxgrid peek">
<a href="http://www.jscss8.com/" target="_BLANK"><img src="images/birss.jpg"/></a>
<a href="http://www.jscss8.com/" target="_BLANK"><img class="cover" src="images/buildinternet.jpg"/></a>
</div>
<p>代码整理：网页前端设计吧 www.jscss8.com</p>
<p>＊尊重他人劳动成果，转载请自觉注明出处！注：此代码仅供学习交流，请勿用于商业用途。</p>
<p></p>
<p><p>基于jQuery实现预览图+简介的内容展示代码，鼠标放在图片上可以产生多种效果，例如：显示简介，图片移动等。<br />
</p></p>
<p></p>
</body>
</html>
