Implement the special effect of Baidu mouse moving into image jitter (steps and source code are provided)

Bored today, I found this effect when surfing the Internet (EffectDemo address: Http://www.baidu.com/search/baike/usertask/mingmantianxia ).

 

 

Place the cursor over the image.Special effects 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. This determinesCodeIn 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:

 
<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. 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.

For: http://www.baidu.com/search/baike/usertask/mingmantianxia/widget/awards.html

 
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.

$ ("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 ;}); // prevent 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:

Function jumpobj (ELEM, range, startfunc, endfunc) {// animation effect for moving the picture to the mouse. Thanks to aoao's support for 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.

Please smile at the source code.: Http://files.cnblogs.com/Capricornus/ImageShake.rar