Welcome, Old Sport!

渐隐画廊展示效果 CSS & jQuery

by ilikecss ON 2011/05/30 6342

这款画廊展示效果个人感觉不错,打开速度快,没有Loading效果。而且加上鼠标渐隐事件又将其美化,视觉上很华丽。如果这是你所需要的效果,不要犹豫,立刻下载它吧。PS: 演示图片可能有点大,打开速度因人而异,见谅。

Step1. 创建HTML

大图片区域:

<div id="boxeso">
    <div id="dialogo" class="windowo">
        <div class="dinfo">
        <img src="https://github.com/downloads/sunflowamedia/blog/watchedit_0.jpg" alt="">
        <img src="https://github.com/downloads/sunflowamedia/blog/watchedit_1.jpg" alt="">
        <img src="https://github.com/downloads/sunflowamedia/blog/watchedit_2.jpg" alt="">
        </div>
    <a href="#" class="close"></a>
    <br style="clear: both;">
    </div>
</div>

<div class="big_box">
    <a href="#dialogo" name="modal"><img src="https://github.com/downloads/sunflowamedia/blog/watchedit_p.jpg" alt="">
    <div class="big_ghost">
    <p>watchedit</p>
    </div></a>
</div>

中图片区域:

<div id="boxes1">
    <div id="dialog1" class="window1">
        <div class="dinfo">
        <img src="https://github.com/downloads/sunflowamedia/blog/tv_0.jpg" alt="">
        <img src="https://github.com/downloads/sunflowamedia/blog/tv_1.jpg" alt="">
        </div>
<a href="#" class="close"></a></div>
</div>

<div class="medium_box">
<a href="#dialog1" name="modal"><img src="https://github.com/downloads/sunflowamedia/blog/tv_p.jpg" alt="">
<div class="medium_ghost"></div></a>
</div>

flickr区域:

<a href="#" target="_blank" title=""><img src="https://github.com/downloads/sunflowamedia/blog/flickrh.png" class="rd2"><img src="#" alt=""></a>

Step2. 创建CSS

/*portfolio*/
.colone1 {
	float: left;
	width: 400px;
	overflow: hidden;
	margin-left:77px;
	font-family: Verdana, Geneva, sans-serif;
	}
.colone2 {
	float:left;
	width:200px;
	overflow:hidden;
	}
	.colone3 {
	float:left;
	width:100px;
	overflow:hidden;
	}
.colone4 {
	float: right;
	position: fixed;
	display:block;
	overflow:hidden;
	margin-top: 36px;
	}
.big_ghost {
	-moz-opacity:.0;
	filter:alpha(opacity=0);
	opacity:.0;
	background-image:url(https://github.com/downloads/sunflowamedia/blog/mghost.png);
	width:400px;
	height:300px;
	position:absolute;
	left:0px;
	top:0px;
	z-index:99999;
	}
.big_ghost p {
	color:#fff;
	font-size: 24px;
	font-weight:bold;
	text-align: center;
	margin: 130px auto 0;
	text-transform:uppercase;
	line-height:1.2em;
	}
.medium_box {
	width:200px;
	height:150px;
	float:left;
	z-index:999;
	position:relative;
	cursor:pointer;
	}
.medium_ghost {
	background-image:url(https://github.com/downloads/sunflowamedia/blog/portfh.png);
	-moz-opacity:.0; filter:alpha(opacity=0);
	opacity:.0;
	width:200px;
	height:150px;
	position: absolute;
	left:0px;
	top:0px;
	z-index:99999;
	}
.medium_ghost p {
	color:#fff;
	font-size:10px;
	font-weight:bold;
	padding:106px 6px 0px 6px;
	text-transform:uppercase;
	line-height:1.2em;
	float:left;
	background-position:center;
	}
/*flickr*/
.flickrfeed {
	margin: 0;
	padding: 0;
	position:relative;
	}
.flickrfeed li {
	list-style: none;
	float: left;
	height:75px;
	width:100px;
	}
.flickrfeed li a img {
	height:75px;
	width:100px;
	}
.flickrfeed li a:hover img {
	background: url(https://github.com/downloads/sunflowamedia/blog/flickrh.png);
	display:block;
	}
/* Z-index of #mask must lower than #boxes .window */
#boxes .window {
	position: absolute;
	width:440px;
	height:200px;
	display:none;
	z-index:9999;
	padding:20px;
}
/* Customize your modal window here, you can add background image too */
#boxes #dialog {
	width:691px;
	height:auto;
	margin-top:10px; overflow: visible;
	background-color: #D3D3D5;
	border: 0px solid #A9A9A9;
	padding: 5px;
	-webkit-box-shadow: 0 5px 10px rgba(0,0,0,0.05);
	-moz-box-shadow: 0 5px 10px rgba(0,0,0,0.05);
	box-shadow: 0 5px 10px rgba(0,0,0,0.05);
}
/* portofolio popup */
#boxeso .windowo, #boxes1 .window1, #boxes2 .window2 {
	position: absolute;
	width:440px;
	height:400px;
	display:none;
	z-index:9999;
	padding:20px;
}
#boxeso #dialogo, #boxes1 #dialog1, #boxes2 #dialog2 {
	width:691px;
	height:auto;
	margin-top:389px; overflow: visible;
	background-color: #D3D3D5;
	border: 0px solid #A9A9A9;
	padding: 5px;
	-webkit-box-shadow: 0 5px 10px rgba(0,0,0,0.05);
	-moz-box-shadow: 0 5px 10px rgba(0,0,0,0.05);
	box-shadow: 0 5px 10px rgba(0,0,0,0.05);
 }
.dinfo { padding:50px; width:610px; overflow:hidden;}
img.dmask {
	width: 200px;
	height: 150px;
	display: block;
	position: absolute;
	display: none;
	visibility:  hidden;
	-moz-opacity:.70; filter:alpha(opacity=70); opacity:.70;
}
img.rd2 {
	width: 100px;
	height: 75px;
	display: block;
	position: absolute;
	-moz-opacity:.0; filter:alpha(opacity=0); opacity:.0;
}

Step3. 插入jQuery和脚本包

$(document).ready(function() {

var viewport = $(window).width();
var margina = (viewport-1000)/2 810;
$('.colone4, .logoport').css('left', margina);

$(window).resize(function() {
var viewport = $(window).width();
var margina = (viewport-1000)/2 810;
$('.colone4, .logoport').css('left', margina);
});
});
$(document).ready(function() {  

//select all the a tag with name equal to modal
$('a[name=modal]').click(function(e) {
//Cancel the link behavior
e.preventDefault();
//Get the A tag
var id = $(this).attr('href');

//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//alert(id);

$currp=$(this).offset();$currp2=$(id).offset();
$toppos=$currp2.top - 250; //default, for left big img
$leftpos=$currp.left  1 ; //default, for left big img

if (id=="#dialog"){ //contact
//        $(id).css('top',  winH/2-$(id).height()/2);
ii=1;
$toppos=$currp2.top  250 ;
$leftpos=winW/2-$(id).width()/2;
//alert($toppos);
$leftpos=$leftpos-57;

}

if (id=="#dialog2" || id=='#dialog6'){ //male slike desno
$leftpos=$leftpos-200;
}
//alert(id);

$(id).css('top',  $toppos );
//alert($currp.top);
//        $(id).css('top',  winH/2-$(id).height()/2);
$(id).css('left', $leftpos);

//transition effect
$(id).fadeIn(300); 

});

//if close button is clicked
$('.window .close, .windowo, .window1, .window2 .close').click(function (e) {
//Cancel the link behavior
e.preventDefault();
$('.window, .windowo, .window1, .window2').fadeOut();
});     

});
$(document).ready(function() {

$('ul.flickrfeed li a')
.livequery(function(){

$(this).hover(function() {
	//$(this).find('img.rd2').fadeIn(400);
	//$(this).find('img.rd2').css("visibility","visible");
	$(this).find('img.rd2').fadeTo("fast",0.7);

 }, function() {
	$(this).find('img.rd2').fadeTo("slow",0);
	//$(this).find('img.dmask2').css("visibility","hidden");
 });

}, function() {
$(this)
	.unbind('mouseover')
	.unbind('mouseout');
});

$(".big_box").hover(function() {
	//$(this).find('div.big_ghost').css("display","block");
	$(this).find('div.big_ghost').fadeTo("fast",0.7);

 }, function() {
	$(this).find('div.big_ghost').fadeTo("slow",0);

});
$(".medium_box").hover(function() {
	//$(this).find('div.big_ghost').css("display","block");
	$(this).find('div.medium_ghost').fadeTo("fast",0.7);

 }, function() {
	$(this).find('div.medium_ghost').fadeTo("slow",0);

});

});

脚本包

<script src="js/jquery-1.js" type="text/javascript"></script>
<script src="js/jquery_002.js" type="text/javascript"></script>
1条评论
  1. #1

    LZ什么的最好了说道:

    貌似其中还有以前分享过的那个Back to top的效果~~




TOP