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***

JavaScript编程艺术-第10章-10.2-实用的动画的更多相关文章

  1. JavaScript编程艺术-第6章（JavaScript美术馆改进版）代码

    基于[第4章(JavaScript美术馆)代码]进行改进(***HTML与JS分离***) (*亲测可用) HTML: JS: CSS:

  2. JavaScript编程艺术-第7章代码汇总（2）

    [7.4节] 重回“JavaScript美术馆”代码 ***亲测可用*** HTML: JS:

  3. JavaScript编程艺术-第7章代码汇总（1）

    1.document.write()(HTML与JS未分离) HTML: JS: 2..innerHTML(直接覆盖) HTML: JS: 3.getAttribute.setAttribute.ge ...

  4. JavaScript 编程艺术-第4章（JavaScript美术馆）代码

    功      能:在同一个网页上切换显示不同的图片与文本(*亲测可用) 使用属性: a) document.getElementById(" ") ——返回一个与给定的id属性值的 ...

  5. JavaScript编程艺术-第8章-8.6.1-显示“缩略词语表”

    8.6.1-显示“缩略词语表” ***代码亲测可用*** HTML: JS: ***end***

  6. JavaScript编程艺术-第10章-10.1-动画

    10.1—最简单的动画 ***代码亲测可用*** 动画:让元素位置随着时间而不断地发生变化 HTML: <!DOCTYPE HTML> <html> <head> ...

  7. JavaScript DOM编程艺术第四章 — JavaScript图片库案例研究

    这一章通过JavaScript图片库案例,学习了一些DOM属性. HTML代码 <!DOCTYPE html> <html> <head> <meta cha ...

  8. JavaScript取消默认控件并添加新控件（DOM编程艺术第11章）

    这一章实现的这个功能我研究了好久,这个思路我感觉已经是现在的我要膜拜的了,我感觉我的逻辑还是有些问题. 第一个问题:vid.height与vid.videoHeight vid.height = vi ...

  9. 前端开发工程师 - 03.DOM编程艺术 - 第1章.基础篇(下)

    第1章.基础篇(下) Abstract: 数据通信.数据存储.动画.音频与视频.canvas.BOM.表单操作.列表操作 数据通信(HTTP协议) HTTP事务: 客户端向服务器端发送HTTP请求报文 ...

随机推荐

  1. [NOIP2005] 提高组 洛谷P1051 谁拿了最多奖学金

    题目描述 某校的惯例是在每学期的期末考试之后发放奖学金.发放的奖学金共有五种,获取的条件各自不同: 1) 院士奖学金,每人8000元,期末平均成绩高于80分(>80),并且在本学期内发表1篇或1 ...

  2. Linux下汇编语言学习笔记54 ---

    这是17年暑假学习Linux汇编语言的笔记记录,参考书目为清华大学出版社 Jeff Duntemann著 梁晓辉译<汇编语言基于Linux环境>的书,喜欢看原版书的同学可以看<Ass ...

  3. Linux下汇编语言学习笔记26 ---

    这是17年暑假学习Linux汇编语言的笔记记录,参考书目为清华大学出版社 Jeff Duntemann著 梁晓辉译<汇编语言基于Linux环境>的书,喜欢看原版书的同学可以看<Ass ...

  4. tsdb import 相关

    今天一直在做opentsdb 大量导入数据的工作. 中间遇到了一些值得记录的问题, 这里随手记一下 明天好好整理 1. 多进程logger python的logging模块不支持多进程,但我们可以用s ...

  5. Delphi 2007 的重构功能

    Move 移动 1.将选定的静态函数从一个类移动到另一个类 2.将选中的类或接口移动到其他单元 Extract Interface 抽取接口 将选定的函数抽取到一个新的接口中 Extract Supe ...

  6. DELL T110II Server如何通过RAID 级别迁移的方式在OMSA下实现磁盘阵列扩容？

    目录: RAID 转移规则说明 操作步骤 本文介绍了 通过RAID 级别转换来实现扩容的方法注意:本文相关RAID的操作,仅供在测试环境里学习和理解戴尔PowerEdge服务器RAID控制卡的功能和使 ...

  7. samba服務器下文件夾chmod權限技巧

    需要的效果: samba下文件夹(abc)不可以被重命名.不可以被刪除,其所有子目录可读可写. 如何做到: chmod 777 -R abc   # -R 使得abc下所有数据继承可读可写权限 chm ...

  8. [Sqlite3] Sqlite Introduction

    Check whether you have sqlite3 installed: sqlite3 -version To create a new db: sqlite3 <filename. ...

  9. 再探gdb经常使用命令

     前面已经有了一篇对gdb经常使用命令的总结.见 http://blog.csdn.net/u011848617/article/details/12838875 这里对眼下学过的gdb命令进行了 ...

  10. makefile中的一点知识

    makefile文件里以下这一部分展开是什么样的呢? .. . mytarget=foo  $(mytarget): $(mytarget).c        gcc -o $(mytarget) $ ...