筋斗云动画效果
利用动画函数做动画效果原先筋斗云起始位置为0鼠标经过某个li 把当前 li 的 offsetLeft 位置作为目标值即可鼠标离开某个li ，就把目标值设为0如果点击了某个li ,就把 li 当前的位置存储起来，作为筋斗云的起始位置
<style
>
* {
padding
: 0;
margin
: 0;
}
li
,
a
{
text
-decoration
: none
;
}
.c
-nav
{
position
: relative
;
width
: 1200px
;
height
: 60px
;
background
: paleturquoise
;
margin
: 10px
auto;
text
-align
: center
;
}
ul
{
display
: flex
;
list
-style
: none
;
padding
: 0 20px
;
}
.c
-nav li
{
width
: 120px
;
font
-size
: 16px
;
font
-weight
: 700;
text
-align
: center
;
line
-height
: 60px
;
}
.c
-nav
.first
{
padding
-left
: 80px
;
}
span
{
position
: absolute
;
left
: 0;
top
: 5px
;
width
: 120px
;
height
: 60px
;
background
: url(images
/cloud
.jpg
) no
-repeat
;
}
</style
>
<script src
="animate.js"></script
>
<script
>
window
.addEventListener("load", function
() {
var cloud
= document
.querySelector(".cloud");
var c_nav
= document
.querySelector(".c-nav");
var lis
= c_nav
.querySelectorAll("li");
var current
= 0;
for (var i
= 0; i
< lis
.length
; i
++) {
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
>
</head
>
<body
>
<div id
="c-nav" class
="c-nav">
<span class
="cloud"></span
>
<ul
>
<li class
="first"><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
>
