【js编程艺术】小制作五

时间：2017-01-21 13:13:14 阅读：263 评论：0 收藏：0 [点我收藏+]

标签：pre out timeout jin math typeof absolute height type

1.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Web Design</title>
    <link rel="stylesheet" type="text/css" href="styles/list.css">
</head>
<body>
    <h1>Web Design</h1>
    <p>These are the things you should know</p>
    <ol id="linklist">
        <li>
            <a href="images/shuangyu.jpg">shuangyu</a>
        </li>
        <li>
            <a href="images/baiyang.jpg">baiyang</a>
        </li>
        <li>
            <a href="images/jinniu.jpg">jinniu</a>
        </li>
        <li>
            <a href="images/shuangzi.jpg">shuangzi</a>
        </li>
    </ol>
    <script type="text/javascript" src="scripts/prepareSlideshow.js"></script>
</body>
</html>

2.css

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

3.js

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


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(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;
    }
    if(xpos < final_x){
        dist = Math.ceil((final_x - xpos) / 10);
        xpos = xpos + dist;
    }
    if(xpos > final_x){
        dist = Math.ceil((xpos - final_x) / 10);
        xpos = xpos - dist;
    }
    if(ypos < final_y){
        dist = Math.ceil((final_y - xpos) / 10);
        ypos = ypos + dist;
    }
    if(ypos > final_y){
        dist = Math.ceil((xpos - 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);
}

function prepareSlideshow(){
    if(!document.getElementsByTagName) return false;
    if(!document.getElementById) return false;

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

    var slideshow = document.createElement("div");
    slideshow.setAttribute("id", "slideshow");
    var preview = document.createElement("img");
    preview.setAttribute("src", "images/shuangbaijinshuangzi.gif");
    preview.setAttribute("alt", "buliding blocks of web design");
    preview.setAttribute("id", "preview");
    slideshow.appendChild(preview);
    var list = document.getElementById("linklist");
    insertAfter(slideshow, list);
    var links = list.getElementsByTagName("a");
    
    links[0].onmouseover = function(){
        moveElement("preview", 0, 0, 10);
    }

    links[1].onmouseover = function(){
        moveElement("preview", -100, 0, 10);
    }

    links[2].onmouseover = function() {
        moveElement("preview", -200, 0, 10)
    }

    links[3].onmouseover = function() {
        moveElement("preview", -300, 0, 10)
    }
}

addLoadEvent(prepareSlideshow);

【js编程艺术】小制作五

标签：pre out timeout jin math typeof absolute height type

原文地址：http://www.cnblogs.com/libra-yong/p/6336846.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行