项目制作——个人相册

本文档详细介绍了如何制作一个个人相册项目,包括创建登录和注册界面,以及实现3D旋转相册功能。在登录界面中,通过文本框和按钮设计实现了错误提示。注册页面利用正则表达式进行信息验证,并存储用户信息。最后,使用CSS和JavaScript实现了一个3D旋转相册效果。
摘要由CSDN通过智能技术生成

项目规划

制作一个登录界面,用于各个用户登录自己的相册

制作一个注册界面,用于多个用户注册账号

制作一个相册存放相片并实现3D旋转

第一步

首先设置登录界面的布局

<style>
        .div{
            width: 100%;
            height: 100%;
            position: absolute;
            background-image: url("综合项目图片素材/1623200097424.jpg");
        }
        .div1{
            width: 400px;
            height: 400px;
            color: darkgray;
            border-radius: 100%;
            background-color: white;
            position: absolute;
            top:50%;
            left:50%;
            margin-left: -200px;
            margin-top: -200px;
            opacity: 0.7;
            animation: zizhuan;
            animation-duration: 3s;
        }
        
        .div2{
            width: 250px;
            height: 250px;
            position: relative;
            top:50%;
            left:50%;
            margin-top: -125px;
            margin-left: -125px;
            text-align: center;
        }
</style>

其次,设计一下<input>的文本框和按钮的样式

<style>
 .in{
            text-align: center;
            border-top: 0px;
            border-left: 0px;
            border-right: 0px;   
        }
        .bu{
            width: 70px;
            height: 35px;
            border-radius: 50%;
            background-color:darkorange;
            
        }
</style>

<body>部分

<div class="div">
        <div class="div1">
            <div class="div2">
                <h4 align="center">立即登录</h4>
                邮箱<br>
                <input type="text" class="in" id="e-mails"><br>
                密码<br>
                <input type="password" class="in" id="passwords"><br><br>
                <a href="">忘记密码</a><br><br>
                <input type="submit" value="登录" class="bu" onclick="l()">
                <input type="submit" value="注册" class="bu" onclick="creat()">
            </div>
        </div>
    </div>

在div1的样式中,设置了一个动画效果,让div1在出场时有个三秒钟的自转,代码如下:

@keyframes zizhuan {
            0% {
                transform: rotate3d(0,1,0,0deg) ; 
                opacity: 0; 
                }
            100% {
                transform: rotate3d(0,1,0,360deg);
                opacity: 0.7;
            }
            
                }

布局部分到此结束,下面是JS部分,当输入的邮箱或者密码错误时,给出相应的提示

<script>
        function creat(){
            window.location.href="综合项目二.html"
            
            }
        function l(){
            var mail=document.getElementById("e-mails").value
            var password=document.getElementById("passwords").value
            var e=localStorage.getItem("e-mail")
            var p=localStorage.getItem("password")
            if(mail==e && password==p){
                 window.location.href="综合项目三.html"
               
            }
            else{
                alert("邮箱或密码错误,请重试!")
            }
        }
    </script>

实现效果如下

代码整合

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .div{
            width: 100%;
            height: 100%;
            position: absolute;
            background-image: url("综合项目图片素材/1623200097424.jpg");
        }
        .div1{
            width: 400px;
            height: 400px;
            color: darkgray;
            border-radius: 100%;
            b
1.无须数据库支持,直接处理服务器图片目录 <br>2.为大图片生成缩略图,并存放到专门的目录,提高相册预览图片的效率 <br>3.简化图片添加过程,直接上传图片到图片目录即可,相册自动获取、遍历新上传的图片,并生成缩略图 <br>4.增加多页跳转功能 <br>5.简单易用,直接插入控件到你的页面,并进行相关设置即可使用 <br><br><br>PhotoAlbum 控件说明: <br>1.该控件在页面加载的时候,会搜索当前网站指定目录所有jpg格式的文件,在使用时需要指定原图片存放地址和生成的缩略图存放地址,需要添加到web.config文件中: <br><br>try <br>{ <br>smallfoldername = Server.MapPath(ConfigurationManager.AppSettings["SmallPath"]); <br>bigfoldername = Server.MapPath(ConfigurationManager.AppSettings["NormalPath"]); <br>} <br>catch <br>{ <br>smallfoldername = Server.MapPath("./Photo/SmallPics/"); <br>bigfoldername = Server.MapPath("./Photo/NormalPics/"); <br>} <br><br>如果获取用户配置路径失败,控件默认采用./Photo/SmallPics/ 和./Photo/NormalPics/ 两个目录 <br>NormalPics为用户上传原图片的地址,SmallPics为控件生成并存放缩略图的地址。 <br><br>2.控件在页面加载的时候,遍历原图地址,并逐个生成缩略图,存放到缩略图地址目录。第一次运行,会牺牲效率,当缩略图生成完毕后,运行速度大幅提高。 <br><br>3.生成缩略图,采用ImageThumbnail类的MakeThumbnail方法实现,缩略图的大小和生成方式,可以自行设置。可以分别按高、宽生成,不过图片可能会产生变形,也可以用CUT裁剪方式。 <br><br>4.相册处理图片文件,并把图片文件展现给前端浏览器。相册可视化部分,采用DataList控件实现。 <br>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值