10.1—最简单的动画

***代码亲测可用***

动画：让元素位置随着时间而不断地发生变化

HTML：

<!DOCTYPE HTML>

<html>

    <head>

        <meta charset="utf-8"/>

        <title>jiaxinjia</title>

        <script src="script/01.js"></script>

    </head>

    <body >

        <h1>what is your name?</h1>

        <p id="zxc">WDFEVS!</p>

        <img src="img/2.jpg" id="asd" width="50" height="50"/>

    </body>

</html>

JS：

function positionq(){

    var po = document.getElementById("zxc");

    po.style.position="absolute";

    po.style.left = "50px";

    po.style.top = "100px";

    moveElement("zxc", 500, 300, 20);

    var po2 = document.getElementById("asd");

    po2.style.position = "absolute";

    po2.style.left = "50px";

    po.style.top = "150px";

    moveElement("asd", 500, 400, 30);

}

function moveElement(element, final_x, final_y, interval){

    var po = document.getElementById(element);

    var xpos = parseInt(po.style.left);

    var ypos = parseInt(po.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++;

    }

    po.style.left = xpos +"px";

    po.style.top = ypos +"px";

    var repeat = "moveElement('"+element+"',"+final_x+","+final_y+","+interval+")";

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

        }

    }

}

addLoadEvent(positionq);

***end***

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

  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.2-实用的动画

    10.2-实用的动画 ***代码亲测可用*** HTML: <!DOCTYPE HTML> <html> <head> <meta charset=" ...

  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. [Oracle, MySQL] Oracle通过dblink连接MySQL

    http://blog.csdn.net/dbanote/article/details/10488581 版权声明:本文为博主原创文章,未经博主允许不得转载. 业务上有这么一个需求,需要把Oracl ...

  2. hihoCoder#1036 Trie图

    原题地址 看了这篇博文,总算是把Trie图弄明白了 Runtime Error了无数次,一直不知道为什么,于是写了个脚本生成了一组大数据,发现果然段错误了. 调试了一下午,总算闹明白了,为什么呢? 1 ...

  3. 【bzoj1965】[Ahoi2005]SHUFFLE 洗牌 - 快速幂

    为了表彰小联为Samuel星球的探险所做出的贡献,小联被邀请参加Samuel星球近距离载人探险活动. 由于Samuel星球相当遥远,科学家们要在飞船中度过相当长的一段时间,小联提议用扑克牌打发长途旅行 ...

  4. 【ZJOI2017 Round1后记】

    2017.4.1: NOIP+Round1综合成绩出来,标准分离续命线差了80分,果然还是联赛坑挖太大了…… 不管怎么说能续命的话还是要试一下的…… 发毒誓:Round2前不打手游,不看NGA,不看星 ...

  5. [bzoj5343][Ctsc2018]混合果汁_二分答案_主席树

    混合果汁 bzoj-5343 Ctsc-2018 题目大意:给定$n$中果汁,第$i$种果汁的美味度为$d_i$,每升价格为$p_i$,每次最多添加$l_i$升.现在要求用这$n$中果汁调配出$m$杯 ...

  6. 饭卡-HDU2546(01背包)

    http://acm.hdu.edu.cn/showproblem.php?pid=2546 饭卡 Time Limit: 5000/1000 MS (Java/Others)    Memory L ...

  7. Ubuntu 16.04通过Magent搭建Memcached集群（转）

    一.下载Magent 官网:https://code.google.com/archive/p/memagent/downloads 离线版本:(链接: https://pan.baidu.com/s ...

  8. Java：删除某文件夹下的所有文件

    import java.io.File;public class Test{ public static void main(String args[]){ Test t = new Test(); ...

  9. Scala-LIST/Tuple/Map

    环境: CentOS 6.3 LIST(列表) 代码: $ cat list.scala var mylist = List(1,2,3) println(mylist) var mylist1 = ...

  10. td里面嵌套img标签后如何消除图片间隔

      td里面嵌套image标签后如何消除图片间隔 CreateTime--2018年3月7日16:18:12 Author:Marydon 情景还原: <body> <div sty ...