js实现鼠标浮上去元素上下跳动的动画效果

由于工作需要，需要实现鼠标浮动到导航栏，文字跳动的效果。既然需要鼠标交互，同时还只跳动几下就停下，刚好从网上找到了这个效果，非常好用。点击查看效果。代码都在这里，就不提供下载了。

1、加入下面的js

function JumpObj(elem, range, startFunc, endFunc) {
    var curMax = range = range || 6;
    startFunc = startFunc || function(){};
    endFunc = endFunc || function(){};
    var drct = 0;
    var step = 1;
    init();
    function init() { elem.style.position = 'relative';active() }
    function active() { elem.onmouseover = function(e) {if(!drct)jump()} }
    function deactive() { elem.onmouseover = null }
    function jump() {
         var t = parseInt(elem.style.top);
        if (!drct) motionStart();
        else {
            var nextTop = t - step * drct;
            if (nextTop >= -curMax && nextTop <= 0) elem.style.top = nextTop + 'px';
            else if(nextTop < -curMax) drct = -1;
           else {
                var nextMax = curMax / 2;
                if (nextMax < 1) {motionOver();return;}
                curMax = nextMax;
                drct = 1;
            }
        }
        setTimeout(function(){jump()}, 200 / (curMax+3) + drct * 3);
     }
    function motionStart() {
        startFunc.apply(this);
        elem.style.top='0';
        drct = 1;
    }
      function motionOver() {
        endFunc.apply(this);
        curMax = range;
        drct = 0;
        elem.style.top = '0';
    }
    this.jump = jump;
    this.active = active;
    this.deactive = deactive;
}

2、准备需要动画的div，如：

<div id="jump"></div>

3、使用：

JumpObj(document.querySelector('#jump'))

4、参数详解：

elem: 需要跳动的元素

range: 跳动剧烈程度，默认6

startFunc: 开始回调

endFunc: 结束回调