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

Source: Internet
Author: User

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

 

 

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.