十、用JavaScript实现动画效果
鼠标放到链接上，每次只显示图片的一小部分，加快加载速度。
js:
function prepareSlideshow(){
//对象检测
if(!document.getElementsByTagName) return false;
if(!document.getElementById) return false;
if(!document.getElementById("linklist")) return false;
//创建窗口元素
var slideshow=document.createElement("div");
slideshow.setAttribute("id","slideshow");
//创建图片元素
var preview=document.createElement("img");
preview.setAttribute("src","images/topics.gif");
preview.setAttribute("alt","building blocks of web design");
preview.setAttrubute("id","preview");
//将图片添加到窗口
slideshow.appendChild(preview);
var list=document.getElementById("linklist");
//将窗口放在链接表后面
insertAfter(slideshow,list);
//对每一个链接响应事件用函数moveElement
var links=list.getElementsByTagName("a");
links[0].onmouseover=function(){
moveElement("preview",-100,0,10);
}
links[1].onmouseover=function(){
moveElement("preview",-200,0,10);
}
links[2].onmouseover=function(){
moveElement("preview",-300,0,10);
}
}
function moveElement("elementID",final_x,final_y,interval){
//对象检测
if(!document.getElementById) return false;
if(!document.getElementById("elementID")) return false;
var elem=document.getElementById(elementID);
//如果元素已经有一个movement属性，用clearTimeout函数进行复位
if(elem.movement) clearTimeout(elem.movement);
//若果没有style位置属性，就设置为0
if(!elem.style.left) elem.style.left="0px";
if(!elem.style.top) elem.style.top="0px";
//用parseInt函数提取出字符串前面的数值，并转换为数值
var xpos=parseInt(elem.style.left);
var ypos=parseInt(elem.syle.top);
var dist=0;
//检测与目标位置关系
if(xpos==final_x&&ypos==final_y) return true;
if(xpos<final_x){
//用Math对象的ceil方法，向大于方向舍入为最接近的证书
dist=Math.ceil((final_x-xpos)/10);
xpos=xpos+dist;
if(xpos>final_x){
dist=Math.ceil((xpos-final_x)/10);
xpos=xpos-dist;
if(ypos<final_y){
dist=Math.ceil((final_y-ypos)/10);
ypos=ypos+dist;
if(ypos>final_y){
dist=Math.ceil((ypos-final_y)/10);
ypos=ypos-dist;
}
//将数值转换为属性值
elem.style.left=xpos+"px";
elem.style.top=ypos+"px";
//还不懂
var repeat="moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
//用elem的属性movement来代替全局变量，如果用全局变量的话setTimeout是可以执行，但鼠标指针在链接间快速移动的话，动画将变得混乱，我们需要一个只与正在被移动的那个元素有关的变量，可以为元素创建属性
elem.movement=setTimeout(repeat,interval);
}
css:
#slideshow{width:100px; height:100px; position:relative; overflow:hidden;}
#preview{position:absolute;}
十一、HTML5
使用HTML5之前最好加一个检测工具Modernizr，是一个js库，能提供一些不同的css类名及特性检测属性，是必不可少的，下载下来后放在head里引用这个js文件。
1、canvas
可以通过该元素动态创建和操作图形图像
2、video audio
之前是用object对象引入各种播放器插件，现在可以用自带的这两个标签
但要注意的是，由于各个浏览器支持的视频格式不一样，引用时要将三个主要格式都放上，最好放上下载链接，最后在加个flash保底
还可以改变标准播放控件的外观
3、表单
增加了许多输入控件类型，如电话，邮件等
十二章 略
本书完，下面要自己选择一个合适的库学习使用。