前言
上篇文章：前端学习(四)-轮播图案例
本篇参考百度新闻的新闻条，是用jQuery自己实现一个新闻条的案例。通过这两个例子，实现jQuery的入门。
新闻条
需求分析
- 新闻条独占一行，标签水平均匀分布
- 有一红色小框，一开始在最左边，鼠标进入新闻条，跟随鼠标移动，当鼠标离开标签时，回到默认位置。
实现
功能十分简单，但也使用到了之前没有使用过的函数，具体实现如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/*去除默认样式*/
*{
margin: 0;
padding: 0;
}
/*新闻条，父亲使用相对定位*/
.banner{
position: relative;
background-color: blue;
width: 100%;
height: 50px;
}
/*红框标签，儿子使用决定定位*/
.cur{
position: absolute;
background-color: red;
width: 52px;
height: 50px;
left: 0;
}
ul{
position: absolute;
list-style: none;
}
ul li{
float: left;
color: white;
line-height: 30px;
padding: 10px;
cursor: pointer;
}
</style>
<!-- <script src="jquery/jquery.min.js"></script>-->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
<div class="banner">
<div class="cur"></div>
<ul>
<li>首页</li>
<li>国内</li>
<li>国际</li>
<li>军事</li>
<li>财经</li>
<li>娱乐</li>
<li>体育</li>
<li>互联网</li>
<li>科技</li>
<li>游戏</li>
<li>女人</li>
<li>汽车</li>
<li>房产</li>
</ul>
</div>
</body>
</html>
<script>
//为ul li增加鼠标进入事件
$("ul li").mouseenter(function () {
var leftOffset = 0;
//preAll()当前标签前面的所有标签
//each()遍历标签
$(this).prevAll().each(function () {
leftOffset += $(this).innerWidth();
});
//红框移动
//因为各个标签width可能不同，所以需要动态调整红框大小，将红框的width设置为当前标签的内宽
$(".cur").stop(true).animate({
"left": leftOffset,
"width": $(this).innerWidth()
},500);
});
//为ul li增加鼠标移出事件
$("ul li").mouseleave(function () {
$(".cur").stop(true).animate({
"left": 0,
"width": $("ul li").first().innerWidth()
},500);
});
</script>
开发流程
html框架开发
新闻条的组件非常简单，一个可移动的红框，和一个可选择的list列表。
<body>
<div class="banner">
<div class="cur"></div>
<ul>
<li>首页</li>
<li>国内</li>
<li>国际</li>
<li>军事</li>
<li>财经</li>
<li>娱乐</li>
<li>体育</li>
<li>互联网</li>
<li>科技</li>
<li>游戏</li>
<li>女人</li>
<li>汽车</li>
<li>房产</li>
</ul>
</div>
</body>
样式开发
框架编写后，在页面运行可以看到一个毫无样式的文档流网页，这时候我们要对整个body的样式进行编写， 生成一个能看的静态页面。因为组件不多，这里直接使用内部样式,在style标签中编写如下内容。
/*去除默认样式*/
*{
margin: 0;
padding: 0;
}
/*新闻条，父亲使用相对定位*/
.banner{
position: relative;
background-color: blue;
width: 100%;
height: 50px;
}
/*红框标签，儿子使用决定定位*/
.cur{
position: absolute;
background-color: red;
width: 52px;
height: 50px;
left: 0;
}
ul{
position: absolute;
list-style: none;
}
ul li{
float: left;
color: white;
line-height: 30px;
padding: 10px;
cursor: pointer;
}
动态页面生成
要求很简单，让红框随着鼠标移动到对应的li标签即可，鼠标移出新闻条后返回。注意使用jQuery别忘记引包。
//为ul li增加鼠标进入事件
$("ul li").mouseenter(function () {
var leftOffset = 0;
//preAll()当前标签前面的所有标签
//each()遍历标签
$(this).prevAll().each(function () {
leftOffset += $(this).innerWidth();
});
//红框移动
//因为各个标签width可能不同，所以需要动态调整红框大小，将红框的width设置为当前标签的内宽
$(".cur").stop(true).animate({
"left": leftOffset,
"width": $(this).innerWidth()
},500);
});
//为ul li增加鼠标移出事件
$("ul li").mouseleave(function () {
$(".cur").stop(true).animate({
"left": 0,
"width": $("ul li").first().innerWidth()
},500);
});
总结
大概花了半个小时写了一遍案例，有时候真的是眼高手低，大脑：我会了，手：你不会！虽然只是很简单的案例，但还是用到了标签的事件，以及jQuery一些实用的方法，比如prevAll()、each()、innerWidth()。至此前端三层的入门已经完成了，我也就学过的内容整理成思维导图，加入自己的知识网络当中。
