与我的注册界面联动的个人简介界面(注册界面链接)前置知识(html+css+原生js)
该界面参考了这个开源项目的模板(毕竟我只是个学习前端的小蒟蒻,设计排版什么还是不太会了…)
展示图如下:emmm,(本人名字暴露了呢)
该demo有以下效果:
1.鼠标上下滑动是界面会展现出模糊与清晰直接的转换,左右移动背景图片和背景前的立绘会产生移动,且有位移差效果
2. 中间的头像选中会有旋转效果
3. 下面的按钮点击时有外发光效果,中间的文本框是以逐字逐句的效果出现的
4. 整体用flex布局具有响应式效果
ps:比模板多了一些奇奇怪怪的功能
ps:有问题可以评论区哦
1.首先惯例是index部分(有详细解释说明)
<!DOCTYPE html>
<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>YJY的自我介绍</title>
<!--这个部分是用来改变浏览器上方的小图标-->
<link rel="shortcut icon" href="img/touxiang.jpg">
<!--样式另外引入-->
<link rel="stylesheet" href="main.css">
<!--惯例使用严格模式的js编写-->
<script>"use strict"</script>
<style></style>
</head>
<body>
<!--bg部分是中间主体部分-->
<div class="bg">
<!--profileCard是中间介绍框部分-->
<div class="profileCard">
<!--logo部分是用来放头像的,当然你也可以自己放一个图片,我的素材会放在
文末的github里,供大家选用参考-->
<div class="logo1">
<img src="img/touxiang.jpg" alt="" class="touxiang">
</div>
<!--同理,下面的自己定义即可-->
<p class="name">YJY</p>
<div class="biaoyu">
<p>JS的世界无比巧妙</p>
</div>
<!--三个按钮部分,功能亦可以自定义-->
<div class="buttons">
<!--此处的aboutMe()是我自定义的一个函数,该按钮点一下biaoyu文字会改变-->
<button class="button1" onclick="aboutMe()" id="button1">关于我</button>
<!--博客还没有搭建好QAQ,服务器也没有钱租,因此先放个百度....-->
<button class="button1" onclick="window.open('https://www.baidu.com')">进入博客</button>
<button class="button1" onclick="window.open('https://www.baidu.com')">服务器状态</button>
</div>
</div>
<!--尾部部分-->
<footer class="footer">
<p class="footer2">
<!--该demo的github地址-->
Openned in <a target="_blank" href='https://www.github.com'>Github</a>
</p>
<!--模板及素材来源说明-->
<p class="footer2">© 2022 YJY <a target="_blank" href="https://card.niconi.co.ni">LL查看器</a> 模板:<a target="_blank" href="https://funny233.xyz/">高坂滑稽果</a>
</p>
</footer>
</div>
<!--立绘,位置后来在摆放,下面的素材都在文末的github里-->
<img src="img/4.texb" class="lihui" id="lihui" alt="">
<div class="background" id="background"></div>
<div class="yinghua" id="yinghua"></div>
<div class="background2" id="background2"></div>
<script src="main.js"></script>
<script>
//加载一些js函数,可以去下文的js代码中观看
//window.onload的作用是页面加载时加载js文件
window.onload=load2D_bg(document.querySelector('.background'),0.8,0.75);
window.onload=load2D_bg(document.querySelector('.background2'),0.8,0.75);
window.onload=load2D_bg(document.querySelector('.yinghua'),1.5,1);
window.onload=load2D_bg_muhu();
window.onload=load2D_lihui();
</script>
<noscript>sorry,你的浏览器不支持javascipt语言</noscript>
</body>
</html>
2.接下来是css部分(有点小多,可能要耐心观看)
/*子绝父相,并且去除浮动,当然也可以在下文去掉啦,这个随意*/
html {
position: relative;
overflow: hidden !important;
}
/*去除内外边距,设置字体样式*/
body {
font-family: 'Quicksand',sans-serif;
padding: 0;
margin: 0;
}
.bg {
position: absolute;
top: 0;left: 0;
width: 100%;
height: 100%;
/* 定义最小高度 */
z-index: 0;
min-height: 100vh;
/* 运用flex可以快速对齐盒子 */
display: flex;
justify-content: center;
align-items: center;
}
.background,
.background2,
.yinghua {
position: absolute;
top: 0;left: 0;
width: 100%;height: 100%;
min-height: 100vh;
}
/*background是清楚版的图片,background2是模糊版的图片,用来实现模糊与清晰转换
的效果,html结构中background2覆盖住了清楚版的,但是并不是代表background没有用处,
它是用来当模糊版的不透明度为0时展现的清晰版情形*/
.background {
z-index: -5;
background-image: url('img/qingxiban.png');
}
.background2 {
z-index: -4;
background-image: url('img/mouhuban.png');
}
.yinghua {
z-index: -1;
background-image: url('img/yinghua.png');
}
/* 下面为适应移动端代码,emmm一种响应式效果,web端可以跳过*/
@media screen and (max-width : 768px) {
.background {
background-size:cover;
}
.background2 {
background-size:cover;
}
}
@media screen and (max-width : 1000px) {
.background {
background-size:130%;
}
.background2 {
background-size:130%;
}
}
@media screen and (max-width : 2333333px) {
.background {
background-size:130%;
}
.background2 {
background-size:130%;
}
}
/* 适应移动端代码结束 */
.profileCard {
z-index: 0;
}
/* 头像部分 */
.logo1 {
margin: auto;
margin-top: -100px;
/* background-color: pink; */
width: 200px;
height: 200px;
}
.touxiang {
width: 180px;
height: 180px;
margin: 5px 5px;
border-radius: 50%;
border: 2px solid rgba(255,255,255,.8);
box-shadow: 0px 0px 12px rgba(255,255,255,.9);
/*这里的动画效果是用来旋转使用的*/
transition: all 1s;
}
/*用来实现头像的旋转效果,并展现一种发光阴影效果*/
.touxiang:hover {
/* 旋转360度 */
transform: rotate(360deg);
box-shadow: 0px 0px 50px rgba(255,255,255,1);
/* transition: all 1s; 此处模板使用但是我认为可以去掉*/
}
.name {
margin-top: 5px;
text-align: center;
font-size: 38px;
color:#7cabb1;
font-weight: 500;
text-shadow: 0px 0px 12px white;
/*emmm,给名字也来一中发光效果*/
transition: all .5s;
}
.name:hover {
text-shadow: 0px 0px 30px white;
}
.biaoyu {
margin: auto;
width: 600px;height: 50px;
background-color: rgba(255,255,255,.1);
border: 1px solid rgba(255,255,255,.8);
text-shadow: 0px 0px 12px #fff;
box-shadow: 0px 0px 12px #fff;
border-radius: 30px;
display: flex;
justify-content: center;
align-items: center;
transition: all .5s;
}
/*发光,同理*/
.biaoyu:hover {
background-color: rgba(255,255,255,.4);
box-shadow: 0px 0px 25px #fff;
}
.biaoyu p {
text-align: center;
color:#0e5c66;
font-size: 16px;
max-width: 500px;
}
.buttons {
margin-top: 15px;
margin-right: auto;
margin-left: auto;
width: 500px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
}
.button1 {
margin-left: 10px;
margin-right: 10px;
height: 50px;width: 200px;
border: 1px solid rgba(255,255,255,.4);
border-radius: 25px;
background-color: rgba(255,255,255,.1);
color: #e2ebf0;
font-size: 16px;
transition: all .5s;
}
.button1:hover {
background-color: rgba(255,255,255,.4);
color: #fff;
box-shadow: 0px 0px 12px #fff;
}
/*因为立绘比较大,所以就直接固定摆放了,感觉不移动更加美观*/
/*参数是在chorme浏览器环境下调试出来的.不同的浏览器可能参数不同.可以自己调试*/
.lihui {
position: fixed;
width: 700px;height: 700px;
left: -100px;
bottom: -33px;
background-size: cover;
z-index: -2;
}
.footer {
position: absolute;
/* left: 50%;
transform: translateX(-50%); */
margin: auto;
bottom: 0px;
color: rgba(255,255,255,.8);
font-size: 10px;
}
.footer2 {
text-align: center;
}
a {
color: rgba(255,255,255,.8);
}
3.无聊的css终于过去了,接下来是重头戏js部分
/*下面函数是用来禁止鼠标右键及复制操作,感觉禁止这些可以更加美观*/
/*event.ctrlKey=true|false|1|0,可以用来判断ctrl是否被按下,
keycode则是判断按下键的ascll码对应的CTRL+A/B/C 分别就是01/02/03.....
οncοntextmenu='return false'来取消鼠标右键
onselectstar使用js禁止用户选中网页上的内容*/
document.body.onselectstart =
document.body.oncontextmenu =
document.body.oncopy = function () {
return false;
};
document.onkeydown = function (e) {
var e = e || event;
if (e.ctrlKey == 1 && e.keyCode == 67) return false;
}
/*操作结束*/
/*obj为操作的对象,详细来说有背景1,背景2,樱花等三个*/
function load2D_bg(obj, xv, yv) {
// var background=document.querySelector('.background');
//下面的timeout是用来实现一种动画效果:
//requestAnimationFrame,来制定元素的动画效果,按帧来对页面进行重绘
//window.cancelAnimationFrame();即停止重绘
var timeout = void 0;
//定义刚开始背景的位置,如果一开始就是0,0的话那鼠标移动背景移动必然会导致
//确实背景的现象,并且背景图片是比浏览器大的,所以刚开始位置往右一点点
obj.style.backgroundPositionX = -50 + 'px';
obj.style.backgroundPositionY = -50 + 'px';
document.addEventListener('mousemove', function (e) {
//获取鼠标的位置
var x = e.x; y = e.y;
if (timeout) window.cancelAnimationFrame(timeout);
timeout = window, requestAnimationFrame(function () {
/*emmm,背景跟踪函数,参数都是随意定的,但是注意yinghua的两个数值都比
背景要大,这样移动起来有一种错位效果,参数建议自己调试*/
var xValue = (x / window.innerHeight * 20).toFixed(1);
var yValue = (y / window.innerWidth * 20).toFixed(1);
//注意这里的50必须是和刚开始定义的一样,这样刷新刚开始展现的效果更美观
obj.style.backgroundPositionX = xValue * xv - 50 + 'px';
//注意y轴的正负性
obj.style.backgroundPositionY = (-yValue * yv - 50) + 'px';
}, false)
})
}
//立绘移动函数,更上面大致一样,但是移动参数要错位一下
function load2D_lihui() {
var lihui = document.querySelector('.lihui');
var timeout = void 0;
document.addEventListener('mousemove', function (e) {
var x = e.x, y = e.y;
if (timeout) window.cancelAnimationFrame(timeout);
timeout = window.requestAnimationFrame(function () {
var xValue = (x / window.innerWidth * 30).toFixed(1);
lihui.style.left = xValue * 0.7 - 100 + 'px';
}, false);
})
}
//获取鼠标在浏览器整个页面的距离
function getMousePos(event) {
var e = event;
var scrollY = document.body.scrollTop;
var y = e.pageY;
return y;
}
//背景模糊函数
function load2D_bg_muhu() {
var background2 = document.querySelector('.background2');
document.onmousemove = function (e) {
//具体参数照样是可以自己定义的,注意opacity最大值为1
background2.style.opacity = 1 - (getMousePos(e) / window.outerHeight * 2.5);
}
}
//下面是进行文字逐字逐句打印的效果
var flag = 0; var timer = null; var count = 1;
// 此处运用一个function的返回来巧妙地使计时器不无效,因为直接在定时器里面的函数
//里面加入参数将会被当做立即执行//
//下面是定时器进行有参数函数的方法
/*定时器进行有参数的函数,用了闭包的原理 相当于我们把需要调用的含参函数体再重新用一个无参函数包裹起来返回。
方法一:function timer(num){
return function numAdd(){
num++;
console.log(num);
}
}
setInterval(timer(num),300);
方法二:用一个带return的函数包裹
function test(str){
alert(str);
}
var a = "abcde"
setTimeout(function(){
test(a);
},3000);*/
/*下面是打字函数,是展现了一种逐字逐句的效果*/
function Ftimer(biaoyu, wenzi) {
return function () {
var button=document.querySelector('#button1');
/*在逐字逐句效果展示的时候暂时阻止按钮反复点击,避免造成没完成就换wenzi的情况*/
button.disabled=true;
if (timer) {
clearTimeout(timer);
timer = null;
}
/*根据count来逐渐展示wenzi*/
biaoyu.innerHTML = wenzi.slice(0, count);
count++;
if (count > wenzi.length){
clearTimeout(timer);count=1;
button.disabled=false;
}
/*反复调用函数*/
else setTimeout(Ftimer(biaoyu, wenzi), 200);
}
}
function aboutMe() {
var biaoyu = document.querySelector('.biaoyu');
var biaoyu_p = document.querySelector('.biaoyu p');
/*flag用来判断当前展示的文字情况*/
if (flag === 0) {
flag = 1;
timer = setTimeout(Ftimer(biaoyu_p, '一个想要学html,css,javascript,php,jquery和vue等框架,Linux,c++,python等后端知识,mysql等数据库知识,并了解一些基础算法的蒟蒻'),200);
/*文字变多了,宽度自然增加*/
biaoyu.style.height = '100px';
}
else {
flag = 0;
biaoyu.style.height = '50px';
timer=setTimeout(Ftimer(biaoyu_p,'JS的世界无比巧妙'));
}
}
本次的demo就到这里结束了,素材和少量注释版的源码在下方的github里获取
my_github
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
