实现百度的鼠标移入图片抖动的特效

偶尔看到了百度的广告特效，在鼠标放到图片上，图片会有个上下抖动的特效。很喜欢这种感觉。在于是摸索了一下，下面是一些步骤。1。查看源文件，在查看后很纳闷的发现，此页并没有包含那些奖品信息。这样就断定代码在另一个页面中。于是想当然的以为是用的框架连接的地址。结果没查到，却看到了一个这样的信息:

可以看到此页面是用task-awards为ID的div当容器的,所以,单击页面上的JS文件,查找task-awards

2。终于皇天不负有心人，在base.js中查到了这段代码,可以看到被映射到了awards.html地址,加之下面的widget/路径.所以此页面的完整路径就被找出来了

为:https://www.baidu.com/search/baike/usertask/mingmantianxia/widget/awards.html

01functiongetWidgets(){

02varmodules={

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){

11if(G(key)){

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

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

14});

15}

16

17});

18

19}

3。查看awards.html页面的源文件.可以看到这段图片效果的调用

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

2newJumpObj(img,10);

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

4$(img.parentNode).click(function(){returnfalse;});//阻止被点击

5})

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

4.然后我们只要查找JumpObj这个js方法的代码就可以啦.同样在base.js中查到了此方法:

01functionJumpObj(elem,range,startFunc,endFunc){

02//图片鼠标移上去的动画效果，感谢aoao的支持

03varcurMax=range=range||6;

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

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

06vardrct=0;

07varstep=1;

08

09init();

10

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

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

13functiondeactive(){elem.onmouseover=null}

14

15functionjump(){

16vart=parseInt(elem.style.top);

17if(!drct)motionStart();

18else{

19varnextTop=t-step*drct;

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

21elseif(nextTop<-curMax)drct=-1;

22else{

23varnextMax=curMax/2;

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

25curMax=nextMax;

26drct=1;

27}

28}

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

30}

31functionmotionStart(){

32startFunc.apply(this);

33elem.style.top='0';

34drct=1;

35}

36functionmotionOver(){

37endFunc.apply(this);

38curMax=range;

39drct=0;

40elem.style.top='0';

41}

42

43this.jump=jump;

44this.active=active;

45this.deactive=deactive;

46}

5。这样就大工告成啦.以后再使用的时候,按下列步骤就可以了

<1导入jquery包,和base.js文件(存放JumpObj方法)

<2在页面加载的时候注册鼠标移入事件,调用JumpObj方法百度效果页面：https://www.baidu.com/search/baike/usertask/mingmantianxia/

Tags:实现百度的鼠标移入图片抖动的特效,鼠标移入图片抖动.