弹性导航菜单
<!DOCTYPE html>
<html lang="zh">
<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>
body{font-family:Microsoft YaHei;}
ul{margin:0;padding:0;}
li{list-style:none;}
a{text-decoration:none;}
.nav{width:;}
.nav{overflow:hidden;position:relative;width:810px;height:36px;margin:auto;}
.nav #mark{display:block;width:80px;height:34px;background:red;position:absolute;left:0;overflow:hidden;}
.nav #mark ul{width:810px;position:absolute;left:0;top:0;z-index:9999;color:#fff;}
.nav #mark ul li a{color:#fff;}
.nav li{float:left;width:80px;height:34px;line-height:34px;background:red;text-align:center;margin-right:10px;}
.nav li a{font-size:16px;color:#000;}
</style>
</head>
<body>
<ul class="nav">
<li id="mark">
<ul>
<li><a href="javascript:void(0);">栏目一</a></li>
<li><a href="javascript:void(0);">栏目二</a></li>
<li><a href="javascript:void(0);">栏目三</a></li>
<li><a href="javascript:void(0);">栏目四</a></li>
<li><a href="javascript:void(0);">栏目五</a></li>
<li><a href="javascript:void(0);">栏目六</a></li>
<li><a href="javascript:void(0);">栏目七</a></li>
<li><a href="javascript:void(0);">栏目八</a></li>
<li><a href="javascript:void(0);">栏目九</a></li>
</ul>
</li>
<li class="box"><a href="javascript:void(0);">栏目一</a></li>
<li class="box"><a href="javascript:void(0);">栏目二</a></li>
<li class="box"><a href="javascript:void(0);">栏目三</a></li>
<li class="box"><a href="javascript:void(0);">栏目四</a></li>
<li class="box"><a href="javascript:void(0);">栏目五</a></li>
<li class="box"><a href="javascript:void(0);">栏目六</a></li>
<li class="box"><a href="javascript:void(0);">栏目七</a></li>
<li class="box"><a href="javascript:void(0);">栏目八</a></li>
<li class="box"><a href="javascript:void(0);">栏目九</a></li>
</ul>
<script>
//弹性
//速度+=(目标点-当前值)/速度;//6,7,8
//速度*=摩擦系数; //0.75,0.85,0.95s
//缓冲
//var 速度=(目标点-当前值)/速度;
//速度取整;
var aLi=document.getElementsByClassName("box");
var oMark=document.getElementById("mark");
var childUl=oMark.getElementsByTagName("ul")[0];
var timer=null;
var timer2=null;
var iSpeed=0;
for(var i=0;i<aLi.length;i++){
aLi[i].onmouseover=function(){
clearTimeout(timer2);
starMove(this.offsetLeft);
}
aLi[i].onmouseout=function(){
timer2=setTimeout(function(){
starMove(0);
},100)
}
oMark.onmouseover=function(){
clearTimeout(timer2);
}
oMark.onmouseout=function(){
timer2=setTimeout(function(){
starMove(0);
},100)
}
}
function starMove(iTarget){
clearInterval(timer);
timer=setInterval(function(){
iSpeed+=(iTarget-oMark.offsetLeft)/6;
iSpeed*=0.75;
if(Math.abs(iSpeed)<=1 && Math.abs(iTarget-oMark.offsetLeft)<=1){
clearInterval(timer);
oMark.style.left=iTarget+"px";
childUl.style.left=-iTarget+"px";
iSpeed=0;
}else{
oMark.style.left=oMark.offsetLeft+iSpeed+"px";
childUl.style.left=-oMark.offsetLeft+"px";
}
},30)
}
</script>
</body>
</html>
碰撞运动
<!DOCTYPE html>
<html lang="zh">
<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>
body{font-family:Microsoft YaHei;}
ul{margin:0;padding:0;}
div{width:100px;height:100px;background:red;position:absolute;left:0;}
</style>
</head>
<body>
<div id="div"></div>
<script>
//碰撞运动:首先找到碰撞的临界点,在确定运动的方向,然后去改变对应的速度(速度取反)
var oDiv=document.getElementById("div");
var iSpeedX=10;
var iSpeedY=10;
starMove();
function starMove(){
setInterval(function(){
var l=oDiv.offsetLeft+iSpeedX;
var t=oDiv.offsetTop+iSpeedY;
if(l>document.documentElement.clientWidth-oDiv.offsetWidth){
l=document.documentElement.clientWidth-oDiv.offsetWidth;
iSpeedX*=-1;
}else if(l<0){
l=0;
iSpeedX*=-1;
}
if(t>document.documentElement.clientHeight-oDiv.offsetHeight){
t=document.documentElement.clientHeight-oDiv.offseHeight;
iSpeedY*=-1;
}else if(t<0){
t=0;
iSpeedY*=-1;
}
oDiv.style.left=l+"px";
oDiv.style.top=t+"px";
},30)
}
</script>
</body>
</html>