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

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 メソッドを呼び出します


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