纯JS实现弹性导航条效果
174 浏览量
2020-12-09
01:30:04
上传
评论
收藏 23KB PDF 举报
纯纯JS实现弹性导航条效果实现弹性导航条效果
效果图：效果图：
代码如下：代码如下：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{margin:0; padding:0; list-style:none;}
ul{ overflow:hidden; background:#ccc; width:574px; margin:100px auto; position:relative;}
ul li{ float:left; width:80px; height:40px; text-align:center; line-height:40px; border:1px solid #000; position:relative; z-index:2;}
#block_box{ position:absolute; top:0; left:0; background:#399; z-index:1;}
</style>
<script>
var left = 0;
var iSpeed = 0;
function move(obj,iTarget){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
iSpeed+=(iTarget-left)/5;
iSpeed*=0.75;
left+=iSpeed;
obj.style.left = left+'px';
if(Math.round(iSpeed)==0&&Math.round(left)==iTarget){
clearInterval(obj.timer);
}
},30);
}
window.onload = function(){
var aLi = document.getElementsByTagName('li');
var oBlock = document.getElementById('block_box');
var iNow = 0;
for(var i=0;i<aLi.length-1;i++){
;(function(index){
aLi[i].onmouseover = function(){
//oBlock.style.left = index*aLi[0].offsetWidth+'px';
move(oBlock,index*aLi[0].offsetWidth);
};
aLi[i].onmouseout = function(){
//oBlock.style.left = 0;
move(oBlock,iNow*aLi[0].offsetWidth);
};
aLi[i].onclick = function(){
iNow=index;
};
})(i);
}
};
</script>
</head>
<body>
<ul>
<li>首页</li>
<li>CSS课程</li>
<li>JS课程</li>
<li>HTML5课程</li>
<li>视频教程</li>
<li>课程案例</li>
<li>联系方式</li>
<li id="block_box"></li>
</ul>
</body>
</html>
资源评论
weixin_38625599
- 粉丝: 8
- 资源: 867
最新资源
- 基于74LS161+ 74LS192芯片实现倒计时定时器Multisim仿真源文件，Multisim10以上版本可打开运行
- 科大讯飞语音引擎 jar包 demo,科大讯飞语音合成引擎3.0，支持4.0系统以上，文字转语音输出.zip
- Java架构面试笔试专题资料及经验（含答案）SpringBoot面试Linux面试专题及答案 合集.zip
- 头歌c语言实验答案tion-model-for-ne开发笔记
- docker配置使用-model-for-networK开发demo
- docker配置使用vaWeb-mas笔记
- c语言连接两个字符串-mas开发笔记
- 俄罗斯引擎yandex进入x-master 笔记
- 头歌c语言实验答案el-for-network-ids-ma笔记
- 一个delphi写的连连看
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
