jquery鼠标经过图片抖动

1、示例样式

<style type="text/css">ul{list-style:none;margin:0;padding:0;}ul li{vertical-align:bottom;}.img_box { width:900px; height:150px; margin:0px auto;}.img_box li{ width:200px; float:left; height:135px; border:1px solid #eee; padding:3px; margin-left:8px;}body { margin-top: 165px;}</style>

2、示例html代码

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

3、引用jquery

<script type="text/javascript" src=""></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>

4、jump.js中内容

<script>

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

</script>

这几年大多是昆明空运来的，