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请求报文 ...
随机推荐
- Linux清除arp缓存
arp缓存就是IP地址和MAC地址关系缓存列表.在Windows下 arp -d [$ip] 不指定IP地址时清除所有arp缓存.在Linux下 arp -d $ip 必须指定IP地址才能执行这条命令 ...
- Django开发:（1）django基础 & url控制器
HTTP请求协议 HTTP协议是Hyper Text Transfer Protocol(超文本传输协议)的缩写,是用于万维网(WWW:World Wide Web )服务器与本地浏览器之间传输超文本 ...
- 一个1x1px大小Data/Base64数据的gif透明图片
<img src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNg ...
- searchIndexer.exe占用过高CPU
1.searchIndexer.exe占用过高CPU很可能是Windows的索引损坏造成的. 这时候只要进入控制面板—索引选项—高级—重建即可解决 2. net stop "windows ...
- SaltStack学习系列之state常用模块
常用模块:cron,cmd,file,mount,ntp,pkg,service,user,group cmd模块 参数: name:要执行的命令 unless:用于检查的命令,只有unless指向的 ...
- Lua中..和#运算符的用法
Lua中..和#运算符的用法 样例 试试以下的样例就明确了在Lua编程语言提供的其它运算符: a = "Hello " b = "World" print(&q ...
- js 获取文件本地路径
1.代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...
- 在head里的CSS link 竟然粗如今body里了？
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcGVhY2Vfb2Zfc291bA==/font/5a6L5L2T/fontsize/400/fill/I0 ...
- LVS 负载均衡 （VS/DR模式 与 VS/TUN 模式）
一.VS/DR模式 ①.客户端将请求发往前端的负载均衡器,请求报文源地址是CIP,目标地址为VIP. ②.负载均衡器收到报文后,发现请求的是在规则里面存在的地址,那么它将目标MAC改为了RIP的MAC ...
- c#如何设置成：【当前打开的项目是什么，就默认它为启动项目】，不然新添或打开别的项目都要设置一次启动 [原创]VS2012中将当前选定项目做为启动项
主菜单→[工具]→[选项]→[项目和解决方案]→[生成并运行],选中“对于新解决方案,使用当前选定的项目作为启动项目” 应该是右键单击解决方案,点击属性打开,选中“当前选定内容”那一项,就可以把你正在 ...