JavaScript编程艺术-第10章-10.1-动画
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-动画的更多相关文章
- JavaScript编程艺术-第6章（JavaScript美术馆改进版）代码
基于[第4章(JavaScript美术馆)代码]进行改进(***HTML与JS分离***) (*亲测可用) HTML: JS: CSS:
- JavaScript编程艺术-第7章代码汇总（2）
[7.4节] 重回“JavaScript美术馆”代码 ***亲测可用*** HTML: JS:
- JavaScript编程艺术-第7章代码汇总（1）
1.document.write()(HTML与JS未分离) HTML: JS: 2..innerHTML(直接覆盖) HTML: JS: 3.getAttribute.setAttribute.ge ...
- JavaScript 编程艺术-第4章（JavaScript美术馆）代码
功 能:在同一个网页上切换显示不同的图片与文本(*亲测可用) 使用属性: a) document.getElementById(" ") ——返回一个与给定的id属性值的 ...
- JavaScript编程艺术-第8章-8.6.1-显示“缩略词语表”
8.6.1-显示“缩略词语表” ***代码亲测可用*** HTML: JS: ***end***
- JavaScript编程艺术-第10章-10.2-实用的动画
10.2-实用的动画 ***代码亲测可用*** HTML: <!DOCTYPE HTML> <html> <head> <meta charset=" ...
- JavaScript DOM编程艺术第四章 — JavaScript图片库案例研究
这一章通过JavaScript图片库案例,学习了一些DOM属性. HTML代码 <!DOCTYPE html> <html> <head> <meta cha ...
- JavaScript取消默认控件并添加新控件（DOM编程艺术第11章）
这一章实现的这个功能我研究了好久,这个思路我感觉已经是现在的我要膜拜的了,我感觉我的逻辑还是有些问题. 第一个问题:vid.height与vid.videoHeight vid.height = vi ...
- 前端开发工程师 - 03.DOM编程艺术 - 第1章.基础篇(下)
第1章.基础篇(下) Abstract: 数据通信.数据存储.动画.音频与视频.canvas.BOM.表单操作.列表操作 数据通信(HTTP协议) HTTP事务: 客户端向服务器端发送HTTP请求报文 ...
随机推荐
- [luoguP1037] 产生数（floyd + 高精度）
传送门 先用 floyd 求出每一个数可以变成那些数. 然后利用乘法原理求解,需要高精度. 代码 #include <cstdio> #include <cstring> #i ...
- [BZOJ1179] [Apio2009]Atm（tarjan缩点 + spfa）
传送门 题意 N个点M条边的有向图 每个点有点权 从某一个结点出发 问能获得的最大点权和 一个点的点权最多被计算一次 N<=500000 M<=500000 思路 先tarjan缩点,然后 ...
- input range音乐进度条
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- Linux下汇编语言学习笔记22 ---
这是17年暑假学习Linux汇编语言的笔记记录,参考书目为清华大学出版社 Jeff Duntemann著 梁晓辉译<汇编语言基于Linux环境>的书,喜欢看原版书的同学可以看<Ass ...
- TCP/IP学习笔记（4）------ICMP，ping，traceroute
IMCP协议介绍 当传送IP数据包发生错误--比如主机不可达,路由不可达等等,ICMP协议将会把错误信息封包,然后传送回给主机.给主机一个处理错误的机会,这 也就是为什么说建立在IP层以上的协议是可能 ...
- Ubuntu 16.04中XMind 8导致Java内存溢出的问题解决（硬盘卡死，桌面卡死）
XMind使用的是Java进行开发,如果出现内存溢出的问题,那么一定是桌面快捷方式的问题,解决方法是直接修改快捷方式里面的内容,修改如下: [Desktop Entry] Encoding=UTF-8 ...
- Ubuntu 16.04出现chmod: 无效模式："a"的问题解决
命令: chmod a+x file1 提示:注意文件的类型,如果用在文件夹上是不行的,但是文件确实可以的.
- USB2.0的最高传输速率
USB2.0除了拥有USB1.1中规定的1.5Mbps和12Mbps两个传输模式以外,还增加了480Mbps高速数据传输模式(注:第二版USB2.0的传输速率将达800Mbps,最高理想值1600Mb ...
- jQuery—— jQuery get方法+一般处理程序处理文本框内容
网上常常看到这种交互方式,当去一个站点注冊username的时候,假设文本框内没有输入数据,或者数据输入的内容格式不正确.就会将文本框变成红色来提示你输入的内容有误. 自己将这个文本框验证的方式改变了 ...
- AE After Effect 如何分段渲染
如果只要第一段的话,你把要输出的那段首尾处分别按下B键和N键,这样输出时就会只输出这一段了(拖动首尾的栏目修改起始和终止的时间):如果是批量渲染的话你只要在这些不同的合成层里,每个按下ctrl+M键, ...