10.1—最简单的动画

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

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

HTML：

  1. <!DOCTYPE HTML>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8"/>
  5.         <title>jiaxinjia</title>
  6.         <script src="script/01.js"></script>
  7.     </head>
  8.     <body >
  9.         <h1>what is your name?</h1>
  10.         <p id="zxc">WDFEVS!</p>
  11.         <img src="img/2.jpg" id="asd" width="50" height="50"/>
  12.     </body>
  13. </html>

JS：

  1. function positionq(){
  2.     var po = document.getElementById("zxc");
  3.     po.style.position="absolute";
  4.     po.style.left = "50px";
  5.     po.style.top = "100px";
  6.     moveElement("zxc", 500, 300, 20);
  7.  
  8.     var po2 = document.getElementById("asd");
  9.     po2.style.position = "absolute";
  10.     po2.style.left = "50px";
  11.     po.style.top = "150px";
  12.     moveElement("asd", 500, 400, 30);
  13. }
  14.  
  15. function moveElement(element, final_x, final_y, interval){
  16.     var po = document.getElementById(element);
  17.     var xpos = parseInt(po.style.left);
  18.     var ypos = parseInt(po.style.top);
  19.     if(xpos == final_x && ypos == final_y) return true;
  20.     if(xpos>final_x){
  21.         xpos--;
  22.     }
  23.     if(xpos<final_x){
  24.         xpos++;
  25.     }
  26.     if(ypos>final_y){
  27.         ypos--;
  28.     }
  29.     if(ypos<final_y){
  30.         ypos++;
  31.     }
  32.     po.style.left = xpos +"px";
  33.     po.style.top = ypos +"px";
  34.     var repeat = "moveElement('"+element+"',"+final_x+","+final_y+","+interval+")";
  35.     movement = setTimeout(repeat, interval);
  36. }
  37.  
  38. function addLoadEvent(func){
  39.     var oldonload = window.onload;
  40.     if(typeof window.onload != "function"){
  41.         window.onload = func;
  42.     }else{
  43.         window.onload = function(){
  44.             oldonload();
  45.             func();
  46.         }
  47.     }
  48. }
  49.  
  50. 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. SOJ 3300_Stockholm Coins

    [题意]给n个数,求一个数,使这个数能且只能由(n个数每个至少出现一次)表示.输出满足条件的最小的数. [分析](完全背包)如果有满足条件的最小的数,那么这个数只能是这n个数的和total,通过记录每 ...

  2. SQLSERVER数据库管理员的专用连接DAC

    出处: http://www.cnblogs.com/lyhabc/archive/2012/09/23/2698702.html DAC:Dedicated Admin Connection 当SQ ...

  3. GDAL源码编译

    转自阿Fai, GDAL源码编译 在这里,我使用源码编译出C#可以使用的dll静态文件. 一.简单的编译 1.简单的认识 首先进入GDAL的源代码目录,可以看到有几个sln为后缀的文件名,比如make ...

  4. 1.spring boot要求最低jdk1.8，平安默认1.6问题，-》安装JDK1.8 2.maven 3.3.3要求最低jdk1.7->安装jdk 1.8

    1.spring boot要求最低jdk1.8,平安默认1.6问题,->安装JDK1.82.maven 3.3.3要求最低jdk1.7->安装jdk 1.8

  5. [大雾雾雾雾] 告别该死的 EFCore Fluent API

    [EF Core Oracle  列名大小写问题] [EF Core Oracle column name case problem] [EF Core PostgreSql 列名大小写问题] [EF ...

  6. jQuery源代码解析（1）—— jq基础、data缓存系统

    闲话 jquery 的源代码已经到了1.12.0版本号.据官网说1版本号和2版本号若无意外将不再更新,3版本号将做一个架构上大的调整.但预计能兼容IE6-8的.或许这已经是最后的样子了. 我学习jq的 ...

  7. ABAP学习之旅——多种方式建立模块化功能

    在ABAP中.有多种方法能够建立模块化的功能. 以下依次对其种三种进行介绍. 一.            使用子程序(Subroutine) 1.      基本的语法: FORM subname. ...

  8. vue全局注册与局部注册的写法

    vue全局注册是每个实例化的vue都可以使用,而局部则是实例化注册的那个可以用.举个例子,看看写法: <div id="app"> <p>页面载入时,inp ...

  9. 微信JSSDK使用指南

        这篇文章主要来说说微信JSSDK的一些配置和微信分享的使用,包括从前端sdk文件引入到server端和微信server的交互. 另外Tangide已经把一些工作做好了.我会简要说一说怎么把它用 ...

  10. HFile存储格式

    Table of Contents HFile存储格式 Block块结构 HFile存储格式 HFile是參照谷歌的SSTable存储格式进行设计的.全部的数据记录都是通过它来完毕持久化,其内部主要採 ...