js实现带简单弹性运动的导航条


Posted in Javascript onFebruary 22, 2017

晚上跟着视频敲了下 弹性菜单的代码,先记下来

效果如下:

js实现带简单弹性运动的导航条

代码如下:

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
 *{
  margin:0;
  padding:0;
 }
 .ul1{
  width:450px;
  height:30px;
  margin:20px auto;
  position:relative;
 }
 li{
  list-style:none;
  line-height:30px;
  height:30px;
  width:100px;
  color:orange;
  text-align:center;
  float:left;
  margin-right:5px;
  border:1px soli #000;
  background-color:red;
 }
 .mark{
  position:absolute;
  left:0;
  top:0;
  overflow:hidden;
 }
 .mark ul{
  width:450px;
  position:absolute;
  left:0;
  top:0;
 }
 .mark ul li{
  color:#fff;
  background-color:deepskyblue;
 }
 </style>
</head>
<body>
<ul class="ul1">
 <li class="mark">
 <ul>
  <li>首页</li>
  <li>论坛</li>
  <li>视频</li>
  <li>课程</li>
 </ul>
 </li>
 <li class="box">首页</li>
 <li class="box">论坛</li>
 <li class="box">视频</li>
 <li class="box">课程</li>
</ul>
</body>
<script>
 window.onload = function(){
 var oMark = document.querySelector('.mark');
 var oBox = document.querySelectorAll('.box');
 var childUl = oMark.querySelector('ul');
 var timer = null;
 var timer2 = null;//延迟定时器,100毫秒人的眼睛是察觉不出来的
 var iSpeed = 0;
 for (var i=0;i<oBox.length;i++){
  oBox[i].onmouseover = function(){
  clearTimeout(timer2);
  startMove(this.offsetLeft);
  };
  oBox[i].onmouseout = function(){
  timer2 = setTimeout(function(){
   startMove(0);
  },100);

  };
 }
 oMark.onmouseover = function(){
  clearTimeout(timer2);
 };
 oMark.onmouseout= function(){
  timer2 = setTimeout(function(){
  startMove(0);
  },100);
 };
 function startMove(iTarget){
  clearInterval(timer);
  timer = setInterval(function(){
  iSpeed += (iTarget -oMark.offsetLeft)/5;
  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>
</html>

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

Javascript 相关文章推荐
使用JavaScript switch case 另类写法
Mar 14 Javascript
JS随机调用指定函数的方法
Jul 01 Javascript
Clipboard.js 无需Flash的JavaScript复制粘贴库
Oct 02 Javascript
Javascript中的几种继承方式对比分析
Mar 22 Javascript
Bootstrap基本组件学习笔记之按钮组(8)
Dec 07 Javascript
原生js FileReader对象实现图片上传本地预览效果
Mar 27 Javascript
vue的diff算法知识点总结
Mar 29 Javascript
angular2 ng2-file-upload上传示例代码
Aug 23 Javascript
详解vue路由篇(动态路由、路由嵌套)
Jan 27 Javascript
Vue实现导航栏点击当前标签变色功能
Aug 19 Javascript
用JavaScript实现贪吃蛇游戏
Oct 23 Javascript
vue实现下载文件流完整前后端代码
Nov 17 Vue.js
bootstrap fileinput 插件使用项目总结(经验)
Feb 22 #Javascript
javascript 网页进度条简单实例
Feb 22 #Javascript
详解闭包解决jQuery中AJAX的外部变量问题
Feb 22 #Javascript
js实现PC端根据IP定位当前城市地理位置
Feb 22 #Javascript
纯JS实现轮播图
Feb 22 #Javascript
javascript 操作cookies详解及实例
Feb 22 #Javascript
jquery实现手机端单店铺购物车结算删除功能
Feb 22 #Javascript
You might like
PHP foreach循环使用详解与实例代码
2010/05/08 PHP
php开发环境配置记录
2011/01/14 PHP
php获取当前页面完整URL地址
2015/12/30 PHP
PHP大文件分割上传 PHP分片上传
2017/08/28 PHP
php根据命令行参数生成配置文件详解
2019/03/15 PHP
Laravel框架之解决前端显示图片问题
2019/10/24 PHP
PHP+fiddler抓包采集微信文章阅读数点赞数的思路详解
2019/12/20 PHP
不用AJAX和IFRAME,说说真正意义上的ASP+JS无刷新技术
2008/09/25 Javascript
基于jQuery的图片剪切插件
2011/08/03 Javascript
Javascript进制转换实例分析
2015/05/14 Javascript
jQuery插件制作之参数用法实例分析
2015/06/01 Javascript
jQuery插件zepto.js简单实现tab切换
2015/06/16 Javascript
JavaScript高级教程5.6之基本包装类型(详细)
2015/11/23 Javascript
js实现的星星评分功能函数
2015/12/09 Javascript
Nodejs获取网络数据并生成Excel表格
2020/03/31 NodeJs
js实现类bootstrap模态框动画
2017/02/07 Javascript
关于Sequelize连接查询时inlude中model和association的区别详解
2017/02/27 Javascript
webstorm添加vue.js支持的方法教程
2017/07/05 Javascript
vue.js给动态绑定的radio列表做批量编辑的方法
2018/02/28 Javascript
js与jQuery实现获取table中的数据并拼成json字符串操作示例
2018/07/12 jQuery
使用Vue-Awesome-Swiper实现旋转叠加轮播效果&amp;平移轮播效果
2019/08/16 Javascript
9个JavaScript日常开发小技巧
2020/10/06 Javascript
python通过urllib2获取带有中文参数url内容的方法
2015/03/13 Python
在Python中处理列表之reverse()方法的使用教程
2015/05/21 Python
Python字符串格式化
2015/06/15 Python
在Django的URLconf中进行函数导入的方法
2015/07/18 Python
基于Python中求和函数sum的用法详解
2018/06/28 Python
Django实战之用户认证(用户登录与注销)
2018/07/16 Python
Flask框架实现的前端RSA加密与后端Python解密功能详解
2019/08/13 Python
Fossil加拿大官网:化石手表、手袋、首饰及配饰
2019/04/23 全球购物
FirstCry阿联酋儿童和婴儿产品网上购物:FirstCry.ae
2021/02/22 全球购物
计算机学生的自我评价分享
2014/02/18 职场文书
城管执法人员个人对照检查材料思想汇报
2014/09/29 职场文书
银行授权委托书格式
2014/10/10 职场文书
电影地道战观后感
2015/06/04 职场文书
2016大学生社会实践心得体会范文
2016/01/14 职场文书