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编程艺术】小制作五的更多相关文章

  1. 【js 编程艺术】小制作一

    最近在看js编程艺术,照葫芦画瓢,做了一个小网页.作为一枚前端渣渣,遇到了好多坑,在这里就不提了. 首先是html代码 /*gallery.html*/<!DOCTYPE html> &l ...

  2. 【js编程艺术】小制作六

    1.html /* movie.html*/<!DOCTYPE html> <html> <head> <meta charset="utf-8&q ...

  3. 【js 编程艺术】小制作四

    1. html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <t ...

  4. 【js 编程艺术】小制作三

    1.html文件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  5. 【js 编程艺术】小制作二

    首先是一个html文档 /* explanation.html */<!DOCTYPE html> <html> <head> <meta charset=& ...

  6. 【js编程艺术】 之有用的函数

    学习js的过程中有几个有用的函数. //添加事件函数 function addLoadEvent(func) { var oldonload = window.onload; if(typeof wi ...

  7. JS 编程艺术

    JS艺术片段剪贴 getFullDate: function (date) { //返回 YYYY年MM月DD日 var year = month = day = ' '; if (isNaN(dat ...

  8. Google V8编程详解（五）JS调用C++

    http://blog.csdn.net/feiyinzilgd/article/details/8453230 最近由于忙着解决个人单身的问题,时隔这么久才更新第五章. 上一章主要讲了Google ...

  9. JavaScript DOM 编程艺术·setInterval与setTimeout的动画实现解析

    先贴上moveElement()函数的大纲,为了方便观看,删了部分代码,完整版粘到文章后面. function moveElement(elementID,final_x,final_y,interv ...

随机推荐

  1. nginx 红黑树详解

    1 介绍 这部分终于整理完了,太耗时间了,留下来备忘吧! 之前看STL源码时,只是研究了红黑树的插入部分.在stl源码剖析的书中,也没有涉及到删除操作的分析,这次对删除操作也进行了详细的研究, 并且还 ...

  2. CSS文字垂直居中和font-family属性

    1.单行文字的垂直居中 单行文字垂直居中比较简单,直接让行高==盒子高度即可. 2.多行文字居中 多行文字居中,只需简单计算一下盒子的上padding即可.计算公式:padding-top=(盒子的高 ...

  3. Gradle依赖项学习总结，dependencies、transitive、force、exclude的使用与依赖冲突解决

    http://www.paincker.com/gradle-dependencies https://docs.gradle.org/current/userguide/dependency_man ...

  4. web项目编译出错时，原因之一，可能是build path 中order and Export引起

    build path中的order and Export,如果两个libarary中有相同功能的jar包,则编译器会选择顺序在前的jar包中相应的类作为编译所需. 所以,当项目jar包较多的时候,如果 ...

  5. 转 [ javascript面向对象技术

    以下文章来自iteye,作者是 sdcyst ,个人主页 http://www.iteye.com/topic/288813 类变量/类方法/实例变量/实例方法先补充一下以前写过的方法:在javasc ...

  6. CDOJ 1269 ZhangYu Speech

    预处理打表,sum[i][j]表示1.....i这些数字中 j 有几个.然后就很好处理询问了. #include<stdio.h> #include<math.h> #incl ...

  7. (简单) POJ 3074 Sudoku, DLX+精确覆盖。

    Description In the game of Sudoku, you are given a large 9 × 9 grid divided into smaller 3 × 3 subgr ...

  8. (中等) HDU 1043 Eight，经典搜索问题。

    Problem Description The 15-puzzle has been around for over 100 years; even if you don't know it by t ...

  9. RestTemplate 发送Post 多个参数请求

    MultiValueMap<String, String> requestEntity = new LinkedMultiValueMap<>(); requestEntity ...

  10. label中添加图片

    创建NSTextAttachment的对象,用来装在图片 将NSTextAttachment对象的image属性设置为想要使用的图片 设置NSTextAttachment对象bounds大小,也就是要 ...