JAVASCRIPT DOM编程艺术读书笔记

第十章实现动画效果

var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")"; 第一个参数是个字符串，所以需要单引号!!! move_elem = setTimeout(repeat,interval);　　//复制给一个变量，当我们想取消一个正在排队等待执行的函数，可以用clearTimeout(move_elem);   interval参数表示在多少秒之后执行函数(单位是毫秒)

var xpos = parseInt(elem.style.left);　　//parseInt提取整数，比如50px，使用这个函数后返回的就是50  当然还有parseFloat

CSS overflow属性，可以对内容进行裁剪，只让一部分内容显示，他可以有四种取值

1：visible 不可裁剪一出内容，浏览器将溢出内容显示在容器之外，内容全部可见

2：hidden 隐藏溢出内容，溢出容器区域的内容被隐藏，只有一部分可见

3：scroll 类似于hidden 但是多出了一个滚动条，可以滚动看到隐藏内容

4：auto 类似于scroll 但只有容器发生溢出是才自动显示出一个滚动条，如果内容没有溢出，不显示滚动条

position设置为relative (0，0)坐标将会重新定义相对定位，参照父级原始点

javascript 允许我们为元素创建属性，比如

var elem = document.getElementById(elementID);

elem.movement = setTimeout(repeat,interval);　　//elem.movement 这很像创建一个变量 但是这个变量只是专属于元素elementID

抽象的通用函数moveElement如下

function moveElement(elementID,final_x,final_y,interval) { if(!document.getElementById) return false; if(!document.getElementById(elementID)) return false; var elem = document.getElementById(elementID); if(elem.movement)　　　　　　　　　　//有的时候会出现第一个函数还没执行完，我们又跑去执行第二个函数，这种情况下 可能出错  所以我们价格判断 然后clearTimeout
    {
        clearTimeout(elem.movement);
    } if(!elem.style.left)   elem.style.left = "0px"; if(!elem.style.top)    elem.style.top = "0px"; var xpos = parseInt(elem.style.left); var ypos = parseInt(elem.style.top); var dist = 0; if(xpos == final_x && ypos == final_y) return true; /* Math对象 　　ceil方法,向大于方向舍入为最接近的整数  floor方法，向小宇方向舍入为最接近的整数  round方法，将任意浮点数舍入为与之最接近的整数 */ if(xpos < final_x)
    {
        dist = Math.ceil((final_x - xpos)/10);　　　　//每次移动十分之一，加快移动速度  xpos += dist;
    } else 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 += dist;
    } else 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(repeat,interval);
}

    <div id="slideshow"> <img src="topics.gif" alt="building blocks of web design" id="preview"> </div>
这一段只是为了javascript而存在的，可以在js中实现这段 需要注意的是： #preview{  position:absolute; } 这一段在CSS中不可以缺少，否则实现不了动画效果！！