<script type="text/javascript">
   window.onload=function() {
//        var oLi = document.getElementsByTagName('li');
//        for (var i = 0; i < oLi.length; i++) {
//            oLi[i].timer=null;
//            oLi[i].onmousemove = function () {
//                startMove(this, 600);
//            }
//            oLi[i].onmouseout = function () {
//                startMove(this, 300)
//            }


       var Li1=document.getElementById('li1');
       var Li2=document.getElementById('li2');
       Li1.onmousemove=function(){
           startMove(this,'height',300);
       }
       Li1.onmouseout=function(){
           startMove(this,'height',100);
       }
       Li2.onmousemove=function(){
           startMove(this,'width',500);
       }
       Li2.onmouseout=function(){
           startMove(this,'width',300);
       }

function getStyle(obj,attr) {
   if(obj.currentTarget){
       return obj.currentTarget[attr];
   }else{
       return getComputedStyle(obj.false)[attr];
   }
}
//var timer=null;

       function startMove(obj,attr,iTarget) {
           clearInterval(obj.timer);
           obj.timer=setInterval(function () {
               var icur=parseInt(getStyle(obj,attr));
               var speed=(iTarget-icur)/8;
               speed= speed>0?Math.ceil(speed):Math.floor(speed);
               if(icur == iTarget){
                   clearInterval(obj.timer);
               }else{
                   obj.style[attr]=icur+speed+'px';
               }
           },30)
       }
   }
</script>