Jquery-based mouse-to-image jitters like Baidu

Place the mouse over the image, and the image will have a special effect of up and down jitter. I like this feeling very much. As a result, I found out some steps below. 1. After viewing the source file, I was puzzled to find that this page does not contain the prize information. In this way, the code is determined to be on another page. So it is assumed that the address is connected using the framework. The result is not found, but the following information is displayed:

The Code is as follows:

You can see that this page uses the task-awards as the ID p as the container, so click the JS file on the page to find the task-awards

2. After all, the emperor finds this code in base.jsand can see that it is mapped to the awards.html address, and the following widget/path. Therefore, the complete path of this page is located.

The Code is as follows:

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. Source file on the awards.html page. You can see the call of this image.

The Code is as follows:

$ ("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 ;}); // prevents being clicked
})
$ ("Ul. awards li "). hover (function () {this. className = "hover "}). mouseout (function () {this. className = ""});

4. Then we only need to find the code for the JumpObj js method. We also found this method in base. js:

The Code is as follows:

Function JumpObj (elem, range, startFunc, endFunc ){
// Specifies the animation effect when the image is moved with the mouse. Thank you for your support.
Var curMax = 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. In this case, you can proceed with the following steps.
<1> import the jquery package and base. js files (the JumpObj storage method)
<2> register the mouse movement event during page loading and call the JumpObj method.

Package and download source code