与我的注册界面联动的个人简介界面,前置知识(html+css+原生js)

与我的注册界面联动的个人简介界面(注册界面链接)前置知识(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>&nbsp; 模板:<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
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个简单的省市县三级HTML+JS代码示例: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>省市县三级</title> </head> <body> <select id="province"> <option value="">请选择省份</option> </select> <select id="city"> <option value="">请选择城市</option> </select> <select id="county"> <option value="">请选择县区</option> </select> <script> // 定义省市县数据 var data = { "北京市": { "市辖区": ["东城区", "西城区", "朝阳区", "丰台区", "石景山区", "海淀区", "门头沟区", "房山区", "通州区", "顺义区", "昌平区", "大兴区", "怀柔区", "平谷区"], "县": ["密云县", "延庆县"] }, "上海市": { "市辖区": ["黄浦区", "徐汇区", "长宁区", "静安区", "普陀区", "虹口区", "杨浦区", "闵行区", "宝山区", "嘉定区", "浦东新区", "金山区", "松江区", "青浦区", "奉贤区"], "县": [] }, "浙江省": { "杭州市": ["西湖区", "上城区", "下城区", "江干区", "拱墅区", "滨江区", "萧山区", "余杭区", "富阳区", "临安区"], "宁波市": ["海曙区", "江北区", "北仑区", "镇海区", "鄞州区", "奉化区"], "温州市": ["鹿城区", "龙湾区", "瓯海区", "洞头区", "瑞安市", "乐清市"], "嘉兴市": ["南湖区", "秀洲区", "海宁市", "平湖市", "桐乡市"], "湖州市": ["吴兴区", "南浔区", "长兴县", "安吉县"], "绍兴市": ["越城区", "柯桥区", "上虞区", "新昌县", "诸暨市"], "金华市": ["婺城区", "金东区", "浦江县", "武义县", "兰溪市", "义乌市", "东阳市"], "衢州市": ["柯城区", "衢江区", "常山县", "开化县", "龙游县", "江山市"], "舟山市": ["定海区", "普陀区", "岱山县", "嵊泗县"], "台州市": ["椒江区", "黄岩区", "路桥区", "三门县", "天台县", "仙居县", "温岭市", "临海市"], "丽水市": ["莲都区", "青田县", "缙云县", "遂昌县", "松阳县", "云和县", "庆元县", "景宁畲族自治县", "龙泉市"] } }; // 初始化省份下拉列表 var province = document.getElementById("province"); for (var key in data) { var option = document.createElement("option"); option.innerText = key; province.appendChild(option); } // 初始化城市下拉列表 var city = document.getElementById("city"); province.onchange = function() { var provinceName = province.value; city.innerHTML = "<option value=''>请选择城市</option>"; county.innerHTML = "<option value=''>请选择县区</option>"; if (provinceName) { var cityData = data[provinceName]; for (var key in cityData) { var option = document.createElement("option"); option.innerText = key; city.appendChild(option); } } }; // 初始化县区下拉列表 var county = document.getElementById("county"); city.onchange = function() { var provinceName = province.value; var cityName = city.value; county.innerHTML = "<option value=''>请选择县区</option>"; if (provinceName && cityName) { var countyData = data[provinceName][cityName]; for (var i = 0; i < countyData.length; i++) { var option = document.createElement("option"); option.innerText = countyData[i]; county.appendChild(option); } } }; </script> </body> </html> ``` 在这个例子中,我们使用一个JavaScript对象来存储省市县数据,然后使用`select`元素创建下拉列表,通过JavaScript代码实现三级的功能。用户选择省份时,会自加载该省份下的城市列表,选择城市时,会自加载该城市下的县区列表。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值