<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.nav{
width: 800px;
height: 58px;
border: 1px solid #ccc;
margin: 50px auto;
border-radius: 15px;
position: relative;
background-color: #ccc;
/* color: #fff; */
}
#navbar li{
list-style: none;
height: 50px;
width: 80px;
line-height: 50px;
color: #fff;
text-align: center;
float: left;
margin: 3px 10px;
font-weight: 400;
font-size: 18px;
/* border: 1px solid red; */
border-radius: 10px;
/* background-color: #888888; */
/* box-shadow: ; */
text-shadow: 5px #000;
}
#cloud{
width: 80px;
height: 50px;
border: 1px solid #fff;
border-radius: 10px;
/* background-image: url("cloud.gif") no-repeat; */
position: absolute;
top: 2px;
left: 8px;
/* background-color: rgba(182, 169, 169,0.5); */
/* background-image: url("cloud.gif") no-repeat; */
}
</style>
</head>
<body>
<div class="nav">
<span id="cloud"></span>
<ul id="navbar">
<li>北京校区</li>
<li>上海校区</li>
<li>广州校区</li>
<li>武汉校区</li>
<li>杭州校区</li>
<li>天津校区</li>
<li>联系我们</li>
<li>关于我们</li>
</ul>
</div>
<script src="../../function/function.js"></script>
<script>
function animate(element,target){
clearInterval(element.timeId);
element.timeId=setInterval(function(){
var current = element.offsetLeft;
var step = (target-current)/10;
step=step>0?Math.ceil(step):Math.floor(step);
current+=step;
element.style.left=current+"px";
if(current==target){
clearInterval(element.timeId);
}
},20);
}
function getStyle(element,attr){
if(window.getComputedStyle){
return window.getComputedStyle(element,null)[attr];
}else{
return element.currentStyle[attr];
}
//return window.getComputedStyle?window.getComputedStyle(element,attr).[attr]:element.currentStyle[attr];
}
function animate1(element,json,fn){
clearInterval(element.timeId);
element.timeId=setInterval(function(){
var flag=true;//默认，假设全部到达目标
for(var attr in json){
//判断是普通属性还是层级、透明度
if(attr=="opacity"){//判断是透明度
var current=getStyle(element,attr)*100;
var target=json[attr]*100;
//移动步数
var step=(target-current)/10;
step=step>0?Math.ceil(step):Math.floor(step);
current+=step;//移动后的值
element.style[attr]=current/100;
if(current!=target){
flag=false;}
}else if(attr=="z-index"){//判断是层级
element.style[attr]=json[attr];
}else if(attr=="font-weight"){
//获取元素当前的值
var current=parseInt(getStyle(element,attr));
var target=json[attr];
//移动步数
var step=(target-current)/10;
step=step>0?Math.ceil(step):Math.floor(step);
current+=step;//移动后的值
element.style[attr]=current;
if(current!=target){
flag=false;}
}else if(attr=="backgroundColor"){
//获取元素当前的值
var current=parseInt(getStyle(element,attr));
var target=json[attr];
//移动步数
var step=(target-current)/10;
step=step>0?Math.ceil(step):Math.floor(step);
current+=step;//移动后的值
element.style[attr]="#"+current;
if(current!=target){
flag=false;}
}else{//判断是普通属性
//获取元素当前的值
var current=parseInt(getStyle(element,attr));
var target=json[attr];
//移动步数
var step=(target-current)/10;
step=step>0?Math.ceil(step):Math.floor(step);
current+=step;//移动后的值
element.style[attr]=current+"px";
if(current!=target){
flag=false;}}
}
if(flag){
clearInterval(element.timeId);
//当所有到达目标后执行函数
if(fn){
fn();
}
}
},20);}
var cloud=my$("cloud");
var list=my$("navbar").children;
for(var i=0;i<list.length;i++){
list[i].onmousemove=mouseoverHand;
list[i].onclick=mouseclickHand;
list[i].onmouseout=mouseoutHand;
}
var json={"font-weight":900,"opacity":0.8,"font-size":20,"backgroundColor":393019};
var json1={"font-weight":400,"opacity":1,"font-size":18,"backgroundColor":888818};
function mouseoverHand(){
animate(cloud,this.offsetLeft);
animate1(this,json);
console.log("22222222");
}
var currentPosition=8;
function mouseclickHand(){
currentPosition=this.offsetLeft;
}
function mouseoutHand(){
animate(cloud,currentPosition);
animate1(this,json1);
}
</script>
</body>
</html>
本文暂时没有评论，来添加一个吧(●'◡'●)