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. CALayer之 customizing timing of an animation

    customizing timing of an animation Timing is an important part of animations, and with Core Animatio ...

  2. Java Web 总结

    Java Servlet 总结 Servlet 简介 Servlet 是什么? 运行在Web服务器上的应用程序,作为浏览器和服务器之间的中间层. 与CGI功能类似,优点在于 性能更好 在Web服务器的 ...

  3. 2017-10-02-afternoon

    T1 最大值(max) Time Limit:1000ms   Memory Limit:128MB 题目描述 LYK有一本书,上面有很多有趣的OI问题.今天LYK看到了这么一道题目: 这里有一个长度 ...

  4. Java开发笔记（九十九）定时器与定时任务

    前面介绍了线程的几种运行方式,不管哪种方式,一旦调用了线程实例的start方法,都会立即启动线程的事务处理.然而某些业务场景在事务执行时间方面有特殊需求,例如期望延迟若干时间之后才开始事务运行,又如期 ...

  5. session问题总既然（深入理解）&Token问题理解&sso单点登陆理解实现

    一.Session使http协议成为有状态协议(浏览器cookie本地这个session,服务器端也有这个session) 1.ajax前端登陆无法保存session,造成无法维持登陆状态(http本 ...

  6. 根据身份证号，取得行政区划的Javascript实现

    原文:http://www.cnblogs.com/baibaluo/archive/2011/06/03/2071255.html#2585076 项目里需要一个根据身份证号,取得发证地行政区划的的 ...

  7. SpringMVC学习指南-前言

    SpringMVC是Spring框架中用于Web应用快速开发的一个模块. SpringMVC基于Spring框架.Servlet和JSP. ------------------------------ ...

  8. Android系统优化

    这些事实上就是优化rom 的一些实用小技巧. 认为非常多还是实用的. Build.prop (编辑 /system/build.prop 文件(须要root, 能够用文件管理器或者其它root exp ...

  9. ionic/cordova 真机调试

    android下简单,连接手机后,直接: myProjectPath>ionic run android ios下比较麻烦点,要先装ios-deploy: ​sudo npm install - ...

  10. 关于The hierarchy of the type TestBeforeAdvice is inconsistent的问题

    今天准备写一个spring aop的demo,创建了TestBeforeAdvice类,该类实现了MethodBeforeAdvice接口,eclipse报了"The hierarchy o ...