Javascript 屏幕上的居中照片库
如何使屏幕居中？我不希望用户必须滚动才能找到图库 Javascript:Javascript 屏幕上的居中照片库,javascript,photo-gallery,Javascript,Photo Gallery,如何使屏幕居中？我不希望用户必须滚动才能找到图库 Javascript: <!-- The JavaScript --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript">
<!-- The JavaScript -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var $ps_albums = $('#ps_albums');
var $ps_container = $('#ps_container');
var $ps_overlay = $('#ps_overlay');
var $ps_close = $('#ps_close');
/**
* when we click on an album,
* we load with AJAX the list of pictures for that album.
* we randomly rotate them except the last one, which is
* the one the User sees first. We also resize and center each image.
*/
$ps_albums.children('div').bind('click',function(){
var $elem = $(this);
var album_name = 'album' + parseInt($elem.index() + 1);
var $loading = $('<div />',{className:'loading'});
$elem.append($loading);
$ps_container.find('img').remove();
$.get('photostack.php', {album_name:album_name} , function(data) {
var items_count = data.length;
for(var i = 0; i < items_count; ++i){
var item_source = data[i];
var cnt = 0;
$('<img />').load(function(){
var $image = $(this);
++cnt;
resizeCenterImage($image);
$ps_container.append($image);
var r = Math.floor(Math.random()*41)-20;
if(cnt < items_count){
$image.css({
'-moz-transform' :'rotate('+r+'deg)',
'-webkit-transform' :'rotate('+r+'deg)',
'transform' :'rotate('+r+'deg)'
});
}
if(cnt == items_count){
$loading.remove();
$ps_container.show();
$ps_close.show();
$ps_overlay.show();
}
}).attr('src',item_source);
}
},'json');
});
/**
* when hovering each one of the images,
* we show the button to navigate through them
*/
$ps_container.live('mouseenter',function(){
$('#ps_next_photo').show();
}).live('mouseleave',function(){
$('#ps_next_photo').hide();
});
/**
* navigate through the images:
* the last one (the visible one) becomes the first one.
* we also rotate 0 degrees the new visible picture
*/
$('#ps_next_photo').bind('click',function(){
var $current = $ps_container.find('img:last');
var r = Math.floor(Math.random()*41)-20;
var currentPositions = {
marginLeft : $current.css('margin-left'),
marginTop : $current.css('margin-top')
}
var $new_current = $current.prev();
$current.animate({
'marginLeft':'250px',
'marginTop':'-385px'
},250,function(){
$(this).insertBefore($ps_container.find('img:first'))
.css({
'-moz-transform' :'rotate('+r+'deg)',
'-webkit-transform' :'rotate('+r+'deg)',
'transform' :'rotate('+r+'deg)'
})
.animate({
'marginLeft':currentPositions.marginLeft,
'marginTop' :currentPositions.marginTop
},250,function(){
$new_current.css({
'-moz-transform' :'rotate(0deg)',
'-webkit-transform' :'rotate(0deg)',
'transform' :'rotate(0deg)'
});
});
});
});
/**
* close the images view, and go back to albums
*/
$('#ps_close').bind('click',function(){
$ps_container.hide();
$ps_close.hide();
$ps_overlay.fadeOut(400);
});
/**
* resize and center the images
*/
function resizeCenterImage($image){
var theImage = new Image();
theImage.src = $image.attr("src");
var imgwidth = theImage.width;
var imgheight = theImage.height;
var containerwidth = 460;
var containerheight = 330;
if(imgwidth > containerwidth){
var newwidth = containerwidth;
var ratio = imgwidth / containerwidth;
var newheight = imgheight / ratio;
if(newheight > containerheight){
var newnewheight = containerheight;
var newratio = newheight/containerheight;
var newnewwidth =newwidth/newratio;
theImage.width = newnewwidth;
theImage.height= newnewheight;
}
else{
theImage.width = newwidth;
theImage.height= newheight;
}
}
else if(imgheight > containerheight){
var newheight = containerheight;
var ratio = imgheight / containerheight;
var newwidth = imgwidth / ratio;
if(newwidth > containerwidth){
var newnewwidth = containerwidth;
var newratio = newwidth/containerwidth;
var newnewheight =newheight/newratio;
theImage.height = newnewheight;
theImage.width= newnewwidth;
}
else{
theImage.width = newwidth;
theImage.height= newheight;
}
}
$image.css({
'width' :theImage.width,
'height' :theImage.height,
'margin-top' :-(theImage.height/2)-10+'px',
'margin-left' :-(theImage.width/2)-10+'px'
});
}
});
</script>
$（函数（）{
var$ps_相册=$（“#ps_相册”）；
var$ps_container=$（“#ps_container”）；
var$ps_overlay=$（“#ps_overlay”）；
var$ps_close=$（“#ps_close”）；
/**
*当我们点击相册时，
*我们使用AJAX加载该相册的图片列表。
*我们随机旋转它们，但最后一个除外，即
*用户首先看到的图像。我们还调整每个图像的大小并使其居中。
*/
$ps_albums.children（'div'）.bind（'click'，function（）{
变量$elem=$（本）；
var album_name='album'+parseInt（$elem.index（）+1）；
var$loading=$（''，{className:'loading'}）；
$elem.append（$loading）；
$ps_container.find（'img'）.remove（）；
$.get（'photostack.php'，{album\u name:album\u name}，函数（数据）{
var items_count=data.length；
对于（变量i=0；i容器高度）{
var newheight=容器高度；
var newratio=新高度/集装箱高度；
var newwidth=newwidth/newratio；
theImage.width=新宽度；
图像高度=新高度；
}
否则{
theImage.width=新宽度；
图像高度=新高度；
}
}
else if（仪表灯>集装箱灯）{
var newheight=容器高度；
var比率=重量/集装箱重量；
var newwidth=imgwidth/比率；
如果（新宽度>集装箱宽度）{
var newwidth=集装箱宽度；
var newratio=新宽度/集装箱宽度；
var newheight=新高度/新比率；
图像高度=新高度；
图像宽度=新宽度；
}
否则{
theImage.width=新宽度；
图像高度=新高度；
}
}
$image.css({
“宽度”：image.width，
“高度”：图像高度，
“页边距顶部”：（图像高度/2）-10+“像素”，
“左边距”：（图像宽度/2）-10+“像素”
});
}
});
将
.ps_container.ps_container {
width: 480px;
height: 350px;
position: fixed; /* EDIT: changed absolute to fixed*/
top: 50%;
margin-top: -175px;
left: 50%;
margin-left: -240px;
z-index: 100;
}