网络相册

最新推荐文章于 2023-07-21 20:15:00 发布
最新推荐文章于 2023-07-21 20:15:00 发布
阅读量852 收藏 2
点赞数
分类专栏： HTML+JQuer
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bzd_111/article/details/50126671
版权

借了这本书也有一段时间了，总得留下什么吧，所以琢磨就写一遍，纪念一下，我看过的书
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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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
现在课比较少了，一般都会有空的
全部的代码在http://download.csdn.net/detail/bzd_111/9314913

bzd_111
关注
专栏目录
国内十大免费网络相册
武汉产品经理
03-23 1万+
免费网络相册指的是一些网站为用户免费提供的个人相片展示、存放的网络空间。国内做网络相册的站点非常多，门户网站基本都是标配。下面就介绍一些常见的免费网络相册服务网站，排名有分先后，供大家参考： 　　一、巴巴变　　http://www.bababian.com/　　自称中文领域最好的免费相册。无论在界面还是功能设计上都在高度模仿Flickr，巴巴变算得上是中国版Flickr，免费用户每个月可以使用2
网络相册系统
05-13
JSP网络相册系统，oracle数据库，SSH，用户系统，等等
推荐个网络相册：影墙网络相册（www.ephotowall.com）
爱.NET
09-25 691
影墙网络相册，www.ephotowall.com免费、支持批量上传、单次上传文件大小不超过2MB、可外链、无水印、高速、在线编辑，图片适用于网店（淘宝、拍拍、易趣、阿里巴巴）...
PHP 网络相册系统
10-06
本资源不能用于商业用途，只是计算机专业的一个作业，欢迎大家使用
网络相册(只能本地)
mysunnygirl的博客
03-09 269
网络相册登陆注册界面关于gui及图片的上传，下载，删除功能，还有一个界面设计关于图片的浏览 登陆注册界面 太久太久没有在c站作总结了，今天来这里补一篇开学老师给我们布置的小任务吧 这里我完成了登录和注册的功能，美中不足是我暂时只学到了IO流，没有办法用数据库来进行存储，这里面无论是关于 图片文件，亦或者照片存储与上传，皆用到的是gui和io流的知识，惭愧，不过后面我还会发表一篇五子棋，用Javafx 写的，也会设计网络编程的知识，用到一些算法 这里我用到了1一张图片作为背景，注意路径 package co
基于Java网络相册系统的设计与实现(含源文件)毕业设计.pdf
08-03
网络相册是电子相册的一种表现形式， 它是网站为用户提供的个人相 片展示及存放平台。一般的网络相册可以选择“公开”或“私人”的属性，如果 相册是设为公开属性，那么其他用户可以查看和分享。 因此，为一些中...
基于ASP.NET的网络相册管理系统_WEB管理系统_SQLServer数据库应用.rar
04-26
【标题】中的“基于ASP.NET的网络相册管理系统”是一个使用ASP.NET技术开发的在线照片存储和管理的应用程序。ASP.NET是由微软推出的Web应用程序框架，它允许开发者构建动态、数据驱动的网站和Web应用程序。这个系统...
java web网络相册管理系统
12-06
《Java Web网络相册管理系统详解》 在信息技术日益发达的今天，网络相册管理系统已经成为人们存储、管理和分享照片的重要工具。本文将详细探讨基于Java Web技术实现的网络相册管理系统，涵盖其核心技术、架构设计...
基于django开发的网络相册源码.zip
06-08
【标题】：基于Django开发的网络相册源码 这个项目是一个使用Python的Django框架构建的网络相册应用。Django是一个高级的、快速的、可扩展的Web开发框架，它提供了一系列强大的功能来帮助开发者快速创建安全且易于...
Mazepa:网络相册管理系统
05-09
网络相册管理系统（MySQL，PHP5）。 词汇表 照片是有效格式的文件：jpeg，png，gif，tiff，psd，bmp，nef，raw，raf，cr2，orf，dng。 照片通过网络界面上传，并自动放置在“导入”文件夹中。 创建了图像的副本：...
网络相册源码
03-11
本程序没有采用数据库，实现的功能有：新建，删除，修改相册，照片上传下载，大图浏览，照片修改，删除，分享等功能！程序中采用了css使界面更美观！对初学web开发的人有很高的参考意义！
网络相册系统源码
08-26
本系统采用Jsp+Servlet+JDBC的架构编写，表现层页面采用Jstl1.1和EL表达式语言进行数据的表现，部分简单功能功能采用了Ajax技术，开发周期5天（有点长），其中图片上传采用apache的FileUpload组件，并且进行了简易封装
一个好用的相册PHP代码
05-30
一个好用的相册PHP代码。支持翻页、浏览、缩略图等功能。
相册网站源码-php完整可做人员车辆照片管理
10-14
php完整相册源码，可学习，也可直接商用；解压到系统根目录比如d盘，进入package目录，双击init.bat安装；如果提示安装失败，请进入开始菜单，找到命令行工具，右击，选择以管理员身份运行，用dos命令进入执行init.bat ，如果提示端口被占用，请换一个端口
在线电子相册网站
05-07
在线电子相册，是基于asp.net的web网站，包含个人信息，个人相册管理等内容
基于Java的网络相册_java毕业设计_springboot框架的基于网络相册管理系统
weixin_36127082的博客
03-02 923
这是一个基于java的毕业设计项目,毕设课题为springboot框架的基于网络相册管理系统, 是一个采用b/s结构的javaweb项目, 开发工具eclipsei/eclipse, 项目框架jsp+springboot+mybatis, 基于网络相册管理系统采用mysql进行数据存储, 并基于mybatis进行了orm实体关系映射, 该基于网络相册管理系统系统通过模块化实现,支持多角色权限管理系...
能与远方家人分享生活瞬间的网络相册
10-31 846
作为一个打工人，我们所在的城市总与父母相隔甚远，而成家立业后，孩子又成所有人的羁绊，有的孩子在自己身边，引得远方父母思念挂牵，时时刻刻与父母视频通话很不现实，老人也没法和自己的老伙伴们分享喜悦。接下来，我们可以点击“网站”页面中，新创建网站条目右侧的“管理”按钮，从中找到“打开网页”按钮，进入piwigo网页的安装程序。在这个页面左侧点选“预留”按钮，在“预留”页面找到“保留二级子域名”，在这个栏位我们需要天机几项简单内容，作为保留空白数据隧道的信息，包括“地区”、“二级域名”和“描述”。
搭建一个能随时在外访问的在线网络相册
最新发布
远程穿透的博客
07-21 69
在这个栏位内，我们可以对打算保留的数据隧道进行设置。登录cpolar本地用户端后，我们打开“隧道管理”项下的“创建隧道”页面，在这个页面，我们需要对“隧道名称”、“协议”、“本地地址”、“域名类型”（及勾选后出现的“Sub Domain”栏位）和“地区”进行设置，具体设置可参考下图所示。完成这些设置后，就可以点击页面下方的“创建”按钮，将本地Everything网站与保留的空白数据隧道关联，并生成本地Everything网站的公共互联网地址，这个地址我们可以在“状态”项下的“在线隧道列表”中看到。
jsp网络相册管理系统源代码分享
"这是一个基于JSP的网络相册管理系统，主要面向软件学院和电子计算机学院的学生，旨在提供一个方便的照片管理和分享平台。该系统可能包含了用户登录、照片上传、查看和管理等功能。" 在给定的代码片段中，我们可以...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值