好今天就做这么一个效果：
当鼠标放在上面的时候，背景图片自动移动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div,ul,li{margin:0px;padding:0px;list-style:none;}
#menu{
width:600px;
height:45px;
margin:50px auto;
position: relative;
}
#menu .bg,.m{
width:120px;
height:45px;
background:#06f;
position: absolute;
left:0px;
top:0px;
z-index:8;
border-radius:5px;
}
#menu ul{
z-index:9;
position: relative;
}
#menu ul li{
width:120px;
text-align:center;
height:45px;
line-height:45px;
display:block;
float: left;
}
</style>
<script type="text/javascript" src="js/base.js"></script>
<script type="text/javascript">
window.onload=function(){
var oUl=song("#menu ul li").hover(function(){
var _this=this;
song(".m").menuXLyd(_this.offsetLeft);
},function(){
song(".m").menuXLyd(0);
});
}
</script>
</head>
<body>
<div id="menu">
<div class="m" id="bg"></div>
<ul>
<li>首页</li>
<li>关于我们</li>
<li>新闻中心</li>
<li>产品预览</li>
<li>联系我们</li>
</ul>
</div>
</body>
</html>看看js代码是如何实现的：
//专门为menu运动设置的
Base.prototype.menuXLyd=function(iTarget,fn){
var oLeft=0;
var ispeed=0;
for(var i=0;i<this.elements.length;i++){
_starMove(this.elements[i],iTarget,fn);
}
function _starMove(obj,iTarget,fn){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
ispeed+=(iTarget-obj.offsetLeft)/5;
ispeed*=0.7;
if(Math.abs(ispeed)<1 && Math.abs(iTarget-obj.offsetLeft)<1){
clearInterval(obj.timer);
obj.style.left=iTarget+"px";
if(fn){fn();}
}else{
oLeft=obj.offsetLeft+ispeed;
obj.style.left=oLeft+"px";
}
},30);
};
}专门写了这么一个方法，适用于左右移动：
实现原理：
速度：加速定
采用定时器的方法进行移动
那么停止的条件就是：
速度足够小 不足以运动一个动画 and 距离target的位置小于1 这样就可以停止定时器了。
否则：进行style的设置