收藏
批改状态：合格
老师批语：
一、主要实现功能：
1、页面最顶端有个隐藏的搜索块，移动过去就显示出全部，在点击输入框时获得焦点，当鼠标移时搜索快隐藏
2、移动到第一条导航条，对应的内容背景色改变，字体颜色改变
3、移动到第二条导航条，底部的线跟着鼠标移动
4、移动到第三条导航条的最后一个“其他”功能，会弹出下拉框，箭头指示也相应的改变
二、注意事项：
由于需要用到某些图标，所以需要在head里面引入相应的文档
<link rel="stylesheet" type="text/css" href="layui/css/layui.css">
三、功能代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导航条功能的实现</title>
<link rel="stylesheet" type="text/css" href="layui/css/layui.css">
<script src="../jquery-3.3.1.js"></script>
<style>
*{margin:0;padding: 0;}
.box{
width: 100%;
height:70px;
background: #f5f5f5;
box-shadow: 1px 1px 10px #ccc;
line-height: 70px;
position: relative;
top: -65px;
}
form{
width: 800px;
margin: 0 auto;
position: relative;
}
input{
width: 800px;
height: 35px;
border: none;
border-radius: 5px;
padding-left: 15px;
}
i{
width: 28px;
position: absolute;
top: 0;
right: 10px;
order:
}
i:hover{
cursor: pointer;
}
span{
display: block;
width: 48px;
height: 48px;
background: url(static/show.jpg) -65px 168px;
position: absolute;
right: 0;
}
.menu{
width: 1000px;
height: 40px;
background:#f5f5f5;
margin: 20px auto;
line-height: 40px;
}
.menu li{
float: left;
width: 10%;
font-weight: bold;
text-align: center;
}
.one li:hover a{color: #fff;}
.three li{position: relative;}
.three li i{
font-size: 12px;
margin-left: 8px;
}
.three li ul{
width: 100px;
box-shadow: 0 2px 5px #f5f5f5;
position: absolute;
}
.three li ul li{
width: 100px;
line-height: 40px;
margin-bottom: 8px;
}
.three li ul li:hover{background:#f5f5f5;}
</style>
</head>
<body>
<div class="box">
<form>
<input type="text" placeholder="# 请输入关键字 #"></input>
<!-- 相对定位是在其父级元素上做的 -->
<i class="layui-icon layui-icon-search"></i>
</form>
<!-- 下滑标志 -->
<span></span>
</div>
<div>
<ul class="menu one">
<li><a href="">要闻</a></li>
<li><a href="">国际</a></li>
<li><a href="">国内</a></li>
<li><a href="">社会</a></li>
<li><a href="">军事</a></li>
<li><a href="">娱乐</a></li>
<li><a href="">体育</a></li>
<li><a href="">汽车</a></li>
<li><a href="">科技</a></li>
<li><a href="">其他</a></li>
</ul>
<ul class="menu two" style="position: relative;">
<li name="0"><a href="">要闻</a></li>
<li name="1"><a href="">国际</a></li>
<li name="2"><a href="">国内</a></li>
<li name="3"><a href="">社会</a></li>
<li name="4"><a href="">军事</a></li>
<li name="5"><a href="">娱乐</a></li>
<li name="6"><a href="">体育</a></li>
<li name="7"><a href="">汽车</a></li>
<li name="8"><a href="">科技</a></li>
<li name="9"><a href="">其他</a></li>
<div class="ba"style="position: absolute;width:100px;height: 2px;background:#ff6500;bottom: 0;"></div>
</ul>
<ul class="menu three">
<li><a href="">要闻</a></li>
<li><a href="">国际</a></li>
<li><a href="">国内</a></li>
<li><a href="">社会</a></li>
<li><a href="">军事</a></li>
<li><a href="">娱乐</a></li>
<li><a href="">体育</a></li>
<li><a href="">汽车</a></li>
<li><a href="">科技</a></li>
<li><a href="">其他</a><i class="layui-icon layui-icon-up"></i>
<ul>
<li>金融</li>
<li>趣事</li>
<li>天气</li>
<li>房价</li>
</ul>
</li>
</ul>
</div>
<script>
$(function(){
//输入框获取焦点触发的效果
$('input').focus(function(){
$(this).css('box-shadow','0 0 5px #ff6500 inset')
})
//输入框失去焦点触发的效果
$('input').blur(function(){
$(this).css('box-shadow','')
})
//导航条滑动效果
$('.box').hover(function(){
//当鼠标移上时触发的效果
$(this).stop().animate({top:'0px'},500)
},function(){
//当鼠标移出时触发的效果
$(this).stop().animate({top:'-65px'},500)
})
//第一个导航条
$('.one>li').hover(function(){
$(this).css('background','#ff6500')
},function(){
$(this).css('background','#f5f5f5')
})
//第二个导航条
$('.two>li').hover(function(){
//滑条滑动的距离
var x = parseInt($(this).attr('name'))*100
$('.ba').stop().animate({left:x+'px'},300)
},function(){
$('.ba').stop().animate({left:0},300)
})
//第三个导航条
//隐藏里面的内容
$('.three ul').hide()
$('.three li').hover(function(){
$(this).find('i').attr('class',"layui-icon layui-icon-down")
$(this).find('ul').slideDown(300)
},function(){
$(this).find('i').attr('class',"layui-icon layui-icon-up")
$(this).find('ul').slideUp(300)
})
})
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
四、总结：
运用好jQuery的动画效果，能让页面更吸引眼球。
stop()功能一般和animate()功能一起作用，不然animate()会进行到读秒完成才停止，拉不住，这种效果并不好。
找到相应元素的位置很重要，在相应的位置添加对应的功能。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
