画像への Baidu のマウスの動きを模倣する jquery に基づいています jittereffect

画像への Baidu のマウスの動きを模倣する jquery に基づいています jittereffect_jquery

WBOY

リリース： 2016-05-16 18:19:26

オリジナル

1120 人が閲覧しました

1.ソースファイルを確認したところ、このページに賞品の情報が含まれていないことに気づき驚きました。これにより、コードは別のページにあることがわかります。なので、フレーム接続のアドレスだと勝手に思っていました。見つかりませんでしたが、次のようなメッセージが表示されました:

コードをコピーコードは次のとおりです:

 ;

 >

このページでは、ID に task-awards を指定した div をコンテナとして使用していることがわかりますので、ページ上の JS ファイルをクリックして、task-awards

２．最後に、Huangtian は、base.js でこのコードを見つけました。このコードは、awards.html アドレスにマッピングされており、さらに以下の widget/ パスも見つかりました。このページの完全なパスは

です。

コードをコピーコードは次のとおりです:

function getWidgets(){ 
var modules = { 
 " task-intro-box":"intro.html" 
,"task-awards":"awards.html" 
,"task-gongao":"gongao.html" 
,"task-ルール ":"rule.html" 
,"faq":"faq.html" 
,"task-gongao":"gongao.html" 
}; 
$.each(modules, function (key,val){ 
if(G(key) ){ 
$.get("ウィジェット/" val ,function(data){ 
$(data).appendTo($("# " key)); 
}); 
} 
}); 
} 

 

3. award.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 . 次に、JS メソッド JumpObj のコードを見つける必要があります。このメソッドは、base.js でも見つかりました。 🎜> コードは次のとおりです: 

function JumpObj (elem, range, startFunc, endFunc) {
//画像上でマウスを上に動かすアニメーション効果、aaoao のサポートに感謝します

var curMax = range = range || startFunc = startFunc || function(){}; var drct = 1; 関数init() { elem.style.position = 'relative';active() } 関数 active() { elem.onmouseover = function(e) {if(!drct )jump()} } 関数 deactive () { elem.onmouseover = null } function Jump() { var t = parseInt(elem.style.top);

if (!drct ) motionStart(); 🎜>var nextTop = t - step * drct;

if (nextTop >= -curMax && nextTop <= 0) elem.style.top = nextTop 'px' ; 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'; 
} 
function motionOver( ) { 
endFunc.apply(this) ; 
curMax = 範囲; 
drct = 0; 
this.jump = アクティブ; 
this.deactive = 無効; 
} 

 
5.これで、今後使用するときは、次の手順に従ってください。
 <1>jquery パッケージと Base.js ファイルをインポートします（JumpObj メソッドを保存します）
 <2>ページに読み込みます。マウス移動イベントを登録するときに、JumpObj メソッドを呼び出します


ソース コード パッケージのダウンロード