首页 > 特效插件 > 动画插件 >  js实现鼠标浮上去元素上下跳动的动画效果正文

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: 结束回调