html:

　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

　　<html xmlns="http://www.w3.org/1999/xhtml">
　　<head>
　　　　<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
　　　　　　<title>jquery制作鼠标经过图片实现上下抖动动画特效</title>
　　　　<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
　　　　<script type="text/javascript" src="js/jump.js"></script>
　　　　<script type="text/javascript">
　　　　$(function(){
　　　　　　$("#ul img").each(function(k,img){
　　　　　　　　new JumpObj(img,10);
　　　　　　　　//第一个参数代表元素对象
　　　　　　　　//第二个参数代表抖动幅度
　　　　　　});
　　　　});
　　　　</script>

　　</head>
　　<body>
　　　　<div class="img_box">
　　　　　　<ul id="ul">
　　　　　　　　<li><a href="#"><img src="images/01.jpg"/></a></li>
　　　　　　　　<li><a href="#"><img src="images/02.jpg"/></a></li>
　　　　　　　　<li><a href="#"><img src="images/03.jpg"/></a></li>
　　　　　　　　<li><a href="#"><img src="images/04.jpg"/></a></li>
　　　　　　</ul>
　　　　</div>

　　</body>
</html>

 

jump.js:

　　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;
}