Jquery 订阅所有【Jquery】的日志

鼠标滑过图片抖动效果，来自百度

作者:rainweb 日期:2010-10-11

字体大小: 小 中 大

在上网时候发现了这个效果（效果演示地址：http://www.baidu.com/search/baike/usertask/mingmantianxia/）.

 

 在鼠标放到图片上， 图片会有个上下抖动的特效。很喜欢这种感觉。在于是摸索了一下，下面是一些步骤。

1、查看源文件，在查看后很纳闷的发现，此页并没有包含那些奖品信息。这样就断定代码在另一个页面中。于是想当然的以为是用的框架连接的地址。结果没查到，却看到了一个这样的信息:

XML/HTML代码
  1. <div id ="task-intro-box"><!--活动说明--></div>    
  2. <div id ="task-awards"><!--活动奖励--></div>    
  3. <div id ="task-rule"><!--活动规则--></div>   

 

 

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

 

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

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

 

 

JavaScript代码
  1. function getWidgets(){   
  2.     var modules = {   
  3.         "task-intro-box":"intro.html"  
  4.         ,"task-awards":"awards.html"  
  5.         ,"task-gongao":"gongao.html"  
  6.         ,"task-rule":"rule.html"  
  7.         ,"faq":"faq.html"  
  8.         ,"task-gongao":"gongao.html"  
  9.     };   
  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 页面的源文件.可以看到这段图片效果的调用

JavaScript代码
  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中查到了此方法:　　

JavaScript代码
  1. function JumpObj(elem, range, startFunc, endFunc) {   
  2.         //图片鼠标移上去的动画效果，感谢aoao的支持   
  3.         var curMax = range = range || 6;   
  4.        startFunc = startFunc || function(){};   
  5.         endFunc = endFunc || function(){};   
  6.         var drct = 0;   
  7.         var step = 1;   
  8.   
  9.         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. }   

 

 查看演示  下载演示

 

 

 




[本日志由 rainweb 于 2010-10-12 03:15 PM 编辑]
文章来自: 来自
引用通告: 查看所有引用 | 我要引用此文章
Tags:
相关日志:
评论: 2 | 引用: 0 | 查看次数: -
回复回复hujuntao[2010-11-04 10:29 PM | del]
不简单又更新了    它说我恶意灌水
回复回复hujuntao[2010-11-04 10:26 PM | del]
不简单又更新了
发表评论
昵　称:
密　码: 游客发言不需要密码.
内　容:
验证码: 验证码
选　项:
虽然发表评论不用注册，但是为了保护您的发言权，建议您注册帐号.