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

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

店铺推荐商品

回到页首

//百度原有的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();

 


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

posted @ 2009-01-01 16:20  stu_acer  阅读(707)  评论(0编辑  收藏  举报