Based on jquery imitation Baidu Mouse move into the picture jitter effect _jquery

1. Looking at the source file, after viewing the discovery, I am puzzled to find that this page does not contain the prizes information. This determines that the code is on another page. So take it for granted that the frame is connected to the address. The results were not found, but saw a message like this:

Copy Code code as follows:

<div id = "Task-intro-box" ><!--activity Description--></div>
<div id = "Task-awards" ><!--Activity Award--></div>
<div id = "Task-rule" ><!--activity Rule--></div>

You can see this page is using task-awards as the ID div when the container, so click the JS file on the page to find Task-awards

2. Finally emperor, in Base.js found this code, you can see is mapped to the awards.html address, plus the following widget/path. So the full path to this page is being found.

Copy Code code 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. View the source file for the awards.html page. You can see the call to this picture effect

Copy Code code 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;});/ /block is clicked
})
$ ("Ul.awards li"). Hover (function () {this.classname= "hover"}). Mouseout (function () {this.classname= ""});

4. Then we just need to find jumpobj This JS method code is OK. This method is also found in Base.js:

Copy Code code as follows:

function Jumpobj (elem, Range, Startfunc, Endfunc) {
Picture mouse to move up the animation effect, thanks to AOAO support
var Curmax = Range = 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 ()}, MB/(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. That's workpiece. When you use it later, follow these steps
<1> import jquery packages, and Base.js files (store jumpobj methods)
<2> register the mouse to move the event when the page loads, call the Jumpobj method

SOURCE Package Download