纯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操作Select的Option上下移动及移除添加等等
Nov 18 Javascript
JS小功能(button选择颜色)简单实例
Nov 29 Javascript
javascript中的nextSibling使用陷(da)阱(keng)
May 05 Javascript
详解JavaScript的策略模式编程
Jun 24 Javascript
ajax跨域调用webservice的实现代码
May 09 Javascript
js判断浏览器是否支持严格模式的方法
Oct 04 Javascript
vue实现todolist单页面应用
Apr 11 Javascript
ES5 ES6中Array对象去除重复项的方法总结
Apr 27 Javascript
vue中本地静态图片路径写法
Mar 06 Javascript
Angularjs之ngModel中的值验证绑定方法
Sep 13 Javascript
Vue官方推荐AJAX组件axios.js使用方法详解与API
Oct 09 Javascript
小程序获取当前位置加搜索附近热门小区及商区的方法
Apr 08 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个人网站架设连环讲(二)
2006/10/09 PHP
CI框架常用经典操作类总结(路由,伪静态,分页,session,验证码等)
2016/11/21 PHP
ArrayList类(增强版)
2007/04/04 Javascript
Chrome扩展页面动态绑定JS事件提示错误
2014/02/11 Javascript
逐一介绍Jquery data()、Jquery stop()、jquery delay()函数(详)
2015/11/04 Javascript
JavaScript继承模式粗探
2016/01/12 Javascript
判断是否存在子节点的实现代码
2016/05/18 Javascript
在JavaScript中调用Java类和接口的方法
2016/09/07 Javascript
JavaScript实现url参数转成json形式
2016/09/25 Javascript
从零开始学习Node.js系列教程四:多页面实现数学运算的client端和server端示例
2017/04/13 Javascript
详解使用React制作一个模态框
2019/03/14 Javascript
详解关于webpack多入口热加载很慢的原因
2019/04/24 Javascript
js实现无限瀑布流实例方法
2019/09/16 Javascript
使用nodeJS中的fs模块对文件及目录进行读写,删除,追加,等操作详解
2020/02/06 NodeJs
JavaScript实现多球运动效果
2020/09/07 Javascript
Python函数的周期性执行实现方法
2016/08/13 Python
Python实现Windows和Linux之间互相传输文件(文件夹)的方法
2017/05/08 Python
Python实现基于TCP UDP协议的IPv4 IPv6模式客户端和服务端功能示例
2018/03/22 Python
Python 爬取携程所有机票的实例代码
2018/06/11 Python
python机器学习包mlxtend的安装和配置详解
2019/08/21 Python
Python csv文件的读写操作实例详解
2019/11/19 Python
什么是python的自省
2020/06/21 Python
PyCharm 光标变成黑块的解决方式
2021/02/06 Python
python爬虫scrapy基本使用超详细教程
2021/02/20 Python
移动web模拟客户端实现多方框输入密码效果【附代码】
2016/03/25 HTML / CSS
美国酒店控股公司:Choice Hotels
2018/06/15 全球购物
美国地毯购买网站:Rugs USA
2019/02/23 全球购物
error和exception有什么区别
2012/10/02 面试题
什么是设计模式
2012/06/17 面试题
出纳试用期自我鉴定
2014/04/07 职场文书
个人收入证明范本
2014/09/18 职场文书
试用期旷工辞退通知书
2015/04/17 职场文书
JavaScript与JQuery框架基础入门教程
2021/07/15 Javascript
Pandas 数据编码的十种方法
2022/04/20 Python
javascript中Set、Map、WeakSet、WeakMap区别
2022/12/24 Javascript