js弹性运动---弹性菜单

Posted 雪剑无影

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js弹性运动---弹性菜单相关的知识,希望对你有一定的参考价值。

<!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弹性运动---弹性菜单的主要内容,如果未能解决你的问题,请参考以下文章

利用弹性运动的原理做弹性菜单

JS学习之路,之弹性运动框架

js 运动函数篇 (加速度运动弹性运动重力场运动(多方向+碰撞检测+重力加速度+能量损失运动)拖拽运动)层层深入

js 实现弹性运动的简单应用----导航栏中弹性

css3使用transform属性制作js弹性运动

弹性运动