javascript实现动画

1. 位置：static fixed relative absolure
   Static 是默认值
2. setTimeout(“function”,interval) 经过预定的一段时间后执行
   第一个参数是函数的名字，第二个参数是设定的时间

//位置移动 每5秒改变一次
function positionMessage(){
    if(!document.getElementById) return false;
    if(!document.getElemenyById("message"))  return false;
    var elem=document.getElementById("message");
    elem.style.position="absolute";
    elem.style.left="50px";
    elem.style.top="100px";
    movement=setTimeout("moveMessage()",5000);//5秒改变一次位置

    }// JavaScript Document
    //每次位置的改变情况
    function moveMessage(){
            if(!document.getElementById) return false;
            if(!document.getElemenyById("message"))  return false;
            var elem=document.getElementById("message");
            elem.style.left="200px";
        }

//取消位置的移动
  clearTimeout(movement);

1. parseInt 将字符串转化为整数
2. 设置目标渐进的移动

 //设置目标渐进的移动 移动到目标位置停止
 function moveMessage(){
     if (!document.getElementById) return false;
     if(!document.getElementById("message"))  return false;
     var elem=document.getElementById("message");
     var xpos=parseInt(elem.style.left);//将字符串转化为整数值
     var ypos=parseInt(elem.style.top);
     if(xpos==200&&ypos==100){
         return true;
         }
         if(xpos<200)
         {xpos++;}
          if(xpos>200)
         {xpos--;}
          if(ypos<100)
         {ypos++;}
          if(ypos>100)
          {ypos--;}
          elem.style.left=xpos+"px";
          elem.style.top=ypos+"px";
          movement=setTimeout("message()",10);
     }

1. 隐藏预览图片的绝大部分，鼠标悬停在某个链接的上方时，只显示图片的一部分
   css中overflow用来显示图像的一部分，发生溢出时，对图像进行裁剪，效果是一部分在窗口中可见
   overflow属性可取值有4种，visible, hidden,scroll,auto
   visible:不裁剪溢出的内容，溢出的内容仍然显示在显示区域以外的地方
   hidden：裁剪溢出的内容，内容只显示在显示区域里，一部分内容在浏览器窗口是可见的
   scroll：对溢出的内容进行裁剪，但是会显示滚动条以便让永华看到内容的其他部分
   auto:浏览器真的发生内容溢出时才显示滚动条，没有溢出，就不显示滚动条
   6．当鼠标移动到相应的文字，显示图片相应的一部分

//显示一个400*400图像的一部分 100*100
<div id="slideshow"><img src="1.gif" alt="building blocks of web design" id="preview" /></div>


//css
#slidshow{
    width:100px;
    height:100px;
    position:relative;
    overflow:hidden;
    }
//javascript 实现图片移动 以显示不同的部分
function prepareSlideshow(){
    if(!document.getElemensByTagName)  return false;
    if(!document.getElementById) return false;
    if(!document.getElementById("preview')) return false;
    var preview=document.getElementById("preview');
    preview.style.position="absolute";
    preview.style.left="0px";
    preview.style.top="0px";
    var list=document.getElementById("linklist");
    var lists=list.getElementsByTagName("a");
    links[0].onmoseover=function(){
        moveElement("preview",-100,0,10);
        links[1].onmoseover=function(){
        moveElement("preview",-200,0,10);
        links[2].onmoseover=function(){
        moveElement("preview",-300,0,10);

        }

    }

问题：每当用户把鼠标指针悬停在某个链接上，不管上一次条用是否已经把图片移动到位，moveElement()函数都会被再次调用并试图把同一个元素移动到林给一个地方，如果鼠标速度足够快，就会导致动画效果滞后
解决方法：clearTimeout(movement);

//改进 moveMessage
if (elem.movement){
    clearTimeout(elem.movement);    //不论哪个元素移动，该元素都有一个movement的属性，如果该元素已经开始执行已经有了一个
    }                               //移动的属性，可以使用clearTimeout()函数对它进行复位

1. Math.ceil(number) number向上取整