Jquery-based mouse-to-image jitters similar to Baidu

1. After viewing the source file, I was puzzled to find that this page does not contain the prize information. This determines Code In 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: Copy code The Code is as follows: <Div id = "task-intro-box"> <! -- Activity description --> </div>
<Div id = "task-Awards"> <! -- Activity rewards --> </div>
<Div id = "task-rule"> <! -- Activity Rules --> </div>

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

2. At the end of the day, the emperor finds this code in base.js, and 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. copy Code 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);
});
}< BR >});
}

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