如何给html页面添加动态等待效果

1、直接贴图：

在界面上贴一个gif动态等待效果图片

gif图片获取方式：网上找素材，会ps的可以自己制作

<img src="wait.gif" />

2、CSS3/SVG/HTML5 Canvas手动绘制等待效果：

这种效果：网上有很多类似素材，可以根据需要选择，或使用上述技术绘制

下面提供一个CSS3绘制的范例

<style>

.loading {

width:0

height:0

border-right:20px solid #fff

border-top:20px solid #000

border-left:20px solid #fff

border-bottom:20px solid #000

border-radius: 20px

-moz-border-radius: 20px

-webkit-border-radius: 20px

}

.loading {

animation: bganim 0.6s linear 0s infinite

-moz-animation: bganim 0.6s linear 0s infinite

-webkit-animation: bganim 0.6s linear 0s infinite

}

@keyframes bganim {

from { transform:rotate(0deg)} to { transform:rotate(360deg)}

}

@-moz-keyframes bganim {

from { -moz-transform:rotate(0deg)} to { -moz-transform:rotate(360deg)}

}

@-webkit-keyframes bganim {

from { -webkit-transform:rotate(0deg)} to { -webkit-transform:rotate(360deg)}

}

</style>

<label>CSS3效果</label>

<div class="loading"></div>

-------------------------------------------------

效果如下图：

运行机制很简单，先手动绘制一个静态的图，然后控制对应div进行360度旋转，即可实现

3、使用js等待效果插件(如：spin.js)

JS

-----------------------------------------------------

var opts = {

lines: 9,

length: 0,

width: 15,

radius: 20,

corners: 1,

rotate: 0,

direction: 1,

color: '#0101DF',

speed: 1,

trail: 34,

shadow: false,

hwaccel: false,

className: 'spinner',

zIndex: 2e9,

top: '50%',

left: '50%'

}

var target = document.getElementById('img_wait')

var spinner = new Spinner(opts).spin(target)

7

html

---------------------------------

<div id="img_wait"></div>

主要思想：\x0d\x0a首先要准备一张有连续帧的图片，然后利用HTML5Canvas的draw方法在不同的时间间隔绘制不同的帧，这样看起来就像动画在播放。\x0d\x0a关键技术点：\x0d\x0aJavaScript函数setTimeout()有两个参数，第一个是参数可以传递一个JavaScript方法，\x0d\x0a另外一个参数代表间隔时间，单位为毫秒数。代码示例：\x0d\x0asetTimeout(update,1000/30)\x0d\x0aCanvas的API-drawImage()方法，需要指定全部9个参数：\x0d\x0actx.drawImage(myImage,offw,offh,width,height,x2,y2,width,height)\x0d\x0a其中offw,offh是指源图像的起始坐标点，width,height表示源图像的宽与高，x2,y2表\x0d\x0a示源图像在目标Canvas上的起始坐标点。\x0d\x0a\x0d\x0a\x0d\x0a\x0d\x0a\x0d\x0a\x0d\x0aCanvasMouseEventDemo\x0d\x0a\x0d\x0a\x0d\x0avarctx=null//globalvariable2dcontext\x0d\x0avarstarted=false\x0d\x0avarmText_canvas=null\x0d\x0avarx=0,y=0\x0d\x0avarframe=0/롹*5+2\x0d\x0avarimageReady=false\x0d\x0avarmyImage=null\x0d\x0avarpx=300\x0d\x0avarpy=300\x0d\x0avarx2=300\x0d\x0avary2=0\x0d\x0awindow.onload=function(){\x0d\x0avarcanvas=document.getElementById("animation_canvas")\x0d\x0aconsole.log(canvas.parentNode.clientWidth)\x0d\x0acanvas.width=canvas.parentNode.clientWidth\x0d\x0acanvas.height=canvas.parentNode.clientHeight\x0d\x0aif(!canvas.getContext){\x0d\x0aconsole.log("Canvasnotsupported.PleaseinstallaHTML5compatiblebrowser.")\x0d\x0areturn\x0d\x0a}\x0d\x0a//get2Dcontextofcanvasanddrawrectangel\x0d\x0actx=canvas.getContext("2d")\x0d\x0actx.fillStyle="black"\x0d\x0actx.fillRect(0,0,canvas.width,canvas.height)\x0d\x0amyImage=document.createElement('img')\x0d\x0amyImage.src="../robin.png"\x0d\x0amyImage.onload=loaded()\x0d\x0a}\x0d\x0afunctionloaded(){\x0d\x0aimageReady=true\x0d\x0asetTimeout(update,1000ቺ)\x0d\x0a}\x0d\x0afunctionredraw(){\x0d\x0actx.clearRect(0,0,460,460)\x0d\x0actx.fillStyle="black"\x0d\x0actx.fillRect(0,0,460,460)\x0d\x0a//findtheindexofframesinimage\x0d\x0avarheight=myImage.naturalHeightǛ\x0d\x0avarwidth=myImage.naturalWidthǛ\x0d\x0avarrow=Math.floor(frameǛ)\x0d\x0avarcol=frame-row*5\x0d\x0avaroffw=col*width\x0d\x0avaroffh=row*height\x0d\x0a//firstrobin\x0d\x0apx=px-5\x0d\x0apy=py-5\x0d\x0aif(px

动态网页的意思!

动态网页是与静态网页相对应的，也就是说，网页 URL的后缀不是.htm、.html、.shtml、.xml等静态网页的常见形式，而是以.asp、.jsp、.php、.perl、.cgi等形式为后缀，并且在动态网页网址中有一个标志性的符号——“?”，如有这样一个动态网页的地址为:

这就是一个典型的动态网页URL形式。

这里说的动态网页，与网页上的各种动画、滚动字幕等视觉上的“动态效果”没有直接关系，动态网页也可以是纯文字内容的，也可以是包含各种动画的内容，这些只是网页具体内容的表现形式，无论网页是否具有动态效果，采用动态网站技术生成的网页都称为动态网页。

从网站浏览者的角度来看，无论是动态网页还是静态网页，都可以展示基本的文字和图片信息，但从网站开发、管理、维护的角度来看就有很大的差别。网络营销教学网站将动态网页的一般特点简要归纳如下:

(1)动态网页以数据库技术为基础，可以大大降低网站维护的工作量

(2)采用动态网页技术的网站可以实现更多的功能，如用户注册、用户登录、在线调查、用户管理、订单管理等等

(3)动态网页实际上并不是独立存在于服务器上的网页文件，只有当用户请求时服务器才返回一个完整的网页

(4)动态网页中的“?”对搜索引擎检索存在一定的问题，搜索引擎一般不可能从一个网站的数据库中访问全部网页，或者出于技术方面的考虑，搜索蜘蛛不去抓取网址中“?”后面的内容，因此采用动态网页的网站在进行搜索引擎推广时需要做一定的技术处理才能适应搜索引擎的要求。

-------------------------------------------------------------------------------------------------------------------------------

静态网页的意思!

静态网页是相对于动态网页而言，是指没有后台数据库、不含程序和不可交互的网页。你编的是什么它显示的就是什么、不会有任何改变。静态网页相对更新起来比较麻烦，适用于一般更新较少的展示型网站。

在网站设计中，纯粹HTML格式的网页通常被称为“静态网页”，早期的网站一般都是由静态网页制作的。静态网页的网址形式通常为:，也就是以.htm、.html、.shtml、.xml等为后后缀的。在HTML格式的网页上，也可以出现各种动态的效果，如.GIF格式的动画、FLASH、滚动字母等，这些“动态效果”只是视觉上的，与下面将要介绍的动态网页是不同的概念。

静态网页的特点简要归纳如下：

(1)静态网页每个网页都有一个固定的URL，且网页URL以.htm、.html、.shtml等常见形式为后缀，而不含有“?”

(2)网页内容一经发布到网站服务器上，无论是否有用户访问，每个静态网页的内容都是保存在网站服务器上的，也就是说，静态网页是实实在在保存在服务器上的文件，每个网页都是一个独立的文件

(3)静态网页的内容相对稳定，因此容易被搜索引擎检索

(4)静态网页没有数据库的支持，在网站制作和维护方面工作量较大，因此当网站信息量很大时完全依靠静态网页制作方式比较困难

(5)静态网页的交互性交叉，在功能方面有较大的限制

---