【干货】JavaScript DOM编程艺术学习笔记10-12【完】

十、用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、表单

增加了许多输入控件类型，如电话，邮件等

十二章 略

本书完，下面要自己选择一个合适的库学习使用。