JS实现鼠标滑过图片的抖动效果

在上网时候发现了这个效果（效果演示地址：http://www.baidu.com/search/baike/usertask/mingmantianxia/）.

在鼠标放到图片上， 图片会有个上下抖动的特效。很喜欢这种感觉。在于是摸索了一下，下面是一些步骤。

1、查看源文件，在查看后很纳闷的发现，此页并没有包含那些奖品信息。这样就断定代码在另一个页面中。于是想当然的以为是用的框架连接的地址。结果没查到，却看到了一个这样的信息:

<div id ="task-intro-box"><!--活动说明--></div>

<div id ="task-awards"><!--活动奖励--></div>

<div id ="task-rule"><!--活动规则--></div>

可以看到此页面是用task-awards为ID的div当容器的,所以,单击页面上的JS文件,查找task-awards

2、终于皇天不负有心人，在base.js中查到了这段代码,可以看到被映射到了awards.html地址,加之下面的widget/ 路径.所以此页面的完整路径就被找出来了，为:http://www.baidu.com/search/baike/usertask/mingmantianxia/widget/awards.html

function getWidgets(){ 
    var modules = { 
        "task-intro-box":"intro.html" 
        ,"task-awards":"awards.html" 
        ,"task-gongao":"gongao.html" 
        ,"task-rule":"rule.html" 
        ,"faq":"faq.html" 
        ,"task-gongao":"gongao.html" 
    }; 
    $.each(modules,function(key,val){ 
        if(G(key) ){ 
            $.get("widget/"+val ,function(data){ 
                $(data).appendTo($(""+key)); 
            }); 
        } 
       
    }); 
       
}

 

3、查看awards.html 页面的源文件.可以看到这段图片效果的调用

$("ul.awards img").each(function(k,img){ 
    new JumpObj(img,10); 
    $(img).hover(function(){this.parentNode.parentNode.className="hover"}); 
    $(img.parentNode).click(function(){return false;});//阻止被点击 
}) 
$("ul.awards li").hover(function(){this.className="hover"}).mouseout(function(){this.className=""});

 

4.然后我们只要查找JumpObj这个js方法的代码就可以啦.同样在base.js中查到了此方法:

function JumpObj(elem, range, startFunc, endFunc) { 
        //图片鼠标移上去的动画效果，感谢aoao的支持 
        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; 
}