百度有啊鼠标移上去图片位置动态改变效果

呵呵，仔细找找就把相关的代码找出来了，核心就是JumpObj类了，项目中有类似需求，直接拿过来用就行了，当然，版权归baidu，:)

店铺推荐商品

回到页首

• 

  电脑组装与维修从入门到精通(附光盘)

  有啊价：54.75

• 

  攻克英语(四级词汇掌上通)

  有啊价：22.05

• 

  嵌入式可配置实时操作系统eCos开发与应用(附光盘)/...

  有啊价：34.78

• 

  开关电源维修技能实训(芯片级)/计算机硬件工程师维...

  有啊价：29.25

• 

  金银岛(附光盘)/有声名著阶梯阅读

  有啊价：14.85

• 

  王铎书法十辑(上共5册)(精)

  有啊价：109.50

• 

  康德著作全集(第7卷学科之争实用人类学)(精)

  有啊价：31.20

• 

  科技出版国际竞争力研究(“十一五”国家重点图书，...

  有啊价：36.00

« 1 2 3 下一页»

// 百度原有的JumpObj，拿过来就用了
     function  JumpObj(elem, range, startFunc, endFunc) {

         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;
    }
    
     function  MyInit()
    {
         var  range  =   6 ;
         // Baidu原有的写法，效果同Jquery的$(".img")，替换掉
         // var elements = Dom.getElementsByClassName('img', "recommend-zone");
        
         // Jquery的简洁写法
        $( " .img " ).each( function (){
            new  JumpObj( this , range);
        }); 

         // 常规写法
//         var elements = $(".img");
//         for (var i = 0; i < elements.length; i++) {
//             new JumpObj(elements[i], range);
//         }
    }
    MyInit();

 

百度有啊鼠标移上去图片位置动态改变效果例子下载

转载于:https://www.cnblogs.com/stu-acer/archive/2009/01/01/1366610.html