JS效果:导航类

导航效果好无聊

筋斗云

1
2
3
4
需求:鼠标放到哪个li上面,span就移动到那个上面。移开,回到原来的位置。点击的话,固定到点击的位置。
鼠标放到那个li,移动到上面。
鼠标移开,回到原来位置。
点击的话,固定到点击的位置。

html布局

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="box">
<span></span>
<ul>
<li>首页新闻</li>
<li>师资力量</li>
<li>活动策划</li>
<li>企业文化</li>
<li>招聘信息</li>
<li>公司简介</li>
<li>上海校区</li>
<li>广州校区</li>
</ul>
</div>

css样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: #333;
}
.box {
width: 800px;
height: 42px;
margin: 200px auto;
background: #fff url("images/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("images/cloud.gif") no-repeat;
}
</style>

JS实现代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<script>

window.onload = function () {
//需求:鼠标放到哪个li上面,span就移动到那个上面。移开,回到原来的位置。点击的话,固定到点击的位置。
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>

tab类好无聊,就不写了(๑ŐдŐ)b

文章目录
  1. 1. 筋斗云
    1. 1.1. html布局
    2. 1.2. css样式
    3. 1.3. JS实现代码
    4. 1.4.
|