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

主要是速度以及临界条件的处理弹性运动的函数
function startMove(obj,target) {
    clearInterval(obj.timer);
    var speed=0;
    obj.timer = setInterval(function() {
        speed += (target - obj.offsetLeft) / 6;
        //类似于摩擦系数
        speed *= 0.75;
        if(Math.abs(speed) < 1 && Math.abs(target - obj.offsetLeft) < 1) {
            clearInterval(obj.timer);
            obj.style.left = target;
            speed = 0;
        } else {
            obj.style.left = obj.offsetLeft + speed + ‘px‘;
        }
//        console.log(obj.offsetLeft + ‘/‘ + speed);
    }, 30);
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="../css/public.css"/>
        <style>
            #list{width: 450px;height: 40px;margin: 100px auto;position: relative;}
            #list li.box{width: 100px;height: 40px;line-height: 40px;text-align: center;border: 1px solid #999;float: left;margin-right: 10px;background: red;}
            #mark{width: 101px;height: 42px;background: green;position: absolute;top: 0;left: 0;}
        </style>
        <script type="text/javascript" src="../js/rainbow.js"></script>
        <script type="text/javascript">
            window.onload=function(){
                var oUl=document.getElementById("list");
                var oMark=document.getElementById("mark");
                var aBox=getElementsByClassName(document,‘li‘,‘box‘);
                var timer=null;
                for(var i=0;i<aBox.length;i++){
                    aBox[i].onmouseover=function(){
                        clearTimeout(timer);
                        startMove(oMark,this.offsetLeft);
                    };
                    aBox[i].onmouseout=function(){
                        timer=setTimeout(function(){
                            startMove(oMark,0);
                        },100);
                    }
                }
                oMark.onmouseover=function(){
                    clearTimeout(timer);
                };
                oMark.onmouseout=function(){
                    startMove(oMark,0);
                }
            }
        </script>
    </head>
    <body>
        <ul id="list">
            <li id="mark"></li>
            <li class="box">首页</li>
            <li class="box">论坛</li>
            <li class="box">体育</li>
            <li class="box">新闻</li>
        </ul>
    </body>
</html>
时间: 2024-10-27 06:04:17

利用弹性运动的原理做弹性菜单的相关文章

js弹性运动滑动的菜单

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>弹性运动效果下滑的菜单</title> <script>  window.onload = function(){   var oUl = document.getElementById('oul');   var oLi = oul.getElem

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 {

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

弹性运动:顾名思义,就如同物理中的加速减速运动,当开始时速度过大,到达终点时,速度不会立刻停下,而是再前进一段距离,而后再向相反方向运动,如此往复. var timer=null; var speed=0; //速度必须放在外面,放在里面的话,每次速度都是从0开始而不是保持上次执行的结果 function move(){ timer=setInterval(function(){ /*if (oDiv.offsetLeft<300) { speed+=(300-oDiv.offsetLeft)/

新买了ipad,在ipad上面看见的一个效果,pc上应该也见过,但是还是ipad上面有印象,如果是弹性运动就最好了

新买了ipad,在ipad上面看见的一个效果,pc上应该也见过,但是还是ipad上面有印象,如果是弹性运动就最好了<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>无标题文档</title> <style type="text/css"> .in{ width:200px; height:24px; backg

canvas链式弹性运动

上一课我学习了相对于鼠标为目标点的弹性运动,这次就学习了如何以上一个球为目标点的弹性运动,这次的函数比较复杂,首先分成了如下几个函数,首先定义了一个球的model,之后添加了4个球,在加载中调用了动画事件,之后在动画事件里面加载了画线的事件,画完线之后才开始画球,而且专门用了一个函数来计算,也就是完全分开了层次,以免自己的逻辑思维混乱,这是一种编程的良好思维,分区处理内容,这样有效避免了代码重用,也增加了代码可读性. 还是像以前一样,代码如下: var canvas = document.get

[ActionScript 3.0] AS3 弹性运动

1 package com.views 2 { 3 import flash.display.Sprite; 4 import flash.events.Event; 5 import flash.geom.Point; 6 7 /** 8 * @author Frost.Yen 9 * @E-mail [email protected] 10 * @create 2015-8-20 上午11:16:11 11 * 12 */ 13 [SWF(width="800",height=&q

jQuery插件之-----弹性运动

<!doctype html><html><head><meta charset="utf-8"><title>弹性运动</title> <script type="text/javascript" src="images/jquery-1.11.1.min.js"></script> <script> // JavaScript Docu

JS运动基础(三) 弹性运动

加减速运动速度不断增加或减少速度减小到负值,会向反方向运动弹性运动在目标点左边,加速:在目标点右边,减速根据距离,计算加速度带摩擦力的弹性运动弹性运动+摩擦力 弹性:速度 += (目标点 - 当前值)/系数;  //6 , 7 , 8速度 *= 摩擦系数;   // 0.7 0.75终止条件距离足够近 并且 速度足够小 缓冲:var 速度 = (目标点 - 当前值)/系数;速度取整 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <me

弹性运动+摩擦力

  <!DOCTYPE html>   <html>   <head lang="en">   <meta charset="UTF-8">   <style type="text/css">   #box{width:100px;height:100px;background:red;position: absolute;left:0;}   span{height:900px;bor