弹性导航菜单和碰撞运动

二的九次方

于 2018-09-20 17:27:57 发布

阅读量216

点赞数

分类专栏： Javascript

本文链接：https://blog.csdn.net/Virgo_Yao/article/details/82790920

版权

Javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

弹性导航菜单


<!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>

二的九次方

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
弹性导航菜单和碰撞运动

弹性导航菜单&lt;!DOCTYPE html&gt;&lt;html lang="zh"&gt;&lt;head&gt; &lt;meta charset="UTF-8" /&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&a
复制链接

扫一扫

专栏目录