<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: #333;
}
.box {
width: 800px;
height: 42px;
margin: 200px auto;
background: #fff url("img/wifi.png") no-repeat right center;
border-radius: 12px;
position: relative;
}
ul {
list-style: none;
position: absolute;
top: 0;
left: 0
}
li {
float: left;
width: 83px;
height: 42px;
text-align: center;
line-height: 42px;
cursor: pointer;
}
span {
position: absolute;
left: 0;
top: 0;
width: 83px;
height: 42px;
background: url("img/cloud.gif") no-repeat;
}
</style>
<script>
window.onload = function () {
//需求:鼠标放到哪个li上面,span就移动到那个上面。移开,回到原来的位置。点击的话,固定到点击的位置。
//步骤:
//1.老三步。
//2.鼠标放到那个li,移动到上面。
//3.鼠标移开,回到原来位置。
//4.点击的话,固定到点击的位置。
//1.老三步。
var span = document.getElementsByTagName("span")[0];
var liArr = document.getElementsByTagName("li");
//计数器思想
var current = 0;
for(var i=0;i<liArr.length;i++){
//2.鼠标放到那个li,移动到上面。
liArr[i].onmouseover = function () {
animate(span,this.offsetLeft);
}
//3.鼠标移开,回到原来位置。
liArr[i].onmouseout = function () {
//鼠标移开,移动到之前记录好的位置。(初始值为0)
animate(span,current);
}
//4.点击的话,固定到点击的位置。
liArr[i].onclick = function () {
//点击li之后,把li距离ul左侧的距离记录给current.
current = this.offsetLeft;
animate(span,this.offsetLeft);
}
}
}
//缓动框架
function animate(obj,target){
//要用定时器,先清定时器(定时器最好绑定在要移动的盒子上)
clearInterval(obj.timer);
obj.timer = setInterval(function(){
//3.缓动公式
//获取步长
var step = (target-obj.offsetLeft)/10;
//处理步长,让他<0下取整,>0向上取整。这样,我们能够取到-1和1.
step = step>0?Math.ceil(step):Math.floor(step);
obj.style.left = obj.offsetLeft+step+"px";
//运动到指定位置
if(target==obj.offsetLeft){
clearInterval(obj.timer);
}
},14)
}
</script>
</head>
<body>
<div class="box">
<span></span>
<ul>
<li>首页新闻</li>
<li>师资力量</li>
<li>活动策划</li>
<li>企业文化</li>
<li>招聘信息</li>
<li>公司简介</li>
<li>xx校区</li>
<li>xx校区</li>
</ul>
</div>
</body>
</html>
“筋斗云”小案例
最新推荐文章于 2022-02-14 01:23:18 发布