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. 1 problem was encountered while building the effective model [FATAL] Non-parseable POM F:\MavenRepository\org\apache\maven\plugins\maven-resources-plugin\2.6\maven-resources-plugin-2.6.pom: start tag

    Multiple annotations found at this line: - No plugin found for prefix 'war' in the current project a ...

  2. 【BZOJ4872】分手是祝愿（期望DP）

    题意: B 君在玩一个游戏,这个游戏由 n 个灯和 n 个开关组成,给定这 n 个灯的初始状态,下标为 从 1 到 n 的正整数.每个灯有两个状态亮和灭,我们用 1 来表示这个灯是亮的,用 0 表示这 ...

  3. 在mysql数据库中，文章表设计有啥好的思路

    Q: 用mysql设计一张文章表,不知道有啥好的思路! 我是这样的,应为考虑附件和图片,所以我的文章表除了有varchar(1000)的文章内容,还设置了个Bolb接收附件和图片. 我用的是mysql ...

  4. 关于FFM (Field-aware Factorization Machines) 的几篇博客

    深入FFM原理与实践 http://tech.meituan.com/deep-understanding-of-ffm-principles-and-practices.html#mjx-eqn-e ...

  5. Jmeter执行java脚本结束时提示：The JVM should have exited but did not.

    使用jmeter对dubbo进行压测时,需要使用jmeter的sampler里的java请求 使用./jmeter.sh -n -t test.jmx -l test.jmx -o -e test后台 ...

  6. CF# 368 D2 D

    很容易想到可以它操作序列弄成有向图,果断深搜.但我开始竟然用了一种特醇的方法,每个书架做一次深搜,复杂度O(nq),跑到57个test就不动了.看看代码吧 #include <iostream& ...

  7. Ubuntu 16.04 LTS 搭建LAMP

    1. LAMP是一系列自由和开源软件的集合,包含了Linux.Web服务器(Apache).数据库服务器(MySQL)和PHP(脚本语言). Apache2 Web 服务器的安装 sudo apt i ...

  8. ym——Android怎样支持多种屏幕

    转载请注明本文出自Cym的博客(http://blog.csdn.net/cym492224103),谢谢支持! 原文链接:http://developer.android.com/guide/pra ...

  9. antd 的 Table 遇到的 bug

    1.报错情况 /* autoprefixer: off */ filter: progid\:DXImageTransform\.Microsoft\.Blur(PixelRadius\=1, Mak ...

  10. SpringMVC DispatcherServlet初始化过程

    先来上一张类的结构图: 图里仅仅画了跟初始化相关的方法. 首先DispatcherServlet也是一个Servlet,初始化从init()方法開始. 以下就详细看看ini()是怎么实现的吧. 1.S ...