javascript动画,JavaScript动画原理

怎样用javascript实现网页的加载动画

思路的问题。

一般我们只依靠onload或者document.ready事件来判断页面是否加载完毕，因为loading状态没有意义。因为页面完全加载之前，我们无法了解哪些东西已经加载了，如果这个时候调用js或者html元素可能产生错误。

页面加载之前是没有任何事件的。所谓加载之前的动画是形如以下的代码

html

body

onload="第一个div隐藏，第二个div显示"

div

img

src='loading.gif'

style="width:

100%;"

/

/div

div

style="diaplay:

none;"

!--页面内容在这里加载--

/div

/body

/html

相关问答

Q1: JavaScript单击图片,图片以动画形式放大为原来的1.5倍,动画时间为3秒怎么做

1、点击JavaScript图片。

2、通过点击之中换成img的src属性。

3、换成属性之后，将图片设置成动画形式放大原来的1.5倍。

4、在设置中找到动画时间，将动画时间设为3秒即可。

Q2: CSS3动画和js动画各有什么优劣

CSS3的动画的优点：

1.在性能上会稍微好一些，浏览器会对CSS3的动画做一些优化（比如专门新建一个图层用来跑动画）

2.代码相对简单

但其缺点也很明显：

1.在动画控制上不够灵活

2.兼容性不好

3.部分动画功能无法实现（如滚动动画，视差滚动等）

JavaScript的动画正好弥补了这两个缺点，控制能力很强，可以单帧的控制、变换，同时写得好完全可以兼容IE6，并且功能强大。但想想CSS动画的transform矩阵是C++级的计算，必然要比javascript级的计算要快。另外对库的依赖也是一个很让人头疼的问题。

所以，对于一些复杂控制的动画，使用javascript会比较靠谱。而在实现一些小的交互动效的时候，就多考虑考虑CSS吧。

Q3: 如何让多个 JavaScript 动画按一定的顺序排队执行

其实这个和JavaScript没有太多关系，所有的程序设计都会遇到这样的问题。就是多个操作或者运算需要按照一定的顺序依次执行，这样就需要一个队列来处理。就像在银行排队取钱一样，某一个操作需要到达队伍的最前端之后才能执行。

在JavaScript中利用基础的Array对象就可以构造一个简单的队列。可以将每一次的动画效果作为一个基本元操作，每触发一次就放入队列中，如果在队列顶端那么就直接执行，否则就等待。每当一个操作执行完成之后就触发队列顶端的操作，这样就能够按照队列依次执行完毕了。

Q4: 是不是用到javascript的网页都不是静态页面，而是动态页面？

是。有javascript的网页仍是静态网页，不是动态网页。不是网页上有动态的元素才是动态网页。假如一个网页有javascript花花绿绿的，它仍是静态网页，所谓的静态、动态是指能否与数据库产生交互。只有PHP、asp、JSP这些网页，才是动态网页。静态网页与动态网页的区别，动态网页以.asp、.jsp、.php、.perl、.cgi等形式为后缀，并且在动态网页网址中有一个标志性的符号——“？”，静态网页：以.htm、.html、.shtml、.xml等形式为后缀。

在服务器端运行的程序、网页、组件，属于动态网页，它们会随不同客户、不同时间，返回不同的网页，例如HTML, ASP、PHP、JSP、ASP.net、CGI等。静态网页运行于客户端的程序、网页、插件、组件，属于静态网页，下面列出的四种情况都不一定是动态页面，带有音频和视频，带有flash动画，带有css动画，带有javascript动画。千锋教育截止目前已在北京、深圳、上海、广州、郑州、成都、大连等20余个核心城市建立直营校区，服务近20万学员、近千所高校和数万家企业。