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. [HAOI2011]Problem b 题解

    题目大意: 对于给出的n个询问,每次求有多少个数对(x,y),满足a≤x≤b,c≤y≤d,且gcd(x,y)=k. 思路: 设f(k)为当1≤x≤n,1≤y≤m,且n≤m,使gcd(x,y)=k的数对 ...

  2. [luoguP1045] 麦森数（快速幂 + 高精度）

    传送门 这道题纯粹是考数学.编程复杂度不大(别看我写了一百多行其实有些是可以不必写的). 计算位数不必用高精时刻存,不然可想而知时间复杂度之大.首先大家要知道一个数学公式 logn(a*b)=logn ...

  3. 【NOIP2017】

    NOIP2015 省Rank136 NOIP2016 省Rank165 NOIP2017 求进省Rank前100

  4. 【ZJOI2017 Round1练习&BZOJ4774】D3T2 road（斯坦纳树，状压DP）

    题意: 对于边带权的无向图 G = (V, E),请选择一些边, 使得1<=i<=d,i号节点和 n − i + 1 号节点可以通过选中的边连通, 最小化选中的所有边的权值和. d< ...

  5. 【重要】MySQL常见面试题

    1. 主键 超键 候选键 外键 主 键: 数据库表中对储存数据对象予以唯一和完整标识的数据列或属性的组合.一个数据列只能有一个主键,且主键的取值不能缺失,即不能为空值(Null). 超 键: 在关系中 ...

  6. Linux下汇编语言学习笔记16 ---

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

  7. poj——2367 　Genealogical tree

    Genealogical tree Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 6025   Accepted: 3969 ...

  8. mybatis返回list很智能很简答的，只需要配置resultmap进行类型转换，你dao方法直接写返回值list<对应的object>就行了啊

    mybatis返回list很智能很简答的,只需要配置resultmap进行类型转换,你dao方法直接写返回值list<对应的object>就行了啊 dao方法 public List< ...

  9. 扩展GCD 中国剩余定理(CRT) 乘法逆元模版

    extend_gcd: 已知 a,b (a>=0,b>=0) 求一组解 (x,y) 使得 (x,y)满足 gcd(a,b) = ax+by 以下代码中d = gcd(a,b).顺便求出gc ...

  10. 【面试加分项】java自己定义注解之解析注解

    我之前的博客中说明过自己定义注解的声明今天我们来看看怎样对我们自己定义的注解进行使用. 1.我们在程序中使用我们的注解. 上一篇中我们自己定义了一个注解: @Target(ElementType.FI ...