文章目录
- 前言
- 一、页面效果
- 二、实现方式
- 具体代码
- 总结
前言
感觉之前的浏览器主页乱七八糟,我个人比较喜欢简约卡通的。所以做了这个权游主题的简约版。整体代码也不难。最后是把写好的html文件地址作为浏览器首页地址,采用访问本地文件的方式更换主页。(有点小打小闹的感觉,有其他实现方式的大佬麻烦评论区留个言,嘻嘻嘻)
一、页面效果
刚打开的页面:点击屏幕中间的阿多展开搜索框
再次点击可以回到最初的状态
二、实现方式
采用最简单的HTML+CSS+原生的JavaScript
具体代码
HTML文件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浏览器主页</title>
<link rel="stylesheet" href="../css/search.css">
</head>
<body>
<div id="main">
<!--阿多-->
<div id="duo" style="top: 200px;" class="logo1">
</div>
<!--搜索框-->
<div id="searchBack" class="" style="-moz-transform: rotateX(90deg);">
<input type="text" id="searchInput">
</div>
</div>
</body>
<script src="../js/search.js"></script>
</html>
CSS文件:
*{
margin: 0;
padding: 0;
}
html,body{
width: 100%;
height: 100%;
}
#main{
position: relative;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: url("../image/background.webp");
}
#duo{
width: 400px;
height: 200px;
position: absolute;
left: 560px;
}
.logo1{
background: url("../image/logoup.png") no-repeat;
}
.logo2{
left: 540px !important;
background: url("../image/logodown.png") no-repeat;
}
#searchBack{
width: 600px;
height: 50px;
background-color: #50b4bf;
position: absolute;
left: 460px;
top: 260px;
border-radius: 15px;
box-shadow: 5px 5px 5px 1px #489da7;
}
#searchInput{
width: 566px;
height: 36px;
margin: 5px 15px;
font-size: 25px;
}
.revolveSearchOpen{
animation-name: revolveOpen;
animation-duration: 2s;
animation-fill-mode: forwards;
}
@keyframes revolveOpen {
0%{-moz-transform: rotateX(90deg);}
100%{-moz-transform: rotateX(0deg);}
}
.revolveSearchClose {
animation-name: revolveClose;
animation-duration: 2s;
animation-fill-mode: forwards;
}
@keyframes revolveClose {
0%{-moz-transform: rotateX(0deg);}
100%{-moz-transform: rotateX(90deg);}
}
JavaScript文件:
let duo = document.getElementById("duo");
let searchBack = document.getElementById("searchBack");
let timer = null;
let flag = true;
let flag2 = true;
duo.onclick = function () {
moveDuo();
revolve();
}
//阿多上下移动
function moveDuo() {
//每次移动距离为4个px
const each = 4;
//top是移动了的距离
let top = 0;
clearInterval(timer);
//这里用到了setInterval()方法
timer = setInterval(function () {
//打开状态
if(flag){
if(top >= 150){
top = 0;
flag = false;
duo.classList.remove("logo1");
duo.classList.add("logo2");
clearInterval(timer);
} else {
top = top + each;
duo.style.top = parseInt(duo.style.top.substr(0,duo.style.top.length-2)) - each + "px";
}
}
//关闭状态
else {
if(top >= 150){
top = 0;
flag = true;
duo.classList.remove("logo2");
duo.classList.add("logo1");
clearInterval(timer);
} else {
top = top + each;
duo.style.top = parseInt(duo.style.top.substr(0,duo.style.top.length-2)) + each + "px";
}
}
},30);
}
//搜索框旋转展开和闭合
function revolve() {
if (flag2 == true){
searchBack.style.display = "block";
searchBack.classList.remove("revolveSearchClose");
searchBack.classList.add("revolveSearchOpen");
console.log(searchBack.classList);
searchBack.style.transform = "rotateX(0deg)";
flag2 = false;
} else if(flag2 == false) {
searchBack.classList.remove("revolveSearchOpen");
searchBack.classList.add("revolveSearchClose");
setTimeout(function () {
searchBack.style.transform = "rotateX(90deg)";
},2000);
console.log(searchBack.classList);
flag2 = true;
}
}
//编辑回车事件
document.onkeydown = function (event) {
let e = event || window.event;
if (e && e.keyCode == 13){
//插入搜索事件
startSearch();
}
}
function startSearch() {
//这里我用到是必应,然后使用字符串拼接的方式
let bingUrl = "https://cn.bing/search?pc=U528&q=";
let searchInput = document.getElementById("searchInput").value;
window.open(bingUrl + searchInput);
//按下回车键之后清除输入框的内容
document.getElementById("searchInput").value = "";
}
有些地方在代码里写上了注释,方便解读和理解。
总结
这篇文章适合刚刚接触的学生来练手,当然要是也想换个主页,不妨也去试一试。
我审美不咋地,做的不是很好看。欢迎大佬在评论区提意见。
更多推荐
HTML+CSS+JavaScript做一个简约的浏览器主页
发布评论