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请求报文 ...
随机推荐
- 2018/2/27 Activiti教程之创建流程篇(与Springboot整合版)一
因为电脑还在托运中,现在手上这台垃圾电脑实在是没法玩微服务,所以趁着这两天玩玩Activiti吧. 说实话,在学习Activiti中走了N多弯路,最大的原因就是网上没有一个完整(好)的教程,甚至连官方 ...
- 使用GSON解析JSON文件
package com.pingyijinren.test; /** * Created by Administrator on 2016/5/19 0019. */ public class App ...
- Tomcat服务器调优
一,目标:优化tomcat来提高访问的并发能力. 服务器提供的内存,cpu,以及硬盘的性能对数据的处理起决定性作用. tomcat的3种运行模式 tomcat的运行模式有3种: 1. bio默认的模式 ...
- list去重精简代码版
List<String> list = new ArrayList<>(); list.add("111"); list.add("111&quo ...
- oracle常用函数积累
--oracle常用函数积累-- --1.字符串长度:LENGTH ,语法: CONCAT(string) --示例 select LENGTH('AA_BB') from dual;--结果:5 - ...
- 基于cocos2d-x-3.2学习Box2D（一）
cocos版本号:cocos2d-x-3.2 环境:Win7+VS2013 因为一些太底层的实现我如今的能力学习不到,仅仅能做一些简单的笔记,供以后翻阅.假设别人可以得到帮助,莫大的荣幸. 一.创建世 ...
- 解决Vue打包后背景图片路径错误问题
1.原因解析 当用vue-cli自动构建项目后,有两种运行方法,分别是: npm run dev : 提供一个开发的环境,自动热更新,资源使用绝对路径,所以可以正常看到背景图片. npm run bu ...
- Django打造大型企业官网（五）
4.6.切换轮播图的箭头样式以及显示和隐藏 templates/news/index.html <span class="arrow left-arrow">‹< ...
- 一个有趣的问题:ls -l显示的内容中total究竟是什么？
当我们在使用ls -l的命令时,我们会看到例如以下类似的信息. 非常多人可能对于第一行的total 12的数值并非非常在意,可是你是否想过,它到底是什么意思? man中的说明,我们能够看出total的 ...
- linux服务器上的mysql允许远程连接
首先进入mysql: 输入GRANT ALL PRIVILEGES ON *.* TO 'root'@'%' IDENTIFIED BY '123456' WITH GRANT OPTION; 这里是 ...