技术笔记
鼠标指向元素后跳动动画效果
 moons   2020-08-26 15:37:43   173
专栏分类: javascript
    html
    
            <div class="nav">
                <ul>
                    <li class="active">
                        <a href="/">首页</a>
                    </li>
                    <yang:navlist typeid='0'>
                        <li>
                            <a href="{$navlist.url}">{$navlist.name}</a>
                        </li>
                    </yang:navlist>
                </ul>
            </div>




	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;
        }
        $(".nav ul li").each(function(k,img){
            new JumpObj(img,10);
            //第一个参数代表元素对象
            //第二个参数代表抖动幅度
        });
Copyright © mos360.cn By Moons Soft Studio 百度统计