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. Apache Commons工具集简介（转）

    此文为转帖,原帖地址:http://zhoualine.iteye.com/blog/1770014

  2. 用saxon框架对xml数据进行过滤 - 程序员的天堂 - ITeye技术网站

    用saxon框架对xml数据进行过滤 博客分类: Java   Saxon 是一个 XSLT 和XQuery处理器.它是使用 XML 文档和样式表作为输入,然后生成结果文档作为输出的程序,它还包括了一 ...

  3. LintCode 面试题 旋转字符串

    1.题目描述 题目链接:http://www.lintcode.com/zh-cn/problem/rotate-string/ 给定一个字符串和一个偏移量,根据偏移量旋转字符串(从左向右旋转) 2. ...

  4. artTemplate-3.0（与项目实际结合）

    引入artTemplate.js <script type="text/javascript" src="${ctx}/assets/plugins/artTemp ...

  5. (简单) HDU 2612 Find a way，BFS。

    Description Pass a year learning in Hangzhou, yifenfei arrival hometown Ningbo at finally. Leave Nin ...

  6. [Unity Shader] 3D模型的简单属性

    每个3D对象是由顶点和面的.这被称为一个网格(Mesh).每个顶点有一个归一化的“normal”的向量,表示连接到该顶点的面的方向.这对于计算光照来说很重要.当计算漫反射和镜面反射的照明,normal ...

  7. iOS 开发之动画篇 - 从 UIView 动画说起

    毋庸置疑的:在iOS开发中,制作动画效果是最让开发者享受的环节之一.一个设计严谨.精细的动画效果能给用户耳目一新的效果,吸引他们的眼光 —— 这对于app而言是非常重要的. 本文作为动画文集的第一篇, ...

  8. mongodbVUE基本操作(转)

    基本操作: http://my.oschina.net/u/1026531/blog/188336

  9. 利用curl验证ssl网站(webservice)

    curl的用法: http://linux.about.com/od/commands/l/blcmdl1_curl.htm DER格式的cert转换为PEM格式(curl只接受PEM格式): ope ...

  10. linux内核——1.概述

    1.结构 linux中,我们把操作系统分为内核空间和用户空间.用户通过用户空间与操作系统打交道.用户要通过系统调用访问内核空间.下图为Linux体系结构,shell应该为在最顶层. 系统调用,下面链接 ...