/********************主页动画脚本实现***********************/

function moveElement(elementID,final_x,final_y,interval){         //参数说明：移动元素的ID，移动的x坐标值，y坐标值，时间

                //向后兼容，判断旧浏览器

                if(!document.getElementById) return false;

                if(!document.getElementById(elementID)) return false;

                //获取元素

                var elem = document.getElementById(elementID);

                //判断图片是否已经有movement属性

                if(elem.movement){

                    clearTimeout(elem.movement);

                }

                //优化：判断left、top属性是否存在并初始化

                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);

                //判断元素所在边界

                if(xpos == final_x && ypos == final_y) {

                    return true;

                }

                //改进动画效果

                if(xpos >final_x){

                    var dist = Math.ceil(( xpos- final_x)/10);

                    xpos = xpos -dist;

                }

                if(xpos <final_x){

                    var dist = Math.ceil((final_x - xpos)/10);

                    xpos = xpos +dist;

                }

                if(ypos <final_y){

                    var dist = Math.ceil((final_y - ypos)/10);

                    ypos = ypos + dist;

                }

                if(ypos >final_y){

                    var dist = Math.ceil((ypos - final_y)/10);

                    ypos = ypos -dist;

                }

                elem.style.left = xpos+"px";

                elem.style.top = ypos+"px";

                //执行moveElement()函数

                var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";

                elem.movement = setTimeout(repeat,interval);

}

/****************V2在页面生成动画效果的代码**********************/

function prepareSlideshow(){

    //判断浏览器是否支持

    if(!document.getElementById) return false;

    if(!document.getElementsByTagName) return false;

    //判断元素是否存在

    if(!document.getElementById("intro")) return false;

    //动态生成html代码

    var intro = document.getElementById("intro");

    var slideshow = document.createElement("div");               //预留退路，如果用户禁掉js，则不出现不该出现的div

    slideshow.setAttribute("id","slideshow");

    var preview = document.createElement("img");

    preview.setAttribute("src","./images/slideshow.png");

    preview.style.position = "relative";                        //外部设置的postion获取不到，所以在这里设置

    preview.setAttribute("id","preview");

    slideshow.appendChild(preview);

    insertAfter(slideshow,intro);

    //获取元素

    var links = document.getElementsByTagName("a");

    for(var i= 0; i<links.length; i++){

        links[i].onmouseover = function(){

            var destination = this.getAttribute("href");

            if(destination.indexOf("webDesign.html") != -1){

                moveElement("preview",0,0,5);

            }

            if(destination.indexOf("about.html") != -1){

                moveElement("preview",-150,0,5);

            }

            if(destination.indexOf("photos.html") != -1){

                moveElement("preview",-300,0,5);

            }

            if(destination.indexOf("live.html") != -1){

                moveElement("preview",-450,0,5);

            }

            if(destination.indexOf("contact.html") != -1){

                moveElement("preview",-600,0,5);

            }

        }

    }

}

addLoadEvent(prepareSlideshow);