纯JS实现弹性导航条效果


Posted in Javascript onMarch 06, 2017

效果图:

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

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
基于jQuery试卷自动排版系统
Jul 18 Javascript
jQuery EasyUI API 中文文档 - Calendar日历使用
Oct 19 Javascript
js禁止页面刷新禁止用F5键刷新禁止右键的示例代码
Sep 23 Javascript
javascript if条件判断方法小结
May 17 Javascript
js控制输入框获得和失去焦点时状态显示的方法
Jan 30 Javascript
js实现进度条的方法
Feb 13 Javascript
js利用clipboardData实现截屏粘贴功能
Oct 12 Javascript
详解JavaScript对象的深浅复制
Mar 30 Javascript
three.js加载obj模型的实例代码
Nov 10 Javascript
zTree 树插件实现全国五级地区点击后加载的示例
Feb 05 Javascript
vue+element的表格实现批量删除功能示例代码
Aug 17 Javascript
基于element-ui封装表单金额输入框的方法示例
Jan 06 Javascript
JS实现颜色动态淡化效果
Mar 06 #Javascript
vue模板语法-插值详解
Mar 06 #Javascript
js中的面向对象入门
Mar 06 #Javascript
jQuery插件FusionCharts实现的2D面积图效果示例【附demo源码下载】
Mar 06 #Javascript
Vue 2.x教程之基础API
Mar 06 #Javascript
jQuery实现获取h1-h6标题元素值的方法
Mar 06 #Javascript
一道面试题引发的对javascript类型转换的思考
Mar 06 #Javascript
You might like
用PHP实现登陆验证码(类似条行码状)
2006/10/09 PHP
PHP.ini安全配置检测工具pcc简单介绍
2015/07/02 PHP
laravel 框架配置404等异常页面
2019/01/07 PHP
Flash对联广告的关闭按钮讨论
2007/01/30 Javascript
javascript Demo模态窗口
2009/12/06 Javascript
nodejs入门详解(多篇文章结合)
2012/03/07 NodeJs
angularjs 处理多个异步请求方法汇总
2015/01/06 Javascript
js仿QQ中对联系人向左滑动、滑出删除按钮的操作
2016/04/07 Javascript
基于JS分页控件实现简单美观仿淘宝分页按钮效果
2016/11/07 Javascript
深入理解JavaScript中的预解析
2017/01/04 Javascript
利用jquery禁止外层滚动条的滚动
2017/01/05 Javascript
js 两数组去除重复数值的实例
2017/12/06 Javascript
详解Nodejs mongoose
2018/06/10 NodeJs
解决Vue中 父子传值 数据丢失问题
2019/08/27 Javascript
JS禁用右键、禁用Ctrl+u、禁用Ctrl+s、禁用F12的实现代码
2020/12/01 Javascript
Vue实现Header渐隐渐现效果的实例代码
2020/11/05 Javascript
python实现超简单端口转发的方法
2015/03/13 Python
简单理解Python中基于生成器的状态机
2015/04/13 Python
Linux中Python 环境软件包安装步骤
2016/03/31 Python
Python爬虫之模拟知乎登录的方法教程
2017/05/25 Python
对python .txt文件读取及数据处理方法总结
2018/04/23 Python
pygame实现贪吃蛇游戏(下)
2019/10/29 Python
Python3实现mysql连接和数据框的形成(实例代码)
2020/01/17 Python
使用TensorFlow搭建一个全连接神经网络教程
2020/02/06 Python
django models里数据表插入数据id自增操作
2020/07/15 Python
filter使用python3代码进行迭代元素的实例详解
2020/12/03 Python
全球最大最受欢迎的旅游社区:Tripadvisor
2017/11/03 全球购物
巴黎卡诗加拿大官网:Kérastase加拿大
2018/11/12 全球购物
一名女生的自荐信
2013/12/08 职场文书
《小白兔和小灰兔》教学反思
2014/02/18 职场文书
中职生求职信
2014/07/01 职场文书
2014党的群众路线教育实践活动总结报告
2014/10/31 职场文书
2015新学期开学寄语
2015/02/26 职场文书
降价通知函
2015/04/23 职场文书
试了下Golang实现try catch的方法
2021/07/01 Golang
Python中可变和不可变对象的深入讲解
2021/08/02 Python