js 实现筋斗云效果
animate.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
padding: 0;
margin: 0;
}
div {
position: relative;
width: 900px;
height: 42px;
margin: 100px auto;
border-radius: 5px;
background: url("../屏幕截图(19).png") no-repeat center #fff;
}
ul {
list-style: none;
position: relative;
}
li {
float: left;
width: 100px;
height: 42px;
font-weight: 400;
line-height: 42px;
text-align: right;
cursor: pointer;
}
li a {
color: white;
text-decoration: none;
}
a:hover {
color: red;
}
span {
position: absolute;
width: 140px;
height: 42px;
left: 0;
background: url("../筋斗云.gif ") -10px -45px 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 dis=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, dis);
})
lis[i].addEventListener('click',function () {
dis=this.offsetLeft;
animate(cloud,this.offsetLeft);
})
}
})
</script>
</head>
<body>
<div id="c_nav" class="c_nav">
<span class="cloud"></span>
<ul>
<li class="current"><a href="javascript:;">首页新闻</a></li>
<li><a href="javascript:;">师资力量</a></li>
<li><a href="javascript:;">活动策划</a></li>
<li><a href="javascript:;">活动策划</a></li>
<li><a href="javascript:;">活动策划</a></li>
<li><a href="javascript:;">活动策划</a></li>
<li><a href="javascript:;">活动策划</a></li>
<li><a href="javascript:;">活动策划</a></li>
</ul>
</div>
</body>
</html>