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/ 路径.所以此页面的完整路径就被找出来了

复制代码 代码如下:

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方法

源码打包下载