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. noip模拟赛 卖书

    分析:模拟题,只是有几个地方需要注意一下:第一个人必须支付5元,找零15元可以找一张10元一张5元,也可以找3张5元. #include <cstdio> #include <cst ...

  2. Network(poj 3694)

    题意:一个无向图可以有重边,下面q个操作,每次在两个点间连接一条有向边,每次连接后整个无向图还剩下多少桥(注意是要考虑之前连了的边,每次回答是在上一次的基础之上) /* tarjan+LCA 先用ta ...

  3. Thinkphp5.0 的Db操作

    Thinkphp5.0 的Db操作 连接操作: <?php namespace app\index\controller; use think\Controller; use think\Db; ...

  4. poj——3728 The merchant

    The merchant Time Limit: 3000MS   Memory Limit: 65536K Total Submissions: 5055   Accepted: 1740 Desc ...

  5. MongoDB学习day01--非关系型数据库

    1.数据库和文件的主要区别: 1.1数据库有数据库表/行和列的概念,让我们存储操作数据方便 1.2数据库提供了方便的接口,让java.php..net.nodejs很方便的实现增删改查 2.NoSQL ...

  6. socker地址API

    大端字节序是指一个整数的高位字节存储在内存的低地址处,低位字节存储在内存的高地址处.小端字节序是指整数的高位字节存储在内存的高地址处,低位字节则存储在内存的低地址处. 现代pc大多采用小端字节序,故小 ...

  7. 【python】一些好的学习网址

    http://www.cnblogs.com/BeginMan/p/3179302.html http://www.cnblogs.com/huxi/category/251137.html http ...

  8. 使用RoboCopy 命令[转载]

    经常进行文件管理操作的朋友们,不满意于Windows系统内置的复制功能,因为它太龟速了.于是大家就使用FastCopy.TeraCopy之类的软件来加速复制,但是你是否知道Windows 7已经内置快 ...

  9. {head first} --- networking 1

    Head first系列的书确实非常好,深入浅出解说网络的组成.让曾经那些生涩的概念生动起来. Chapter 1 维修物理网络 CAT5电缆: 两端为RJ-45接头(水晶头).内部为UTP(非屏蔽双 ...

  10. C#中的函数式编程:递归与纯函数(二) 学习ASP.NET Core Razor 编程系列四——Asp.Net Core Razor列表模板页面

    C#中的函数式编程:递归与纯函数(二)   在序言中,我们提到函数式编程的两大特征:无副作用.函数是第一公民.现在,我们先来深入第一个特征:无副作用. 无副作用是通过引用透明(Referential ...