实现百度的鼠标移入图片抖动的特效(提供步骤和源码)

时间：2010-09-15 来源：Capricornus

　　今天无聊，在上网时候发现了这个效果（效果演示地址：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;
}

　　5。这样就大工告成啦. 以后再使用的时候,按下列步骤就可以了

　　<1>导入jquery 包,和base.js文件(存放JumpObj方法)

　　<2>在页面加载的时候注册鼠标移入事件,调用JumpObj方法

　　一份整理好的源码,还请笑纳. 下载地址:http://files.cnblogs.com/Capricornus/ImageShake.rar