jqueryベースの百度マウスを画像のジッタ効果に移動

1.ソースファイルを見て、見ていると退屈な発見で、このページには賞品情報が含まれていません.これにより、コードが別のページにあると判断します.そこで当然のことながらフレームでつながっているアドレスだと思った.結局調べられませんでしたが、こんな情報が見えました.

このページは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.参照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メソッドのコードを探せばいいです.同じように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メソッドを呼び出す
ソースパッケージのダウンロード