动画缩略图悬停的框架

by sunflowamedia ON 2011/08/31 1197

今天介绍的这款缩略图悬停的画廊架构功能比较全，有鼠标经过的事件，还有显示隐藏及Slide等效果。作为一款画廊非常不错。这款效果是由一个网站演变而来，我去除了其他功能，删除了不必要的javascript和CSS。如果喜欢请留可用Email。

Step1. 创建HTML 展示内容部分

<!-- mywork1 -->
<div id="mywork1">
    <div id="work_desc">
        <p id="title">Title 01</p>
        <p><strong>Description</strong><br />text text text text text text text text text text </p>
        <p class="note"><a href="http://www.sunflowamedia.com/">http://www.sunflowamedia.com/</a></p>
        <a href="#"> <img class="prev" src="images/prev.gif"></a>
        <a href="#"> <img class="next" src="images/next.gif"></a>
    </div>
    <div id="slideImg1">
        <img src="images/TD_template_1.jpg">
        <img src="images/TD_template_2.jpg">
    </div>
    <a href="#" onClick="closeWork('mywork1'); return false;"><img id="close" src="images/close.gif"></a>
</div>
<!-- mywork1 ends -->

id=”mywork1″,id=”slideImg1″,onClick=”closeWork(‘mywork1′) ID数字请随项目量而变

缩略图部分

<div id="td_t" class="thumbnail_box">
    <div class="thumbnail_wrapper">
        <a href="#" onClick="showWork('mywork1', 'digitalRollover'); return false;">
        <img class="frame" src="images/frame_digital.png"></a>
        <img class="cover" src="images/cover_blue.png">
        <img src="images/d_td_rachel.jpg">
    </div>
</div>

Step2. 创建CSS

#playground{
	width: 960px;
	text-align: center;
	margin: 0 auto;
	padding-top: 100px;
	clear: both;
	overflow: hidden;
}
.thumbnail{
	float: left;
	text-align: center;
	width: 240px;
	height: 250px;

}
.thumbnail_box{
	float: left;
	text-align: center;
	width: 240px;
	height: 250px;
}
.thumbnail_wrapper{
	width: 240px;
	height: 235px;
	overflow: hidden;
	position: relative;
	float: left;
	top: 15px;
	display: none;
}
.thumbnail_wrapper img{
	position: absolute;
	top: 0;
	left: 0;
}
/* @group work */
#work{
	background-color: #000;
	width: 100%;
	float: left;
	clear: both;
	display: none;
	height: 850px;
}
#work_wrapper{
	width: 930px;
	margin-right: auto;
	margin-left: auto;
	clear: both;
	padding-top: 70px;
	position: relative;
	top: 0;
	left: 0;
}
#mywork1{
}
#work_desc{
	width: 210px;
	margin-right: 30px;
	float: left;
	color: #a9a9a9;
	margin-bottom: 70px;
	font-size: 12px;
	line-height: 15px;
	letter-spacing: 1px;
}
#title{
	color: #fffeff;
	font-size: 14px;
	margin-bottom: 20px;
	line-height: 16px;
}
.note{
	color: #5e5e5e;
	padding-top: 5px;
}
.prev{
	display: block;
	float: left;
	left: 0;
	margin-top: 50px;
	padding-right: 50px;
}
.next{
	float: right;
	margin-top: 50px;
	padding-left: 50px;
}
#close{
	float: left;
	cursor: hand;
	padding-right: 0px;
	position: absolute;
	left: 930px;
}
iframe{
	width: 665px;
	height: 550px;
	border: 0;
	background-color: #000;
	z-index: 7;
}
/* @group slideImg */
#slideImg1 {
    padding: 0;
    margin:  0;
	margin-bottom: 70px;
	float: left;
	display: block;
	width: 585px;
}
#slideImg2 {
    padding: 0;
    margin:  0;
	margin-bottom: 70px;
	float: left;
	display: block;
	width: 585px;
}
#slideImg3 {
    padding: 0;
    margin:  0;
	margin-bottom: 70px;
	float: left;
	display: block;
}
#slideImg4 {
    padding: 0;
    margin:  0;
	margin-bottom: 70px;
	float: left;
	display: block;
	width: 585px;
}
#slideImg5 {
    padding: 0;
    margin:  0;
	margin-bottom: 70px;
	float: left;
	display: block;
	width: 585px;
}
#slideImg6 {
    padding: 0;
    margin:  0;
	margin-bottom: 70px;
	float: left;
	display: block;
	width: 585px;
}
#slideImg7 {
    padding: 0;
    margin:  0;
	margin-bottom: 70px;
	float: left;
	display: block;
	width: 585px;
}
#slideImg8 {
    padding: 0;
    margin:  0;
	margin-bottom: 70px;
	float: left;
	display: block;
	width: 585px;
}
#slideImg img {
    top:  0;
    left: 0;
	border: 5px solid #FFF;
}
/* @loading */
#work_loading{
	width: 100%;
	display: block;
	float: left;
	position: relative;
	top: 0;
	left: 0;
}
#work_loading1{
	background-color: #ff4d4d;
	width: 100%;
	display: block;
	float: left;
	height: 0px;
	z-index: 0;
	position: absolute;
	top: 0;
}
#work_loading2{
	background-color: #000;
	width: 0%;
	display: block;
	float: left;
	height:5px;
	z-index: 2;
	position: relative;
	top: 0;
}

Step3. 插入jQuery和脚本

$(document).ready(function() {
$('div[id^=mywork]').each(function(index) {
$('#mywork'  (index 1)).hide();
});
/* thumbnail */
shapes = $('.thumbnail_wrapper');
$('.thumbnail_wrapper, nav').show();
$('.thumbnail_wrapper').animate({top:'-20px', opacity:0});
var z = 0;
var refreshId = setInterval(function() {
shapes.eq(z).animate({top:'15px', opacity:100},{duration:1000, easing: 'easeOutBounce'});

 z  ;
 if (z > shapes.length) {
	clearInterval(refreshId);
 }
}, 200);

/* icons rollover */
$("#sort_all,#submenu_all").mouseover(function() {
	if (!$("#allRollover").hasClass ('selected')) {
		$("#sort_all,#submenu_all").hover(function() {
				$("#allRollover").addClass("over");
		},function() {
				$("#allRollover").removeClass("over");
		});
	}
});
$("#sort_digital,#submenu_digital").mouseover(function() {
	if (!$("#digitalRollover").hasClass ('selected')) {
		$("#sort_digital,#submenu_digital").hover(function() {
				$("#digitalRollover").addClass("over");
		},function() {
				$("#digitalRollover").removeClass("over");

		});
	}
});
$("#sort_branding,#submenu_branding").mouseover(function() {
	if (!$("#brandingRollover").hasClass ('selected')) {
		$("#sort_branding,#submenu_branding").hover(function() {
				$("#brandingRollover").addClass("over");
		},function() {
				$("#brandingRollover").removeClass("over");

		});
	}
});
$("#sort_print,#submenu_print").mouseover(function() {
	if (!$("#printRollover").hasClass ('selected')) {
		$("#sort_print,#submenu_print").hover(function() {
				$("#printRollover").addClass("over");
		},function() {
				$("#printRollover").removeClass("over");

		});
	}
});
/* rollover icons ends */
/* thumbnails hover action */
$(".thumbnail_wrapper").hover(function(){
	$(".cover", this).stop().animate({top:'240px'},{queue:false,duration:300,easing: 'easeOutBack'});
	$(this).animate({top:'3px'},{duration:300 , easing: 'easeInQuad'});
}, function() {
	$(".cover", this).stop().animate({top:'0px'},{queue:false,duration:100, easing: 'easeInBack'});
	$(this).animate({top:'15px'},{duration:300, easing: 'easeOutBounce'});

}); /* end thumbnails hover action */
/* ends */
$('div[id^=slideImg]').each(function(index) {

	$('#slideImg'  (index 1)).cycle({
		fx:     'fade',
		speed:  'fast',
		timeout: 0,
		next:   '.next,#slideImg'  (index 1),
		prev:   '.prev'
	});
});
});
function myMouseOut(id){
if ($(id).hasClass("over")){
	$(id).mouseleave(function(){
		$(id).slideUp({duration:300 , easing: 'easeInOutCubic'});
	});
} else{
	$(id).slideUp({duration:300 , easing: 'easeInOutCubic'});
}
}
/* show work */
function showWork(id1,id2){
/* rollover icons */
$("#allRollover, #digitalRollover, #brandingRollover, #printRollover").removeClass();
$("#" id2).addClass('selected');
/* loading animation */
if( $.browser.opera ){
		$('html').animate({scrollTop: $("#nav").offset().top},'slow');
	}else {
 		$('html,body').animate({scrollTop: $("#nav").offset().top},'slow'); 
}
 
$("#divider:first").hide();
$("#work_loading2").css('width','0%').show();
$(".menu_" id1).css('color','#ff4d4d'); /* highlight color - submenu selected */
$("#work_loading").animate({height:'5px'},{queue:false,duration:300, easing: 'easeInOutQuad'});
/* close work */
$('div[id^=mywork]').each(function(index) {
	if( $('#mywork'  (index 1)).is(":visible") ) {
			  $('#mywork'  (index 1)).fadeOut().hide();
			  $("#work").slideUp({duration:200 , easing: 'easeInOutCubic'});
			  $(".menu_mywork" (index 1)).css('color','#333');
	}
});/* end close work */
$("#work_loading1").animate({height:'5px'},300, function() {
	$("#work_loading2").animate({width:'100%'},1000, function(){
		$("#" id1).show();
		$("#work").slideDown({duration:700 , easing: 'easeInOutQuad'});
		$("#work_loading1").height(0);
	}); /* end working_loading2 */
}); /* end working_loading1 */
}/* end show work */
function closeWork(id){
$('html,body').animate({scrollTop: $("#top").offset().top},'slow', function() {
$("#work").slideUp(500,function(){
	/* rollover icons */
	$("#allRollover, #digitalRollover, #brandingRollover, #printRollover").removeClass();
	$("#allRollover").addClass('selected');

	/* close animation */
	$("#" id).hide();
	$("#work_loading2").slideUp({duration:200 , easing: 'easeInOutQuad'});
	$("#work_loading").animate({height:'0px'},{queue:false,duration:100, easing: 'easeInBack'});
	$("#divider:first").show();
	$(".menu_" id).css('color','#333'); /* remove color - submenu selected */
});
});
}