JavaScript案例：筋斗云

发布于

案例分析

  1. 利用动画函数做动画效果
  2. 原先筋斗云的起始位置是0
  3. 鼠标经过某个小li，把当前小li的offsetLeft位置做为目标值即可
  4. 鼠标离开某个小li，就把目标值设为0
  5. 如果点击了某个小li，就把li当前的位置存储起来，做为筋斗云的起始位置

代码实现

代码语言：javascript
复制
<!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>Document</title>

</head>

<style>

* {

margin: 0;

padding: 0

}


ul {
    list-style: none;
}

body {
    background-color: black;
}

.c-nav {
    width: 900px;
    height: 42px;
    background: #fff url(rss.png) no-repeat right center;
    margin: 100px auto;
    border-radius: 5px;
    position: relative;
}

.c-nav ul {
    position: absolute;
}

.c-nav li {
    float: left;
    width: 83px;
    text-align: center;
    line-height: 42px;
}

.c-nav li a {
    color: #333;
    text-decoration: none;
    display: inline-block;
    height: 42px;
}

.c-nav li a:hover {
    color: white;
}

.cloud {
    position: absolute;
    left: 0;
    top: 0;
    width: 83px;
    height: 42px;
    background: url(cloud.gif) no-repeat;
}



</style>

<script src="animate.js"></script>

<script>

window.addEventListener('load', function () {

//1.获取元素

var cloud = document.querySelector('.cloud');

var c_nav = document.querySelector('.c-nav');

var lis = c_nav.querySelectorAll('li');

//2.给所有的小li绑定事件

var current = 0;

//这个current做为筋斗云的起始位置

for (var i = 0; i < lis.length; i++) {

//鼠标经过把当前小li的位置作为目标值

lis[i].addEventListener('mouseenter', function () {

animate(cloud, this.offsetLeft);

})

//鼠标离开复原

lis[i].addEventListener('mouseleave', function () {

animate(cloud, current);

})

//当我们鼠标点击，就把当前的位置作为目标值

lis[i].addEventListener('click', function () {

current = this.offsetLeft;

})

}

})

</script>


<body>

<div id="c_nav" class="c-nav">

<span class="cloud"></span>

<ul>

<li class="current"> <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>

</div>

</body>


</html>

#存储#动画#函数