JavaScript网站设计实践（三）设计有特色的主页，给主页链接添加JavaScript动画脚本

/********************主页动画脚本实现***********************/
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);