js运动-弹性运动

来源：互联网发布：java treeset 编辑：程序博客网时间：2024/04/27 22:16

运动原理：加速运动+减速运动+摩擦运动；

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title></title>        <style type="text/css">            *{                margin: 0;                padding: 0;            }            #btn{                margin: 50px;            }            #div1{                width: 100px;                height: 100px;                background: olive;                position: absolute;                top: 100px;                left: 0;            }        </style>        <script type="text/javascript">            window.onload=function(){                var oBtn=document.getElementById("btn");                var oDiv=document.getElementById("div1");                var iSpeed=0;                oBtn.onclick=function(){                    startMove(oDiv,500);                }                function startMove(obj,iTarget){                    clearInterval(obj.timer);                    obj.timer=setInterval(function(){                        iSpeed+=(iTarget-obj.offsetLeft)/5; //加减速运动的速度                        iSpeed*=0.7;//摩擦损失                        //在速度接近于零且距离目标点的距离接近于零的时候即判断物体到达终点，此时清除定时器且手动把速度和距目标点的距离归零。                        if ( Math.abs(iSpeed)<1 && Math.abs(iTarget-obj.offsetLeft)<1 ) {                            clearInterval(obj.timer);                            iSpeed=0;                            obj.style.left=iTarget+'px';                        }else{                            obj.style.left=obj.offsetLeft+iSpeed+'px';                        }                    },30)                }            }        </script>    </head>    <body>        <input id="btn" type="button" value="运动" />        <div id="div1"></div>    </body></html>

应用：弹性菜单

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><style>*{ margin:0; padding:0;}#ul1{ width:428px; height:30px; margin:20px auto; position:relative;}#ul1 li{ width:100px; height:30px; background:red; border:1px #000 solid; margin-right:5px; float:left; list-style:none; line-height:30px; text-align:center;}#ul1 #mark{ position:absolute; left:0; top:0; overflow:hidden;}#ul1 #mark ul{ width:428px; position:absolute; left:-1px; top:-1px; color:white;}</style><script>window.onload = function(){    var oMark = document.getElementById('mark');    var aBox = document.getElementsByClassName('box');    var childUl = oMark.getElementsByTagName('ul')[0];    var timer = null;    var timer2 = null;    var iSpeed = 0;    for(var i=0;i<aBox.length;i++){        aBox[i].onmouseover = function(){            clearTimeout(timer2);            startMove( this.offsetLeft );        };        aBox[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)/6;            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></head><body><ul id="ul1">    <li id="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></html>

弹性过界：
IE8-浏览器存在弹性过界问题，当宽度width或高度height等不能出现负值的样式出现负值时将会报错。所以，需要判断样式为高度或宽度时，样式值小于0时，等于0。

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style type="text/css">            *{                margin: 0;                padding: 0;            }            #div1{                width: 100px;                height: 30px;                background: olive;                margin: 30px auto 0;            }        </style>        <script type="text/javascript">            window.onload=function(){                var oDiv=document.getElementById("div1");                var iTimer=null;                var iSpeed=0;                oDiv.onmouseover=function(){                    startMove(300);                }                oDiv.onmouseout=function(){                    startMove(30);                }                function startMove(iTarget){                    clearInterval(iTimer);                    iTimer=setInterval(function(){                        iSpeed+=(iTarget-oDiv.offsetHeight)/5;                        iSpeed*=0.7;                        if ( Math.abs(iSpeed)<1 && Math.abs(iTarget-oDiv.offsetHeight)<1 ) {                            clearInterval(iTimer);                            iSpeed=0;                            oDiv.style.height=iTarget+'px';                        }else{                            var H=oDiv.offsetHeight+iSpeed;                            if (H<0) {                                H=0;                            }                            oDiv.style.height=H+'px';                        }                    },30)                }            }        </script>    </head>    <body>        <div id="div1"></div>    </body></html>

0 0