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. [luoguP1494] 岳麓山上打水 && [luoguP2744] [USACO5.3]量取牛奶Milk Measuring

    传送门 传送门 dfs选取集合,dp背包判断 虽然我觉的会TLE.. 但是的确是AC了 #include <cstdio> #include <cstring> #includ ...

  2. [TyvjP1050] 最长公共子序列（DP）

    传送门 f[i][j] 表示第 1 个串匹配到第 i 位,第 2 个串匹配到第 j 位的答案. f[i][j] = max(f[i - 1][j], f[i][j - 1])    (a[i] != ...

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

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

  4. QT-Embedded-4.5.3在海思35xx上移植

    QT4.5.3在海思3520A上移植步骤-修订版 2015年3月29日星期日, 16:59:03 1.首先要保证已经安装了海思的交叉编译器: #arm-hi  + Tab key to show wh ...

  5. codeforces Gym 100735 D、E、G、H、I

    http://codeforces.com/gym/100735 D题 直接暴力枚举 感觉这道题数据有点问题 为什么要先排下序才能过?不懂.. #include <stdio.h> #in ...

  6. hdu - 1104 Remainder (bfs + 数论)

    http://acm.hdu.edu.cn/showproblem.php?pid=1104 注意这里定义的取模运算和计算机的%是不一样的,这里的取模只会得到非负数. 而%可以得到正数和负数. 所以需 ...

  7. 从零开始写STL-容器-list

    从零开始写STL-容器-list List 是STL 中的链表容器,今天我们将通过阅读和实现list源码来解决一下问题: List内部的内存结构是如何实现的? 为什么List的插入复杂度为O(1)? ...

  8. 转 POJ分类

    OJ上的一些水题(可用来练手和增加自信) (poj3299,poj2159,poj2739,poj1083,poj2262,poj1503,poj3006,poj2255,poj3094)初期: 一. ...

  9. linux下crontab安装和使用（定时任务）

    在Unix和Linux的操作系统之中,cron可以让系统在指定的时间,去执行某个指定的任务,crontab命令常用于管理对应的cron. 一.crontab在线安装 yum -y install vi ...

  10. python操作mysql方法和常见问题

    http://www.cnblogs.com/ma6174/archive/2013/02/21/2920126.html 安装mysql模块 sudo easy_install mysql-pyth ...