网络相册

$("#showPhoto").hide(); //初始化时不显示大图 var iPicNum = 30; //图片总数量 for(var i=1;i<=iPicNum;i++){ $(document.body).append($("<div><a href='#'><img src='photo/thumb/"+i.toString()+".jpg'></a></div>")); } $("div:has(a)").addClass("thumb"); for(var i=0;i<iPicNum;i++){ var myimg = new Image(); myimg.src = $("div a img").get(i).src; //根据图片的比例（水平或者竖直），添加不同的样式 if(myimg.width > myimg.height) $("div:has(a):eq("+i+")").addClass("ls"); else $("div:has(a):eq("+i+")").addClass("pt"); } $("div a:has(img)").click(function(){ //如果点击缩略图，则显示大图 $("#showPhoto").css({ //大图的位置根据窗口来判断 "left":($(window).width()/2-300>20?$(window).width()/2-300:20), "top":($(window).height()/2-270>30?$(window).height()/2-270:30) }).add("#showPic").fadeIn(400); //根据缩略图的地址，获取相应的大图地址 var mySrc = $(this).find("img").attr("src"); mySrc = "photo" + mySrc.slice(mySrc.lastIndexOf("/")); $("#showPic").find("img").attr("src",mySrc); if($(this).parent().hasClass("ls")) //根据图片属性（水平或者竖直），调整大图的位置 $("#showPic").find("img").css("marginTop","70px"); else if($(this).parent().hasClass("pt")) $("#showPic").find("img").css("marginTop","0px"); }); $("#close").click(function(){ //点击按钮close，则关闭大图面板（采用动画） $("#showPhoto").add("#showPic").fadeOut(400); }); var currentSrc; var bMargin; $("#next").click(function(){ prev_next(this.id); }); $("#showPic").find("img").click(function(){ //点击大图，同样显示下一幅 $("#next").click(); }); $("#prev").click(function(){ prev_next(this.id); }); function prev_next(id){ currentSrc = $("#showPic").find("img").attr("src"); var iNum = parseInt(currentSrc.substring(currentSrc.lastIndexOf("/")+1,currentSrc.lastIndexOf(".jpg"))); var iPrev_Next; if(id=="prev"){ iPrev_Next=iNum == 1?iPicNum:--iNum; } else if(id=="next"){ iPrev_Next= iNum == iPicNum?1:++iNum; } var iPrev_NextSrc="photo/" + iPrev_Next.toString() + ".jpg";; $("#showPic").find("img").attr("src",iPrev_NextSrc); bMargin = $("div:has(img[src$=/"+iPrev_Next.toString()+".jpg])").hasClass("ls"); $("#showPic").find("img").css("marginTop",bMargin?"70":"0"+"px"); }
body{ margin:0.8em; padding:0px; } div.thumb{ float:left; /* 向左浮动 */ height:160px; width:160px; /* 每幅图片块的大小 */ margin:6px; padding:0px; } div.thumb img{ border:1px solid #82c3ff; } div.ls{ background:url(framels.jpg) no-repeat center; /* 水平图片的背景 */ } div.pt{ background:url(framept.jpg) no-repeat center; /* 竖直图片的背景 */ } div.ls img{ /* 水平图片 */ margin:0px; height:90px; width:135px; } div.pt img{ /* 竖直图片 */ margin:0px; height:135px; width:90px; } div.ls a{ display:block; /* 定义为块元素 */ padding:34px 14px 36px 11px; /* 将超链接区域扩大到整个背景块 */ } div.pt a{ display:block; padding:11px 36px 14px 34px; /* 将超链接区域扩大到整个背景块 */ } div.ls a:hover{ /* 鼠标经过时修改背景图片 */ background:url(framels_hover.jpg) no-repeat center; } div.pt a:hover{ background:url(framept_hover.jpg) no-repeat center; } #showPhoto{ position:absolute; width:620px; height:570px; z-index:200; } #showPhoto img#close{ position:absolute; right:10px; top:10px; cursor:pointer; z-index:2; } #showPic{ width:454px; height:454px; /* 正方形的块 */ position:absolute; left:81px; top:40px; text-align:center; vertical-align:middle; } #bgblack{ width:620px; height:570px; position:absolute; left:0px; top:0px; background:#000000; z-index:-1; } #showPic img{ padding:1px; border:1px solid #FFFFFF; z-index:1; position:relative; } #navigator{ position:absolute; z-index:3; color:#FFFFFF; cursor:pointer; bottom:40px; left:225px; font-size:12px; font-family:Arial, Helvetica, sans-serif; } #navigator span{ padding:20px; }
<div id="showPhoto"> <!-- 显示大图 --> <img src="close.jpg" id="close"> <!-- 面板中的关闭按钮 --> <div id="showPic"><img></div> <div id="bgblack"></div> <!-- 用来显示透明的黑色背景 --> <div id="navigator"> <span id="prev"><< 上一幅</span><span id="next">下一幅 >></span> </div> </div>