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

呵呵，仔细找找就把相关的代码找出来了，核心就是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();

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