JavaScript实现百度搜索页面
HTML
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>百度一下,你就知道</title> <!--引入百度icon小图标--> <link rel="shortcut icon" href="https://www.baidu.com/favicon.ico" type="image/x-icon"/> <link rel="stylesheet" href="css/baidu.css"> </head> <body> <div class="bj"> <div class="logo_d"> <img src="img/logo.png" class="logo"> </div> <div class="bd_k"> <input type="text" id="input"> <i class="iconfont"></i> <button id="btn">百度一下</button> </div> <!--ul li--> <div class="ul_d"> <ul id="ul" style="display:none;"> <li class="li"></li> <li class="li"></li> <li class="li"></li> </ul> </div> </div> <!--鼠标跟随--> <div id="to_top"></div> <script type="text/javascript" src="js/baidu.js"></script> </body> </html>
CSS
/*引在线icon小图标*/
@font-face {
font-family: 'iconfont'; /* project id 548708 */
src: url('http://at.alicdn.com/t/font_548708_l4m75bgmnyaatt9.eot');
src: url('http://at.alicdn.com/t/font_548708_l4m75bgmnyaatt9.eot?#iefix') format('embedded-opentype'),
url('http://at.alicdn.com/t/font_548708_l4m75bgmnyaatt9.woff') format('woff'),
url('http://at.alicdn.com/t/font_548708_l4m75bgmnyaatt9.ttf') format('truetype'),
url('http://at.alicdn.com/t/font_548708_l4m75bgmnyaatt9.svg#iconfont') format('svg');
}
i{
font-family: 'iconfont';
/*去掉图标的默认样式(斜体)*/
font-style: normal;
}
.iconfont{
font-family: 'iconfont';
font-size: 23px;
color: gray;
position:absolute;
top:184px;
right:493px;
}
.iconfont:hover{
color: deepskyblue;
cursor:pointer;
}
*{
margin:0;
padding:0;
}
body,html{
100%;
overflow:hidden;
}
/*鼠标跟随*/
#to_top{
position:absolute;
cursor:pointer;
35px;
height: 30px;
background-image: url(../img/猫.png);
background-size:100% 100%;
}
/*背景*/
.bj{
100%;
height:768px;
/*background-color:red;*/
background-image: url(../img/1F613111001-4.jpg);
/*设置背景图片透明度*/
opacity:0.8;
background-size:100% 100%;
overflow:hidden;
}
/*内容*/
.logo_d{
260px;
height:125px;
/*background-color:red;*/
margin:0px auto;
margin-top:40px;
margin-bottom:10px;
}
.logo{
height:125px;
}
.bd_k{
650px;
height:42px;
/*background-color:yellow;*/
margin:0 auto;
}
#input{
521px;
height:38px;
outline:none;
font-size:16px;
text-indent:8px;
float:left;
}
#btn{
125px;
height:42px;
background-color:deepskyblue;
border:1px solid deepskyblue;
float:right;
font-size:18px;
color:white;
outline:none;
cursor:pointer;
}
#btn:hover{
background-color:dodgerblue;
border:1px solid dodgerblue;
}
.ul_d{
649px;
height:120px;
/*background-color:yellow;*/
margin:0 auto;
}
#ul{
list-style:none;
521px;
/*background-color:red;*/
border:1px solid #ededed;
margin-top:-2px;
}
#ul li{
line-height:32px;
text-indent:8px;
}
#ul li:hover{
background-color:rgba(30,144,255,0.6);
cursor:pointer;
}
JS
var btn=document.getElementById("btn");
var ipt=document.getElementById("input");
//获取每个li作为一个数组
var arr=document.getElementsByTagName("li");
//点击事件
btn.onclick=function(){
//获取ul的id,并且修改它的属性.(显示)
var ul=document.getElementById("ul");
ul.setAttribute("style","display:block;");
//给下拉input传值
for(var i=arr.length-1;i>=0;i--){
if(i==0){
arr[i].innerText=document.getElementById("input").value;
}else{
arr[i].innerText=arr[i-1].innerText;
}
}
}
//键盘弹起发生事件
//ipt.onkeyup=function(){
// //获取ul的id,并且修改它的属性.(显示)
// var ul=document.getElementById("ul");
// ul.setAttribute("style","display:block;");
// //给下拉input传值
// for(var i=arr.length-1;i>=0;i--){
// if(i==0){
// arr[i].innerText=document.getElementById("input").value;
// }else{
// arr[i].innerText=arr[i-1].innerText;
// }
// }
//}
//input获取焦点事件
ipt.onfocus=function(){
var ul=document.getElementById("ul");
ul.setAttribute("style","display:block;");
}
//input失去焦点事件
ipt.onblur=function(){
var ul=document.getElementById("ul");
ul.setAttribute("style","display:none;");
}
//鼠标li所选中的下拉值再赋值给input
for(var x of arr){
x.onmousedown=zhi;
}
function zhi(){
ipt.value=this.innerText;
}
//鼠标跟随
window.onload = function(){
var oTop = document.getElementById("to_top");
document.onmousemove = function(evt){
var oEvent = evt || window.event;
var scrollleft = document.documentElement.scrollLeft || document.body.scrollLeft;
var scrolltop = document.documentElement.scrollTop || document.body.scrollTop;
oTop.style.left = oEvent.clientX + scrollleft +10 +"px";
oTop.style.top = oEvent.clientY + scrolltop + 10 + "px";
}
}