-
网站登录界面制作（three.js 3D特效背景）+ boostrap导航栏实现 + jQuery移动窗口【附加源代码】
网站登录界面制作（three.js 3D特效背景）+ boostrap导航栏实现
前言
学过Web前端的许多小伙伴都会面对门户网站制作的大作业报告，这里给大家分享一下我的前端大作业。后续还会继续更新，喜欢的小伙伴可以点个赞。
登录界面效果图
注意上述为动态界面：
DOCTYPE html> <html> <head> <title>登录界面title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js">script> <script type="module" src="/js/login.js">script> <style> body { margin: 0; overflow: hidden; } #particle-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } .container{ opacity: 0.8; filter: brightness(50); } style> head> <body> <div id="particle-container">div> <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <a class="navbar-brand" href="#">**大学网络空间安全专业a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon">span> button> <div class="collapse navbar-collapse" id="navbarNavDropdown"> <ul class="navbar-nav ml-auto"> <li class="nav-item"> <a class="nav-link" href="/html/base.html">首页a> li> <ul class="navbar-nav ml-auto"> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 信息发布 a> <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="/html/news publish/news.html">新闻模块a> <a class="dropdown-item" href="/html/news publish/jsshu.html">技术动态a> <a class="dropdown-item" href="/html/news publish/gonggao.html">公告信息a> <a class="dropdown-item" href="/html/news publish/tuandui.html">团队介绍a> div> li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 资源共享 a> <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="/html/ziyuan/ruanjian.html">软件资源a> <a class="dropdown-item" href="/html/ziyuan/shutuan.html">社团杂志a> div> li> <li class="nav-item"> <a class="nav-link" href="/html/luntan/luntan.html">论坛交流a> li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> CTF训练 a> <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="/html/CTF/shipin.html">训练视频a> <a class="dropdown-item" href="/html/CTF/saishi.html">主要赛事回顾a> <a class="dropdown-item" href="/html/CTF/jiaohu.html">交互式训练a> div> li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 安全比赛 a> <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="/html/bisai/geren.html">个人赛a> <a class="dropdown-item" href="/html/bisai/tuanduisai.html">团队赛a> div> li> ul> div> nav> <div class="container"> <h2 style="filter: brightness(30);">登录界面h2> <p>p> <form action="" class="was-validated" id="loginForm"> <div class="form-group"> <label for="uname">用户名:label> <input type="text" class="form-control" id="uname" placeholder="请输入用户名" name="uname" required> <div class="valid-feedback">验证成功！div> <div class="invalid-feedback">请输入用户名！div> div> <div class="form-group"> <label for="pwd">密码:label> <input type="password" class="form-control" id="pwd" placeholder="请输入密码" name="pswd" required> <div class="valid-feedback">验证成功！div> <div class="invalid-feedback">请输入密码！div> div> <div class="form-group form-check"> <label class="form-check-label"> <input class="form-check-input" type="checkbox" name="remember" required> 同意协议 <div class="valid-feedback">验证成功！div> <div class="invalid-feedback">同意协议才能提交。div> label> div> <button type="submit" class="btn btn-primary">提交button> form> div> <script type="module" src="/js/login.js">script> <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js">script> <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js">script> <script type="module" src="/js/baoza.js">script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
下面的是表单的JS源代码：
document.getElementById("loginForm").addEventListener("submit", function(event) { event.preventDefault(); var username = document.getElementById("uname").value; var password = document.getElementById("pwd").value; // 在这里添加登录验证的逻辑 if (username === "123456" && password === "123456") { alert("登录成功！"); window.location.href = "/html/base.html"; } else { alert("用户名或密码错误！"); } });- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
下面是3D动态例子的源代码：
// 创建场景 var scene = new THREE.Scene(); // 创建相机 var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.z = 5; // 创建渲染器 var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); var container = document.getElementById('particle-container'); renderer.setSize(container.offsetWidth, container.offsetHeight); container.appendChild(renderer.domElement); // 创建粒子系统 var particleCount = 1000; var particles = new THREE.Geometry(); var particleMaterial = new THREE.PointsMaterial({ color: 0x00ff00, size: 0.1 }); for (var i = 0; i < particleCount; i++) { var x = Math.random() * 10 - 5; var y = Math.random() * 10 - 5; var z = Math.random() * 10 - 5; var particle = new THREE.Vector3(x, y, z); particles.vertices.push(particle); } var particleSystem = new THREE.Points(particles, particleMaterial); scene.add(particleSystem); // 动画循环 function animate() { requestAnimationFrame(animate); particleSystem.rotation.y += 0.01; particleSystem.rotation.x += 0.01; particleSystem.rotation.z += 0.01; renderer.render(scene, camera); } animate();- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
主页面效果图：
注意中间的窗口是移动的；
主页面源代码
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>**大学网络空间安全专业title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.5.0/css/bootstrap.min.css"> <link rel="stylesheet" href="/css/base.css"> <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js">script> head> <body> <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <a class="navbar-brand" href="#">**大学网络空间安全专业a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon">span> button> <div class="collapse navbar-collapse" id="navbarNavDropdown"> <ul class="navbar-nav ml-auto"> <li class="nav-item"> <a class="nav-link" href="/html/base.html">首页a> li> <ul class="navbar-nav ml-auto"> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 信息发布 a> <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="/html/news publish/news.html">新闻模块a> <a class="dropdown-item" href="/html/news publish/jsshu.html">技术动态a> <a class="dropdown-item" href="/html/news publish/gonggao.html">公告信息a> <a class="dropdown-item" href="/html/news publish/tuandui.html">团队介绍a> div> li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 资源共享 a> <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="/html/ziyuan/ruanjian.html">软件资源a> <a class="dropdown-item" href="/html/ziyuan/shutuan.html">社团杂志a> div> li> <li class="nav-item"> <a class="nav-link" href="/html/luntan/luntan.html">论坛交流a> li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> CTF训练 a> <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="/html/CTF/shipin.html">训练视频a> <a class="dropdown-item" href="/html/CTF/saishi.html">主要赛事回顾a> <a class="dropdown-item" href="/html/CTF/jiaohu.html">交互式训练a> div> li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 安全比赛 a> <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="/html/bisai/geren.html">个人赛a> <a class="dropdown-item" href="/html/bisai/tuanduisai.html">团队赛a> div> li> ul> div> nav> <div class="container mt-5"> <div class="row"> <div class="col-lg-8"> <h1>**大学网络空间安全h1> <p>欢迎来到**大学网络空间安全网站。我们致力于提供最新的信息发布、资源共享、论坛交流、CTF训练和安全比赛特色功能。p> div> <div class="col-lg-4"> <img src="/image/logo.png" alt="南昌大学软件学院网络空间安全" class="img-fluid" width="100px" height="100px"> div> div> div> <div class="container ml-auto"> <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active">li> <li data-target="#carouselExampleIndicators" data-slide-to="1">li> <li data-target="#carouselExampleIndicators" data-slide-to="2">li> <li data-target="#carouselExampleIndicators" data-slide-to="3">li> <li data-target="#carouselExampleIndicators" data-slide-to="4">li> ol> <div class="carousel-inner"> <div class="carousel-item active"> <img src="/image/n1.png" class="d-block w-100 " alt="Image 1" style="width: 230px; height: 450px;"> <div class="carousel-caption"> <h3 class="text-white">信息发布h3> div> div> <div class="carousel-item"> <img src="/image/n2.png" class="d-block w-100 " alt="Image 2" style="width: 230px; height: 450px;"> <div class="carousel-caption"> <h3 class="text-white">资源共享h3> div> div> <div class="carousel-item"> <img src="/image/n3.png" class="d-block w-100 " alt="Image 3" style="width: 230px; height: 450px;"> <div class="carousel-caption"> <h3 class="text-white">论坛交流h3> div> div> <div class="carousel-item"> <img src="/image/4.png" class="d-block w-100 " alt="Image 4" style="width: 230px; height: 450px;"> <div class="carousel-caption"> <h3 class="text-white">CTF训练h3> div> div> <div class="carousel-item"> <img src="/image/n5.png" class="d-block w-100 " alt="Image 4" style="width: 230px; height: 450px;"> <div class="carousel-caption"> <h3 class="text-white">安全比赛h3> div> div> div> <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true">span> <span class="sr-only">Previousspan> a> <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true">span> <span class="sr-only">Nextspan> a> div> <div class="row"> <div class="col-lg-4"> <h2>信息发布h2> <p>在这里你可以获取最新的网络空间安全相关信息，包括安全漏洞、攻击事件、安全技术等。p> div> <div class="col-lg-4"> <h2>资源共享h2> <p>我们提供网络空间安全方面的学习资源，包括教学课件、学习笔记、实验代码等。p> div> <div class="col-lg-4"> <h2>论坛交流h2> <p>加入我们的论坛，与其他网络空间安全爱好者交流心得、解答问题、分享经验。p> div> div> div> <div class="container mt-5"> <div class="row"> <div class="col-lg-6"> <h2>CTF训练h2> <p>参加我们的CTF训练，提升你的网络空间安全技能，解决各种安全挑战。p> div> <div class="col-lg-6"> <h2>安全比赛h2> <p>参加我们举办的安全比赛，与其他选手一较高下，赢取丰厚奖品。p> div> div> div> <div id="adContainer" class="alert alert-info fixed-bottom m-2" role="alert"> 欢迎来到**大学软件网络空间安全网站。我们致力于提供最新的信息发布、资源共享、论坛交流、CTF训练和安全比赛特色功能。 <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×span> button> div> <footer class="bg-dark text-white text-center py-4"> <div class="container"> <h5>联系信息h5> <p>电话：1234567p> <p>邮箱：zzx.comp> div> footer> <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js">script> <script type="module" src="/js/base.js">script> <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js">script> <script src="https://cdn.staticfile.org/popper.js/1.16.0/umd/popper.min.js">script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.5.0/js/bootstrap.min.js">script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
- 148
- 149
- 150
- 151
- 152
- 153
- 154
- 155
- 156
- 157
- 158
- 159
- 160
- 161
- 162
- 163
- 164
- 165
- 166
- 167
- 168
- 169
- 170
- 171
- 172
- 173
- 174
- 175
- 176
- 177
- 178
- 179
- 180
- 181
- 182
- 183
- 184
- 185
- 186
- 187
- 188
- 189
- 190
- 191
- 192
- 193
- 194
- 195
- 196
.d-block w-100 { width: 200px; height: 200px; }- 1
- 2
- 3
- 4
- 5
下面是移动窗口的JS源代码
$(document).ready(function() { var adContainer = $('#adContainer'); var screenHeight = $(window).height(); var adHeight = adContainer.outerHeight(); var currentPosition = screenHeight; function moveAd() { currentPosition -= 1; adContainer.css('bottom', currentPosition + 'px'); if (currentPosition + adHeight <= 0) { currentPosition = screenHeight; } } setInterval(moveAd, 10); }); // 获取窗口元素 var windowElement = document.getElementById("window"); // 定义初始位置和速度 var initialX = 500; var initialY = 500; var speedX = 220; var speedY = 120; // 更新窗口位置的函数 function updateWindowPosition() { // 获取当前位置 var currentX = initialX; var currentY = initialY; // 计算新的位置 currentX += speedX; currentY += speedY; // 更新窗口位置 windowElement.style.left = currentX + "px"; windowElement.style.top = currentY + "px"; // 检查边界条件，如果窗口超出页面边界，则反转速度方向 if (currentX + windowElement.offsetWidth >= document.documentElement.clientWidth || currentX <= 0) { speedX = -speedX; } if (currentY + windowElement.offsetHeight >= document.documentElement.clientHeight || currentY <= 0) { speedY = -speedY; } } // 每隔一段时间更新窗口位置 setInterval(updateWindowPosition, 1000);- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
-
相关阅读:
小胶质细胞仅仅是神经系统内的“配角”？
Niantic利用Meta Llama让数字生物栩栩如生
一篇文章带你用动态规划解决打家劫舍问题
被锁总时间
【算法集训专题攻克篇】第二十二篇之有序集合（困难）
Java类实现某个接口后，是否需要实现接口中的所有方法？
springboot定时任务
Linux CentOS7 history命令
024. 解压报文[200 分]
3.Java线程的状态
- 原文地址：https://blog.csdn.net/2302_77698668/article/details/133043270
