JavaScript编程艺术-第10章-10.2-实用的动画

10.2-实用的动画

***代码亲测可用***

HTML：

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>LIST</title>
        <script type="text/javascript" src="script/01.js"></script>
        <style type="text/css" media="screen">
            @import url("01.css");
        </style>
    </head>
    <body >
        <h1>Web Design</h1>
        <p>There are the things you should know.</p>
        <ol id="linklist">
            <li><a href="http://www.baidu.com">Structure</a></li>
            <li><a href="http://www.baidu.com">Presentation</a></li>
            <li><a href="http://www.baidu.com">Bechavior</a></li>
        </ol>
    </body>
</html>

JS：

function prepareSlideshow(){
    var slideshow = document.createElement("div");
    slideshow.setAttribute("id", "slideshow");
    
    var preview = document.createElement("img");
    preview.setAttribute("src","img/j.jpg");
    preview.setAttribute("alt", "edsvfdc");
    preview.setAttribute("id", "preview");
    slideshow.appendChild(preview);
    
    preview.style.position = "absolute";
    preview.style.left = "0px";
    preview.style.top = "0px";
    
    var list = document.getElementById("linklist");
    insertAfter(slideshow, list);
    
    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){
    var elem = document.getElementById(elementID);
    if(elem.movement){
        clearTimeout(elem.movement);
    }
    
    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){
        xpos--;
    }
    if(xpos<final_x){
        xpos++;
    }
    if(ypos>final_y){
        ypos--;
    }
    if(ypos<final_y){
        ypos++;
    }
    elem.style.left = xpos + "px";
    elem.style.top = ypos + "px";
    var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
    elem.movement = setTimeout(repeat, interval);
}

function addLoadEvent(func){
    var oldonload = window.onload;
    if (typeof window.onload != "function"){
        window.onload = func;
    }else{
        window.onload = function(){
            oldonload();
            func();
        }
    }
}

function insertAfter(newElement, targetElement){
    var parent = targetElement.parentNode;
    if(parent.lastChild == targetElement){
        parent.appendChild(newElement);
    }else{
        parent.insertBefore(newElement, targetElement.nextSibling);
    }
}

addLoadEvent(prepareSlideshow);

CSS：

#slideshow{
    width: 100px;
    height: 100px;
    position: relative;
    overflow: hidden;
}

***end***

相关阅读:
NW.js开发环境的搭建
 EXPORTS与MODULE.EXPORTS的区别
 搭建 webpack + React 开发环境
 require，import区别？
数据库中图片的二进制存储和显示
 二进制图片存储问题
 单线程（Thread）与多线程的区别
 软件测试心得--悲催我
 2015年-年度总结
 人生当中第一次转正
原文地址：https://www.cnblogs.com/sunshine-blog/p/7065258.html