javascript实现动画

位置：static fixed relative absolure

Static 是默认值

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

parseInt 将字符串转化为整数

设置目标渐进的移动

//设置目标渐进的移动 移动到目标位置停止
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);
}

隐藏预览图片的绝大部分，鼠标悬停在某个链接的上方时，只显示图片的一部分

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()函数对它进行复位

Math.ceil(number) number向上取整