弹性下拉菜单和弹性碰撞下拉菜单,其实基本的实现过程是一样的,不同的是,弹性下拉菜单是围绕着目标点上下弹跳直到停止,而弹性碰撞下拉菜单是在目标点上面做弹跳运动直到停止
因为弹性下拉菜单和弹性碰撞下拉菜单,HTML和CSS代码是相同的,所以我就先写HTML和css代码,js代码分开写
HTML代码
<div id="wrap">
<ul id="ul1">
<li class="nav"><a href="javascript:;">首页</a></li>
<li class="nav"><a href="javascript:;">课程</a>
<ul>
<li><a href="javascript:;">VIP课程</a></li>
<li><a href="javascript:;">实体课程</a></li>
<li><a href="javascript:;">远程课程</a></li>
</ul>
</li>
<li class="nav"><a href="javascript:;">社区讨论</a>
<ul>
<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>
</li>
<li class="nav"><a href="javascript:;">学员作品</a></li>
</ul>
</div>
CSS代码
<style>
*{margin:0; padding:0;}
li{list-style:none; color:#000;}
#wrap{width:800px; height:60px; background:#b44861;position:relative; margin:10px auto;}
#ul1{width:628px; position:absolute; left:86px; top:14px;}
#ul1 .nav{width:150px; float:left; height:30px; line-height:30px; margin-left:5px; background:#ff9900;border-radius:20% 20%; text-align:center; border:1px solid #0f202f; overflow:hidden;}
#ul1 .nav a{text-decoration:none; color:#000;}
#ul1 .nav a:hover{color:#fff;}
</style>
弹性下拉菜单的JS代码
<script>
var oUl = document.querySelector('#ul1');
var aLi = oUl.querySelectorAll('.nav');
var iTimer = null;
var iSpeed = 0;
var iHeight = parseInt(getStyle(aLi[0],'height'));
for(var i=0; i<aLi.length; i++){
aLi[i].onmouseover = function() {
var childLi = this.querySelectorAll('li');
var len = childLi.length;
startMove(this, (len + 1) * iHeight);
}
aLi[i].onmouseout = function(){
startMove(this,iHeight);
}
}
function startMove(obj,iTarget){
clearInterval(obj.iTimer);
obj.iSpeed = 0;
obj.iTimer = setInterval(function(){
obj.iSpeed += (iTarget - parseInt(getStyle(obj,'height')))/6;
obj.iSpeed *= 0.68;
if(Math.abs(obj.iSpeed)<1&&Math.abs(iTarget - parseInt(getStyle(obj,'height')))<1){
clearInterval(iTimer);
obj.iSpeed = 0;
obj.style.height = iTarget + 'px';
}else{
obj.style.height = parseInt(getStyle(obj,'height')) + obj.iSpeed + 'px';
}
},10);
}
function getStyle(obj,attr){
return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj,false)[attr];
}
</script>
弹性碰撞下拉菜单JS代码
<script>
var oUl = document.querySelector('#ul1');
var aLi = oUl.querySelectorAll('.nav');
var iTimer = null;
var iSpeed = 0;
var iHeight = parseInt(getStyle(aLi[0],'height'));
for(var i=0; i<aLi.length; i++){
aLi[i].onmouseover = function() {
var childLi = this.querySelectorAll('li');
var len = childLi.length;
startMove(this, (len + 1) * iHeight);
}
aLi[i].onmouseout = function(){
startMove(this,iHeight);
}
}
function startMove(obj,iTarget){
clearInterval(obj.iTimer);
obj.iSpeed = 0;
obj.iTimer = setInterval(function(){
obj.iSpeed +=3;
obj.style.height = parseInt(getStyle(obj,'height')) + obj.iSpeed + 'px';
if(parseInt(getStyle(obj,'height'))>iTarget){
obj.style.height = iTarget+'px';
obj.iSpeed *=-1;
obj.iSpeed *=0.65;
}
},30);
}
function getStyle(obj,attr){
return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj,false)[attr];
}
</script>