【干货】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{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、表单

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

十二章 略

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