JavaScript 动画之tab切换

来源：互联网发布：马龙职业生涯数据编辑：程序博客网时间：2024/05/11 20:27

弹性公式
速度+=(目标值-oDiv.offsetLeft)/5
速度*=0.7
例子
仿官网导航条效果
无法到达指定位置——小数误差问题
如何解决？速度无法取整，使用变态办法——变量
弹性菜单
弹性运动的问题：运动过界

这里写图片描述

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><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].onmouseover=function ()        {            startMove(oBg, this.offsetLeft);        };    }};var iSpeed=0;var left=0;function startMove(obj, iTarget){    clearInterval(obj.timer);    obj.timer=setInterval(function (){        iSpeed+=(iTarget-obj.offsetLeft)/5;        iSpeed*=0.7;        left+=iSpeed;        if(Math.abs(iSpeed)<1 && Math.abs(left-iTarget)<1)        {            clearInterval(obj.timer);            obj.style.left=iTarget+'px';            //alert('关了');        }        else        {            obj.style.left=left+'px';        }        document.title=iSpeed;    }, 30);}</script></head><body><ul id="ul1">    <li>首页</li>    <li>关于我们</li>    <li>产品</li>    <li>联系方式</li>    <li class="bg"></li></ul></body></html>

参考：JavaScript 动画

阅读全文

0 0