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

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

WBOY

Release： 2016-05-16 18:19:26

Original

1155 people have browsed it

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