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

var elem = document.getElementById(elementID);

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

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中不可以缺少，否则实现不了动画效果！！

function addControls(vid) {

    vid.removeAttribute("controls");　　//移除浏览器默认的控件

    var controls = document.createElement("div");
    controls.setAttribute("class","controls");

    var play = document.createElement("button");
    play.setAttribute("title","play");
//    play.innerHTML = ‘&#25BA;‘;
    play.innerHTML = ‘►‘;　　//note!!!

    controls.appendChild(play);

    vid.parentNode.insertBefore(controls,vid);
    
    play.onclick = function () {if(vid.ended)
            vid.currentTime = 0;

        if(vid.paused)
        {
            vid.play();
        }
        else
        {
            vid.pause();
        }
    }

    //利用play pasue ended事件来监控
    vid.addEventListener("play",function () {　　//当视频正在播放时 会触发play事件 跑这个函数
        play.innerHTML = ‘▐▐‘;
        play.setAttribute(‘paused‘, true);

    },false);　　　　　　//第三个参数为false 说明由外往里获取  true的话说明是由里王外获取

    vid.addEventListener("pause",function () {　　//当视频暂停时 会触发pause事件 跑这个函数
        play.removeAttribute(‘paused‘);
        play.innerHTML = ‘►‘;

    },false);

    vid.addEventListener("ended",function () {
        vid.pause();
    },false);

}