JavaScript案例:筋斗云
2023-06-13 09:14:04 时间
案例分析
- 利用动画函数做动画效果
- 原先筋斗云的起始位置是0
- 鼠标经过某个小li,把当前小li的offsetLeft位置做为目标值即可
- 鼠标离开某个小li,就把目标值设为0
- 如果点击了某个小li,就把li当前的位置存储起来,做为筋斗云的起始位置
代码实现
<!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>
相关文章
- javascript 高级教程 视频_精通JavaScript
- JavaScript 数据类型
- JS算法题 JavaScript常见算法题 基础语法案例(持续更新)2022年3月30日
- JavaScript案例:简单计算(附计算器)
- JavaScript案例:密码框格式提示错误信息
- JavaScript案例:简单留言发布
- JavaScript案例:发送短信禁用按钮倒计时
- JavaScript案例:移动端轮播图
- JavaScript案例:带动画的返回顶部
- JavaScript获取距离某天前或后的日期详解编程语言
- JavaScript学习总结(十七)——Javascript原型链的原理详解编程语言
- MySQL数据库不支持存储JavaScript脚本(mysql不存js)
- PHP+javascript液晶时钟
- javascript入门·图片对象(无刷新变换图片)滚动图像
- javascript之更有效率的字符串替换
- JavaScript十六进制RGB色码转换器
- JavaScript高效运行代码分析
- 动态载入/删除/更新外部JavaScript/Css文件的代码
- JavaScript中通过闭包解决只能取得包含函数中任何变量最后一个值的问题
- JavaScript使用IEEE标准进行二进制浮点运算产生莫名错误的解决方法
- 浅谈JavaScript之事件绑定
- 利用noesis.Javascript开源组件.Net中执行javascript脚本
- JavaScript中的包装对象介绍