基于jquery的仿百度的鼠標移入圖片抖動效果

更新時間：2010年09月17日 08:55:12 作者：

在鼠標放到圖片上，圖片會有個上下抖動的特效。很喜歡這種感覺。在于是摸索了一下，下面是一些步驟。

1。查看源文件，在查看后很納悶的發(fā)現(xiàn)，此頁并沒有包含那些獎品信息。這樣就斷定代碼在另一個頁面中。于是想當然的以為是用的框架連接的地址。結果沒查到，卻看到了一個這樣的信息:

復制代碼代碼如下:

 
<div id ="task-intro-box"><!--活動說明--></div> 
<div id ="task-awards"><!--活動獎勵--></div> 
<div id ="task-rule"><!--活動規(guī)則--></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; 
} 