實現(xiàn)百度的鼠標(biāo)移入圖片抖動的特效

偶爾看到了百度的廣告特效，在鼠標(biāo)放到圖片上， 圖片會有個上下抖動的特效。很喜歡這種感覺。在于是摸索了一下，下面是一些步驟。
1。查看源文件，在查看后很納悶的發(fā)現(xiàn)，此頁并沒有包含那些獎品信息。這樣就斷定代碼在另一個頁面中。于是想當(dāng)然的以為是用的框架連接的地址。結(jié)果沒查到，卻看到了一個這樣的信息:

　　可以看到此頁面是用task-awards為ID的div當(dāng)容器的,所以,單擊頁面上的JS文件,查找task-awards

　　2。終于皇天不負(fù)有心人，在base.js中查到了這段代碼,可以看到被映射到了awards.html地址,加之下面的widget/ 路徑.所以此頁面的完整路徑就被找出來了

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

01 function getWidgets(){

02 var modules = {

03 "task-intro-box":"intro.html"

04 ,"task-awards":"awards.html"

05 ,"task-gongao":"gongao.html"

06 ,"task-rule":"rule.html"

07 ,"faq":"faq.html"

08 ,"task-gongao":"gongao.html"

09 };

10 $.each(modules,function(key,val){

11 if(G(key) ){

12 $.get("widget/"+val ,function(data){

13 $(data).appendTo($("#"+key));

14 });

15 }

16

17 });

18

19 }

　　3。查看awards.html 頁面的源文件.可以看到這段圖片效果的調(diào)用

1 $("ul.awards img").each(function(k,img){

2 new JumpObj(img,10);

3 $(img).hover(function(){this.parentNode.parentNode.className="hover"});

4 $(img.parentNode).click(function(){return false;});//阻止被點擊

5 })

6 $("ul.awards li").hover(function(){this.className="hover"}).mouseout(function(){this.className=""});

　　4.然后我們只要查找JumpObj這個js方法的代碼就可以啦.同樣在base.js中查到了此方法:　　　

01 function JumpObj(elem, range, startFunc, endFunc) {

02 //圖片鼠標(biāo)移上去的動畫效果，感謝aoao的支持

03 var curMax = range = range || 6;

04 startFunc = startFunc || function(){};

05 endFunc = endFunc || function(){};

06 var drct = 0;

07 var step = 1;

08

09 init();

10

11 function init() { elem.style.position = 'relative';active() }

12 function active() { elem.onmouseover = function(e) {if(!drct)jump()} }

13 function deactive() { elem.onmouseover = null }

14

15 function jump() {

16 var t = parseInt(elem.style.top);

17 if (!drct) motionStart();

18 else {

19 var nextTop = t - step * drct;

20 if (nextTop >= -curMax && nextTop <= 0) elem.style.top = nextTop + 'px';

21 else if(nextTop < -curMax) drct = -1;

22 else {

23 var nextMax = curMax / 2;

24 if (nextMax < 1) {motionOver();return;}

25 curMax = nextMax;

26 drct = 1;

27 }

28 }

29 setTimeout(function(){jump()}, 200 / (curMax+3) + drct * 3);

30 }

31 function motionStart() {

32 startFunc.apply(this);

33 elem.style.top='0';

34 drct = 1;

35 }

36 function motionOver() {

37 endFunc.apply(this);

38 curMax = range;

39 drct = 0;

40 elem.style.top = '0';

41 }

42

43 this.jump = jump;

44 this.active = active;

45 this.deactive = deactive;

46 }

　 　5。這樣就大工告成啦. 以后再使用的時候,按下列步驟就可以了

　　<1>導(dǎo)入jquery 包,和base.js文件(存放JumpObj方法)

　　<2>在頁面加載的時候注冊鼠標(biāo)移入事件,調(diào)用JumpObj方法
百度效果頁面：http://www.baidu.com/search/baike/usertask/mingmantianxia/