首页 > 编程入门 文章详情

网络相册

编程入门 行业动态 更新时间:2024-10-27 16:33:24

<a href=https://www.elefans.com/category/jswz/34/972827.html style=网络相册"/>

网络相册

借了这本书也有一段时间了，总得留下什么吧，所以琢磨就写一遍，纪念一下，我看过的书
1. 网络相册的主要形式就是以缩略图的形式展现所有的图片，当单击某个缩略图时将弹出大图的浏览框，在大图的浏览状态下也可以进行逐一浏览，就是有两个按钮，，一个上一幅，一个下一副
2. 设计分析
首先就是把所有的图片放在一个单独的小div中
在Html结构如下

<div><a href="photo/04.jpg"><img src="photo/thumb/01.jpg"></a>
</div>
<div><a href="photo/04.jpg"><img src="photo/thumb/02.jpg"></a>
</div>
<div><a href="photo/04.jpg"><img src="photo/thumb/03.jpg"></a>
</div>
<div><a href="photo/04.jpg"><img src="photo/thumb/04.jpg"></a>
</div>

在jQuery结构中可以代码实现

<script language="javascript" src="jqury.min.js"><script>
<script type="text/javascript">
var num = 30
$(function()
{for(var i=1;i<=num;i++)$(document.body).append($("<div><a href="photo/thumb/"+i.toString()+".jpg"></a></div>"));$("div:has(a)").addClass("thumb");
}
</script>

设置一下div的风格

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;    /* 将超链接区域扩大到整个背景块 */
}

2.显示大图
单击一个小图之后会出项一个大图
首先将大图定位到页面的上方，相应的HTML如下：

<div id="showPhoto"><img src="close.jpg" id= "close"><div id ="showPic"><img></div><div id="bgblack"> </div></div>

添加对应的ＣＳＳ结构

#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 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);});

４显示下一张或者上一张

$("#prev").click(function(){//点击“上一幅”按钮currentSrc = $("#showPic").find("img").attr("src");//根据目前的地址，获取上一幅的地址var iNum = parseInt(currentSrc.substring(currentSrc.lastIndexOf("/")+1,currentSrc.lastIndexOf(".jpg")));var iPrev = (iNum == 1)?iPicNum:(iNum-1);var prevSrc = "photo/" + iPrev.toString() + ".jpg";$("#showPic").find("img").attr("src",prevSrc);bMargin = $("div:has(img[src$=/"+iPrev.toString()+".jpg])").hasClass("ls");//根据图片对应的缩略图属性（水平或者竖直），调整大图的位置if(bMargin)$("#showPic").find("img").css("marginTop","70px");else$("#showPic").find("img").css("marginTop","0px");});$("#next").click(function(){//点击“下一幅”按钮currentSrc = $("#showPic").find("img").attr("src");var iNum = parseInt(currentSrc.substring(currentSrc.lastIndexOf("/")+1,currentSrc.lastIndexOf(".jpg")));var iNext = (iNum == iPicNum)?1:iNum+1;var nextSrc = "photo/" + iNext.toString() + ".jpg";$("#showPic").find("img").attr("src",nextSrc);bMargin = $("div:has(img[src$=/"+iNext.toString()+".jpg])").hasClass("ls");if(bMargin)$("#showPic").find("img").css("marginTop","70px");else$("#showPic").find("img").css("marginTop","0px");});$("#showPic").find("img").click(function(){//点击大图，同样显示下一幅$("#next").click();});

５具体实现，还有一些没有详细说，可以看一下下面的代码
ｃｓｓ结构

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;
}

ＨＴＭＬ的结构

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ".dtd">
<html>
<head>
<title>网络相册</title>
<link href="16.css" rel="stylesheet" type="text/css" />
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
var iPicNum = 30;   //图片总数量
$(function(){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");}$("#showPhoto").hide();    //初始化时不显示大图$("#bgblack").css("opacity",0.9);  //显示大图的方块背景设置为透明$("#close").click(function(){//点击按钮close，则关闭大图面板（采用动画）$("#showPhoto").add("#showPic").fadeOut(400);});$("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");});var currentSrc;var bMargin;$("#prev").click(function(){//点击“上一幅”按钮currentSrc = $("#showPic").find("img").attr("src");//根据目前的地址，获取上一幅的地址var iNum = parseInt(currentSrc.substring(currentSrc.lastIndexOf("/")+1,currentSrc.lastIndexOf(".jpg")));var iPrev = (iNum == 1)?iPicNum:(iNum-1);var prevSrc = "photo/" + iPrev.toString() + ".jpg";$("#showPic").find("img").attr("src",prevSrc);bMargin = $("div:has(img[src$=/"+iPrev.toString()+".jpg])").hasClass("ls");//根据图片对应的缩略图属性（水平或者竖直），调整大图的位置if(bMargin)$("#showPic").find("img").css("marginTop","70px");else$("#showPic").find("img").css("marginTop","0px");});$("#next").click(function(){//点击“下一幅”按钮currentSrc = $("#showPic").find("img").attr("src");var iNum = parseInt(currentSrc.substring(currentSrc.lastIndexOf("/")+1,currentSrc.lastIndexOf(".jpg")));var iNext = (iNum == iPicNum)?1:iNum+1;var nextSrc = "photo/" + iNext.toString() + ".jpg";$("#showPic").find("img").attr("src",nextSrc);bMargin = $("div:has(img[src$=/"+iNext.toString()+".jpg])").hasClass("ls");if(bMargin)$("#showPic").find("img").css("marginTop","70px");else$("#showPic").find("img").css("marginTop","0px");});$("#showPic").find("img").click(function(){//点击大图，同样显示下一幅$("#next").click();});
});
</script>
</head>
<body>
<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>
</body>
</html>

还有一点就是要在目录下建立一个photo和一个子文件夹thumb
如果有什么疑问，可以联系我，我的QQ是1240450484
现在课比较少了，一般都会有空的
全部的代码在

更多推荐

网络相册

本文发布于:2023-07-01 07:48:43，感谢您对本站的认可！
本文链接:https://www.elefans.com/category/jswz/34/972834.html
版权声明:本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文标签：网络相册

发布评论

评论列表 （有 0 条评论）

最近发表

草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍！

热门文章

标签列表