<!doctype html>

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>弹性运动---弹性菜单</title>

     <style>

     * {

         padding: 0;

         margin: 0;

     }

     li {

         list-style: none;

     }

     ul {

         width: 400px;

         height: 30px;

         position: relative;

         margin: 100px auto 0;

     }

     li {

         float: left;

         width: 98px;

         height: 28px;

         line-height: 28px;

         border: 1px solid #ccc;

         text-align: center;

         z-index: 2;

         position: relative;

         cursor: pointer;

     }

     .bg {

         width: 100px;

         height: 5px;

         overflow: hidden;

         background: red;

         border: none;

         position: absolute;

         top: 24px;

         left: 0;

         z-index: 1;

     }

 </style>

 <script type="text/javascript">

     window.onload=function ()

     {

         var oUl=document.getElementById('ul1');

         var aLi=oUl.getElementsByTagName('li');

         var oBg=aLi[aLi.length-1];

         var i=0;

         for(i=0;i<aLi.length-1;i++)

         {

             aLi[i].index=i;

             aLi[i].onmouseover=function ()

             { // 移动的元素 当前对象  移动的属性

                 startMove(oBg,this,'left');

             };

         }

     };

     // 移动的元素 当前对象  移动的属性

     function startMove(obj, index, attr)

     {

         iTarget=get_offset_val(index, attr);

         obj.attr_name=get_offset_val(obj, attr);

         if(iTarget==obj.attr_name)

             return;  // 如果选择的是当前的选中的元素

         obj.iSpeed=0;

         var iSpeed_dis=5;// 速度比值

         var mc =0.7 ; // 摩擦大小 值越大元素停止运动时间越长 值越小元素停止运动的时间越快

         // 防止开启多次定时器

          clearInterval(obj.timer);

          obj.timer=setInterval(backOut, 30);

         // 弹性运动

         function backOut()

         {

             // 加、减速运动 iTarget>obj.offsetLeft加速运动  iTarget<obj.offsetLeft减速运动

             obj.iSpeed+=(iTarget-obj.attr_name)/iSpeed_dis;

             // 摩擦运动 让元素停止运动

             obj.iSpeed*=mc;

             obj.attr_name+=obj.iSpeed; // 防止小数误差 ispeed 不是整数 ，把小数保留下来

             //运动速度小1 并且目标点与元素距离小于1 停止运动

             if(Math.abs(obj.iSpeed)<=1 && Math.abs(obj.attr_name-iTarget)<=1)

             {

                 obj.style[attr]=iTarget+'px';

                 clearInterval(obj.timer);

             }

             else

             {

                 obj.style[attr]= obj.attr_name+'px';

             }

         } //------------------ backOut() 结束

     }

      // 获取 offset　值

     function get_offset_val(obj,attr)

     {

         switch(attr)

         {

             case 'left':

              return obj.offsetLeft;

              break;

             case 'top':

              return obj.offsetTop;

              break;

             case 'width':

              return obj.offsetWidth;

              break;

             case 'height':

              return obj.offsetHeight;

              break;

         }

     }

 </script>

 </head>

 <body>

     <ul id="ul1">

       <li>首页</li>

       <li>关于我们</li>

       <li>产品</li>

       <li>联系方式</li>

       <li class="bg"></li>

     </ul>

 </body>

 </html>

js 弹性菜单的更多相关文章

  1. 非常酷的jQuery/HTML5图片滑块特效 带弹性菜单

    新的一周刚刚开始,当我迷迷糊糊坐在办公桌前时,又不自主的去看了一些jQuery和HTML5的应用插件,今天我们来看一款非常酷的jQuery/HTML5图片滑块特效,这款插件的特点是图片上不错的弹性菜单 ...

  2. JS树形菜单

    超全的JS树形菜单源代码共享(有实例图) 树形菜单是很常用的效果,常用在管理软件当中,但是一套树形菜单已经不能满足需求,所以如果能有一套比较全面的树形菜单JS特效代码,将会非常方便,下面懒人萱将超全的 ...

  3. js矩阵菜单或3D立体预览图片效果

    js矩阵菜单或3D立体预览图片效果 下载地址: http://files.cnblogs.com/elves/js%E7%9F%A9%E9%98%B5%E8%8F%9C%E5%8D%95%E6%88% ...

  4. 顶 兼容各种浏览器js折叠菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. Js弹性漂浮广告代码

    <html><head><meta http-equiv="Content-Type" content="text/html; charse ...

  6. 基于Bootstrap Ace模板+bootstrap.addtabs.js的菜单

    这几天研究了基于bootstrap Ace模板+bootstra.addtabs.js实现菜单的效果 参考了这个人的博客 https://www.cnblogs.com/landeanfen/p/76 ...

  7. 适合移动手机使用的js环形菜单特效插件

    blooming-menu是一款适合在移动手机上使用的js环形菜单插件.该环形菜单提供了众多的參数,通过结合CSS3动画制作出效果很炫酷的圆形菜单展开和隐藏动画效果. 以下是这个圆形菜单菜价的可用參数 ...

  8. jquery.smint.js 页面菜单浮动之谷歌浏览器异常

    jquery.smint.js 做公司项目时,谷歌测试,页面向下拉,刷新后,导航栏菜单与顶部距离发生变动,并不在设置的relative元素top下固定像素 我的relative元素的高为80,然后在j ...

  9. js侧边菜单

    目标 实现一个侧边栏菜单,最多二级,可以收起展开.用于系统左侧的主菜单. 大多数系统都会有这样的菜单,用于导航功能,切换到不同的操作页面.在单页应用系统中,菜单一般是固定在左侧,分组节点上配图标,高亮 ...

随机推荐

  1. LAMP 2.9 php扩展模块如何安装

    php 和 apache 类似,核心文件为/usr/local/php/bin/php,针对 apache 的是/usr/local/apache2/modules/libphp5.so 模块.这两个 ...

  2. DAY11-MYSQL视图、触发器、事务、存储过程、函数

    一 视图 视图是一个虚拟表(非真实存在),其本质是[根据SQL语句获取动态的数据集,并为其命名],用户使用时只需使用[名称]即可获取结果集,可以将该结果集当做表来使用. 使用视图我们可以把查询过程中的 ...

  3. eclipse怎么查看class文件（eclipse安装反编译插件）

    本人eclipse版本: Eclipse Java EE IDE for Web Developers. Version: Mars.2 Release (4.5.2) 步骤1:下载两个我们需要的东西 ...

  4. python中的变量以及字符串的使用

    在python中只有一个变量:动态变量 在Python当中令人奇怪的是我们的python没有静态变量,这个特性大大的增加了python的灵活性. 由于python中没有静态变量所以我们千万不要使用静态 ...

  5. Android开源地图项目 BigPlanetTracks 学习随笔

    一.         app主体部分 [tyt.android.bigplanettracks] 二.         地图部分 [tyt.android.bigplanettracks.maps] ...

  6. HDU 6395(2018多校第7场1010）Sequence

    不久前做过POJ3070,所以知道这题要用矩阵快速幂优化,但是这个题的递推公式中有一项⌊p/n⌋,场上就不会了... 下来才知道要用分块矩阵快速幂,因为⌊p/n⌋最多有2√p块,可以对每一块使用快速幂 ...

  7. 利用脚本，一键设置java环境变量(默认安装路径)

    Windows一键设置Java环境变量 右击以管理员方式运行,注意自行更改JAVA_HOME目录文件安装目录. JDKSetting.bat @echo off color 0a echo.----- ...

  8. ZBar开发详解

    博客转载自:https://blog.csdn.net/skillcollege/article/details/38855023 什么是ZBar? ZBar是一个开源库,用于扫描.读取二维码和条形码 ...

  9. USB无线网卡导致耳机电流声很大

    今天把许久未用的USB无线网卡插入到电脑中,戴上耳机准备听音乐,发现耳机里面的电流声非常大.回想以前并没有这种状况呀,忽然发现原来是USB无线网卡和耳机都插在前置面板中了,把USB无线网卡插在后置面板 ...

  10. Effective Objective-C [上]

    网上看到的 http://esoftmobile.com/2013/08/10/effective-objective-c/ 本文是针对<Effective Objective-C>一书的 ...