Based on jquery imitating Baidu's mouse movement into the picture jitter effect_jquery

1. After checking the source file, I was surprised to find that this page did not contain the prize information. This concludes that the code is in another page. So I took it for granted that it was the address of the frame connection. I didn't find it, but I saw a message like this:

Copy code The code is as follows:

You can see that this page uses the div with task-awards as the ID as the container, so click on the JS file on the page and look for task-awards

　2. Finally, Huangtian paid off and found this code in base.js. You can see that it is mapped to the awards.html address, plus the widget/ path below. So the complete path of this page was found

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));
});
}
});
}

3. View the source file of the awards.html page. You can see the call of this image effect

Copy the code 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;});//Prevent being clicked
})
$ ("ul.awards li").hover(function(){this.className="hover"}).mouseout(function(){this.className=""});

4 .Then we just need to find the code of the js method JumpObj. We also found this method in base.js: 🎜> The code is as follows:

function JumpObj(elem, range, startFunc, endFunc) { //The animation effect of moving the mouse up on the picture, thanks aaoao for the 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()}, 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. This is done. When you use it in the future, just follow the following steps
　<1>Import the jquery package and base.js file (storing the JumpObj method)
　<2>Load on the page When registering the mouse move event, call the JumpObj method


Source code package download