如何用js settimeout 参数连接一个动画和一个网页

200个网页制作常见问题及解答(一)
我的图书馆
200个网页制作常见问题及解答(一)
常见问题 200个解答
1.在 软件中如何禁止右键菜单和缩放功能,如何完成双击 SWF文件时直接全屏显示?在第一帧中输入下面的动作代码:全屏:fscommand ("fullscreen", true)禁止缩放:fscommand ("allowscale", False)禁止右键菜单:fscommand ("showmenu", False)
2.如何制作 Loading?使用_framesloaded、_totalframes两个变量可以完成。
3.如何判断载入外部 swf文件的进度?可以使用载入 swf文件的_framesloaded、_totalframes两个变量,加上被载入动画的名称。
4.如何把在 Flash中输入的文本另存为一个文本文件? Flash自己不行!需要与其他软件联合来完成,如 、PERL。
5.经常听别人说到路径,在 Flash中路径起到一个什么作用呢?如果您用过 DOS,就可以很容易地理解 Flash的路径。简单地说,路径就是 Flash编程时变量或符号(元件)要经过的“路”。其方式跟 DOS一样,分成相对和绝对两种。
6.Flash编程用什么工具软件比较好?可以使用 ActionCl。先在任意一个文本编辑软件中写完程序之后,将程序部分拷贝至剪贴板,然后运行 ActionClip将之转化,再粘贴到 flash中即可。
7.怎样将 fla文件转成 avi文件? fla格式文件可以转成 mov格式,但没办法直接转成 avi格式文件,可以先通过转成 gif格式文件,再经过其他软件转成 avi格式文件。
8.如何在本机上测试 Loading?在播放时,再次按下下 Ctrl+Enter快捷键,或者是执行菜单栏中的“&带宽设置”命令。
9.Flash中怎样才能消除导入的锯齿?使用 BMP图像或矢量图。由于点阵问题,所以在导入图像之前应先查看这个图的像素大小,然后将图像文件转为 BMP格式文件,再在 Flash中执行“修改&位图&转换位图为矢量图”命令来图像。
10.如何使刷新后的页面会随机显示几个不同的 SWF中的某一个动画?假设有 6个 swf文件,分别命名为 movie0.swf, movie1.swf……movie5.swf。要使每刷新一次,就出现不同的界面,可运用一下动作代码:
LoadmovieNum("movie"+ran(5)+".swf")
11.如何屏蔽按钮上的手形指针?可以使用 mouse.hide();,然后再用 startDrag命令让一个箭头形的 MC被拖动就可以了。
12.如何让一个 MC调用另一个 MC里设置的一个变量?
在 mc里输入下面的语句: a = _root.mcname.b;其中,ab均为变量名,mcname为 mc的实体名,此语句是使本 mc的变量 a调用_root.mcname这个 mc里的变量 b。
13.在 Flash中如何打开 word文档? Flash不支持调使用 word文件,但浏览器可以直接打开.doc文档,所以可以使用 URL来解决,路径用绝对地址 ://www..../word.doc。
14.在 Actionscript的编辑窗口中怎样设置以使中文字体更清晰?可以更换 Flash的字体,也就是删除
FontsModern.fon,这样,编辑窗口的字体就好看多了。
15.Flash如何与连接?只能通过后台文件,如 CGI脚本、Active Pages(ASP)或 PersonalHomePage()等传递值到 Flash中,实现数据库的操作。
16.Adobe的 AdobeFlash Profeonal与 AdobeFlash Player之间有何不同? AdobeFlash Professional是用于丰富内容、用户界面和 应用的应用程序。 AdobeFlash Player是多平台客户端程序。用户必须并安装播放器才能查看 Flash的内容并与其。
17.Flash Player和 ShockwavePlayer之间有何不同? Flash Player和 Shockwave Player都是源自 Adobe的免费 Web播放器。它们的用途截然不同: Flash Player显示使用 AdobeFlash Professional创建的内容,如 Web应用程序前端、效果出众的网站用户界面、交互式在线广告,以及短篇到长篇的动画。 ShockwavePlayer显示使用 Director创建的内容,如高性能多用户游戏、交互式三维产品仿真、在线娱乐和培训应用程序。通过使用扩展模块,开发人员可以对 Shockwave Player的功能进行扩展,以便能够播放自定义构建的应用程序。
18.Flash如何与外部影片连接?使用 loadmovie语句即可。
19.如何找到放在窗口外边的面板?将 Windows下面的状态栏先放在最下面,然后缩放 Flash的窗口,仔细查找就可以看到面板露出的角,然后拖动就可以了。如果你的显示器分辨率是800 ×600那么把它调到 ,然后就可以看到丢失的面板了。
20.怎样控制动画的播放和停止?在 Flash中最基础的 Actionscript语句有stop、 goto、play等。使用这些语句可以控制动画的播放和停止。
21.怎样制作特殊的动画光标?利用 Flash中的 startDrag这个功能,可以制作比较常见的鼠标跟随效果,用以形成动画光标。
22.在应用 FsCommand动作时可以调用 Java script吗? FsCommand可以调用 函数 MovieName_DofsCommand装入 Flash动画。MovieName是 Flash动画的名字由 Embed标签的 Name属性或是 Object标签的 ID属性指定,如果 FlashPlayer的名字为 MYMOVIE,应该调用 JS函数名字为 MYMOVIE_DOFSCOMMAND。
23.Flash如何与后台连接?使用 LoadVars()对象的 send和 Load方法来发送和接收数据。
24.如何实现声音的暂停/播放?在执行 stop()命令时可以用sound对象的position属性取得当前声音文件的播放时间(毫秒),然后用start(time,loop)在当前位置播放即可。
25.如何定义二维?下面定义一个 20*20的二维数组,值全部为0。 sarray = []; for(vari = 0;i&=19;i++){ sarray[ i] = []; for(varj = 0;j&=19;j++){ sarray[ i][j] = 0; } } 26.如何打开指定属性的窗口?先使用 JS在 页面中定义函数,然后在 Flash中用 getURL()调用。
27.如何通过 MC中的按钮跳转场景?在要跳转的帧上加标签,通过标签跳转: goto-AndStop("yourlable")。
28.如何随机设置 MC颜色? MC实例名为"mc": mycolor=new Color("mc") mycolor.setRGB(random(0xffffff))
29.如何实现双击效果?把下面的代码放到按钮上: on(press){
time= getTimer()-down_
trace("ok");
down_time= getTimer();
30.如何使 MC始终跟随鼠标旋转?先计算 MC横纵坐标与鼠标横纵坐标的差值,然后用 Math.atan2()来计算旋转角度。
m_x = _root._xmouse-mc._x;
m_y = _root._ymouse-mc._y;
mc._rotation = PI=180/Math.PI*Math.atan2(m_y, m_x);
31.如何制作鼠标跟随效果?基础代码如下,其中 a为步长: mc._x+=(_root._xmouse-mc._x)/a mc._y+=(_root._ymouse-mc._y)/a
32.如何在 AS中创建类的继承?创建一个 MC的继承类: myClass=function(){ …… } myClass.prototype= new MovieClip();
33.怎样使用元件来优化Flash动画?多使用元件。如果电影中的元素有使用一次以上者,则应考虑将其转换为符号。重复使用符号并不会使电影文件明显增大,因为电影文件只需储存一次符号的图形数据。
34.如何使一个弹出窗口最大化?使用下面的语句即可:&script& self.moveTo(0,0) self.resizeTo(screen.availWidth,screen.availHeight) &/script&
35.怎样用图片来关闭窗口?使用 &A href="javascript:window.close()"&&IMG height=20 width=20 alt="关闭窗口 " src="close.gif" border=0&&/A&语句即可。
36.怎样禁止通过鼠标右键查看网页源代码?使用如下代码即可: &scriptlanguage=javascript& function click() {if(event.button==2){alert('你好,欢迎光临')}} document.onmousedown=click &/script&
37.怎样自动定时跳转到新的页面?使用 &META HTTP-EQUIV="Refresh" content= "4"; URL=http://自己的 URL"&语句可以实现。
38.怎样自动显示主页最后更新的日期?使用如下代码即可: &script& document.write("最后更新日期: "+document.lastModified+"&p&") &/script&
39.怎样使页面全屏显示?使用如下代码即可: &form& &input type="BUTTON" name="FullScreen"value="全屏显示"onClick="window.open( document.location,'big','fullscreen=yes')"& &/form&
40.怎样使鼠标完全被封锁,屏蔽鼠标右键和网页文字?使用如下代码即可:
&body oncontextmenu="return false" ondragstart= "return false" onstart="return false"&
41.怎样通过按钮来查看网页源代码?使用如下代码即可: &input type="BUTTON" value="查看源代码 " onClick= 'window.location = "view-source:" + window.location.href'name="BUTTON"&
42.如何在网页中调试 Javascript?有许多方式可以调试 Javascript。插入 alert进入代码是最常见的方式,可以提示变量的值、类型,函数参数,对象属性。如果用分支代码来支持分别做不同的事,可以使用 confirm来强制执行指定的分支功能。如果想能够剪切粘贴结果可使用 prompt。要想得到更详细的错误报告你可以使用 window.onerror或 try..catch语句。这会让代码直接运行,不会因某个错误而终止挂起,从而在代码执行完成后报告所有的错误。
43.怎样控制网页的整体属性?网页的主体部分位于&Body&、&/Body&这两个标签之间。&Body&作为一个标签,有许多相关的属性,这其中将包括网页的标题、网页颜色、背景图片等设置。
44.怎样设置文字的字体与样式?如果希望更改页面中的字体、字号和颜色,最好使用&FONT&标签。
45.怎样建立无序列表?无序列表是指以●、○、□等开头的,没有顺序的列表项目。它通常使用一个项目符号作为每条列表项的前缀。无序列表主要使用&UL&、&LI&几个标签和 Type属性。
46.怎样建立有序列表?有序列表使用编号,而不是项目符号来编排项目。列表中的项目采用数字或英文字母开头,通常各项目间有先后的顺序性。在有序列表中,主要使用 &OL&、&LI&两个标签和 type、start两个属性。
47.怎样在页面中插入图片?插入图片的标签只有一个,那就是&IMG&标签。但仅使用&IMG&标签是不够的,需要配合其他的属性来完成。
48.如何设置图片的图像映射链接?插入将要制作图像映射所需的图片文件,然后在图片标签中使用 USEMAP属性,即可实现图像映射链接。
49.怎样在 HTML中播放音乐?在页面中可以放置如 MP3音乐等多种多媒体内容,这可通过&Embed&标签实现,如果创建背景音乐,则通过&BGSOUND&标签实现。
50.怎样建立表单?表单是 HTML页面与浏览器端实现交互的重要手段。利用表单可以收集客户端提交的有关信息。表单是网页上的一个特定区域。这个区域是由一对 &FORM&标签定义的。
51.表单中常用的标签有哪些?输入标签 &INPUT&是表单中最常用的标签之一。常用的文本域、按钮等都使用这个标签。另外,通过&SELECT&和&OPTION&标签可以页面中的菜单和列表效果。&TEXTAREA&标签用来制作多行的文字域,可以在其中输入更多的文本。
52.HTML中的基本标签是什么?框架主要包括两个部分,—个是框架集,另一个就是框架。框架集是在一个文档内定义一组框架结构的 Html网页。框架集定义了在一个窗口中显示的框架数、框架的尺寸、载入到框架的网页等。而框架则是指在网页上定义的一个显示区域。在使用了框架集的页面中,页面的&BODY&标签被&FRAMESET&标签所取代,然后通过&FRAME&标签定义每一个框架。
53.HTML中框架的基本标签是什么?浮动框架是一种特殊的框架页面,在浏览器窗口中可以嵌套子窗口,在其中显示页面的内容。浮动框架通过&&标签实现。
54.怎样制作滚动文字?在 HTML页面中,可以实现如字幕滚动文字效果。在一个排版整齐的页面中,添加适当的滚动文字可以起到灵活页面的效果。这些可通过&MARQUEE&标签实现。
55.嵌入多媒体文件的标签是什么?在页面中可以放置如电影、SWF动画等多种多媒体内容,嵌入标签为&EMBED&。
56.页面头部的源信息标签包括哪些? &META&标签的功能是定义页面中的信息,这些文件信息并不会出现在浏览器页面的显示之中,只会显示在源代码中。&META&标签是实现元数据的主要标记,它能够提供文档的、作者、描述等多种信息,在 HTML的头部可以包括任意数量的&META&标记。
57.怎样设置页面的字符集? HTML页面的内容可以不同的字符集来显示,如中国常用的 GB码(简体中文),中国台湾地区常用的 BIG5码(繁体中文),欧洲地区常用的 ISO8859-1(英文)等。对于不同的字符集页面,如果用户的浏览器不能显示该字符,则浏览器中显示的都是乱码。这时就需要由 HTML语言来定义页面的字符集,用以告知浏览器以相应的内码显示页面内容。这也通过 &META&标签实现。
58.如何在网页中应用可以自动更新时间的效果?在页面中可以实现自动更新的时间,这通过 Javascript中的 Document对象来完成: &script&document.write(document.lastModified)&/ script&
59.怎样实现页面中的前进和后退?可以在页面中实现如同浏览器上按钮的前进与后退一样的功能,只需使用 Javascript的 history对象即可:
&input type="submit" name="Submit" value="前进 " onClick=history.go(1)&&input type="submit" name="Submit2" value="后退"onClick=history.go(-1)&
60.将网页设为首页的代码是什么?在网页中可以通过 Javascript代码将页面设置为浏览器的首页,期代码如下:
&a href="#" onClick="this.style.behavior='url(# default#homepage)';this.setHomePage('http://www.yourdomain.com');" &设为首页&/a&
61.去除浏览器滚动条的代码是什么?如果希望去除浏览器的滚动条,可以通过在 &body&语句内添加代码来实现: &bodyscroll=no&
62.怎样改变浏览器中鼠标的形状?通过样式改变鼠标形状,鼠标放在被此项设置修饰的区域上时,形状会发生改变。具体的形状包括: hand(手)、croair(交叉十字)、text(文本选择符号)、 wait(Windows的沙漏形状)、Default(默认的鼠标形状)、help(带问号的鼠标)、e-resize(向东的箭头)、 ne-resize(指向东北方的箭头)、n-resize(向北的箭头)、nw-resize(指向西北的箭头)、w-resize(向西的箭头)、sw-resize(向西南的箭头)、s-resize(向南的箭头)、se-resize(向东南的箭头)、auto(正常鼠标)。
63.如何为网页中的图像添加底片效果?通过 的 Invert可以实现图像底片的效果,Invert滤镜是把对象的可视化属性全部翻转,包括、饱和度和亮度值。
64.怎样将网页中的图像设置为水平翻转或垂直翻转?通过 CSS的 FlipH和FlipV滤镜可以实现图像的水平翻转和垂直翻转的效果。
65.怎样调整网页中图像的透明度?
通过 CSS的 Alpha滤镜可以实现图像的透明效果。“Alpha”属性是把一个目标元素与背景混合。设计者可以指定数值来控制混合的程度。这种“与背景混合”通俗地说就是一个元素的透明度。通过指定坐标,可以指定点、线、面的透明度。
66.如何将网页中的图像转换为灰度图像?通过 CSS的 Gray滤镜可以实现图像的灰度效果。
67.如何使网页中的图像产生 X射线效果?通过 CSS的 Xray滤镜可以实现图像的 X射线效果。Xray滤镜是让对象反映出它的轮廓并把这些轮廓加亮,也就是所谓的 X光片。
68.如何为网页中的对象添加波纹样式?通过 CSS的 Wave滤镜可以实现图像的波纹效果。
69.CSS在网页制作中一般有三种用法,具体在使用时应采用哪种用法?当有多个网页要用到的 CSS,采用外连 CSS文件的方式,这样网页的代码大大减少,修改起来非常方便;只在单个网页中使用的 CSS,采用文档头部方式;只有在一个网页一、两个地方才用到的 CSS,采用行内插入方式。
70.CSS的三种用法在一个网页中可以混用吗?三种用法可以混用,并且不会造成混乱。这就是它为什么称之为“层叠”的原因,浏览器在显示网页时是这样处理的:首先检查有没有行内插入式 CSS,有就执行,不用管本句的其它 CSS;其次检查头部方式的 CSS,有就执行;在前两者都没有的情况下再检查外连文件方式的 CSS。因此可看出,三种 CSS的执行优先级是:行内插入式、头部方式、外连文件方式。
71.在文档头部方式和外连文件方式的 CSS中都有&!--和--&代码,其作用是什么?这一对代码的作用是为了不引起低版本浏览器的错误。如果某个执行此页面的浏览器不支持 CSS,它将忽略其中的内容。
72.是不是需要懂很多 HTML标签或 CSS语法才能设计 CSS?事实上,您只要认得 P(段落 )、IMG (图像 )、 A(连结 )H1~ H6(标题 )等几个关键字即可,其它的 CSS语法可以由 自行产生。
73.有些网页中文字的超链接不会显示底线,这是怎麽制作出来的?
这也是 CSS的一种应用,语法如下:
A{ text-decoration:none}
74.为什么我做的网页在 中不能居中显示? IE浏览器只要在 body中定义了 text-align:center,就可以实现居中了,标准浏览器则需要在父级容器中定义为 margin: 0,才能居中。
75.怎样定义网页语言(字符集)?在过程中,首先要定义网页语言,以便访问者浏览器自动设置语言,而我们用所见即所得的 HTML工具时,都没有注意到这个问题,因为它是默认设置。要设置的语言可以在 HTML代码状态下找到: &meta http-equiv="Content Type" content="text/ charset=gb2312"&把 charset=gb2312改换成其它语言代码即可,比如英文 harset=en。
76.怎样防止别人把你的网页放到自己的框架里?因为框架的缘故,有许多人把别人的网页放置到自己的框架里,使之成为自己的一页。如果你要防止别人这样做,可以加入下列 Javascript代码即可,它会自动监测,,然后跳出别人的框架。
&script language="javascript"& if (self!=top) window.top.location.replace(self.location); &/script&
77.怎样测试浏览器并自动载入所需要的网页?目前微软和网景的浏览器并不能完全兼容所有网页,有的在某种浏览器里非常漂亮,而用其它浏览器查看时却一团糟。如果你需要测试浏览器,可以加入以下 Javascript代码并保存单独一个网页:
&script language="javascript"& functionTestBrowser(){' ie = ((navigator.appName==f1 "Microsoft Internet Explorer") & & (parseInt(navigator. appVersion)&= 3 ))
ns= ((navigator.appName== "Netscape")
(parseInt(navigator.appVersion)&= 3 )) if (ns){
setTimeout(''location.href="nn4.htm"'',10); } else{ setTimeout(''location.href="ie4.htm"'',10);
&/script&
78.怎样在网页中加入 E-mail链接并显示预定的主题?使用以下代码:
&a href=mailto:?subject=hello&
79.怎样让背景图像不滚动?使用以下代码: &body background="cnshell.gif" bgproperties= "fixed"&
80.怎样让背景图像不平铺? CSS样式表定义: &styletype="text/css"& &!-body { background-image: url(image/bg.gif); background-repeat:no-repeat} --& &/style&
81.怎样定义网页的关键字?在网页中加入关键字,可以供某些搜索站台机器人使用,它们会利用该关键字为你的网站做,这样,当别人用关键字搜索网站时,如果你的网页包含该关键字,就可以被列出。定义本网页关键字,可以加入以下代码:
&meta name="keywords" content="html,dreamweaver,flash,css"&
其中,content所包含的就是关键字,你可以自行设置。这里有个技巧,你可以重复某一个单词,这样可以提高自己网站的排行位置,如:
&meta name="keywords" content="dreamweaver, dreamweaver,dreamweaver"&
82.怎样链接网页的对象?有时链接发生在一个网页里,比如页面上半部分列出了目录,下部分列出了内容,而单击目录任何一个项目都可以跳到指定部分,可以在要被链接的内容部分设置如下代码:
&a name="#1"&&/a&
而要链接到以上设置的部分,可以进行如下编制:
&a href="index.htm#t1"&t1&/a&
83.怎样为不支持框架结构的浏览器指定内容?为了防止不支持框架结构的浏览器访问你的网页,可以在网页中加入以下内容:
&body& &noframes&本网页是框架结构,请下载新的浏览器浏览 &/noframes& &/body&
84.怎样删除表格边框?删除表格的边框,可以在表格的属性中加一句 “border="0"”即可,或者把 border设置为如下代码: &body&&tableborder="0" width="100%"& &tr& &td width="100%"&&/td&&/tr& &/table&&/body&
85.怎样隐藏在状态栏里出现的 Link信息?大家知道,当你指向一个链接时,该链接的信息会出现在浏览器状态栏里,如果需要隐藏信息,可以进行如下设置:
&a href="http://www.yufeng21.com" onMouver="window.status=''none'';return true"&test&/a&
如果想要指向一个链接时,浏览器状态栏里出现特定的信息,把 none改成你需要的文字即可。
86.怎样在网页中添加多媒体文件?有些多媒体文件无需其他程序就可以播放,而有许多多媒体文件需要外部程序的帮助,当浏览器下载不支持的格式时会调用外部程序。如果浏览器没有安装这种外部程序,那么浏览器会自动去下载;如果你需要加入多媒体格式,可设置如下代码:
&embed src="tt.ram" autostart="true" loop="2" width="80" height="30"&
87.怎样在网页中添加电子邮件表单提交?表单提交需要CGI程序的支持,但你也可以利用 E-mail提交,当设计好表单后,把 action内容加入邮件地址即可,如下:
&form method="" action="mailto:yourmail@ mail.com" enctype="text/plain"&
88.怎样在网页中添加最后修改日期?
在 body中加入以下代码即可:
&script Language="javascript"&
document.write("最后修改日期" + document.lastModified);
&/script&
89.如何清除页面中的框架结构?在链接属性中加入 target="_top"如下设置: &a href="http://www.yourdomain.com" target= "_top"&宇风多媒体&/a&当单击这个链接后,页面所有框架会被清除,并由该链接内容替代。
90.如何防止站点页面被任意链接?有许多好站点的页面会被其它站点任意链接,如果你不希望别人直接链接到站点内部去,可以通过经常更换页面文件名,如每十天改一次,这样来有效防止别人的任意链接。
91.如何避免网站的电子邮箱地址被搜索到?经常会收到不请自来的垃圾信件,如果你拥有一个站点并发布了你的 E-Mail链接,那么其他人会利用特殊工具搜索到这个地址并加入到他们的数据库中。要想避免 E-Mail地址被搜索到,可以在页面上不按标准格式书写 E-Mail链接,如 yourname at mail.com,它等同与 。
92.如何让访问者忽视缓冲页面?请在&head&与&/head&之间加入以下代码: &MEAT HTTP-EQUIV="Pragma" CONTENT= "no-"&
93.如何为页面制作幻灯片效果?如果想为访问者展示一系列的图片,并且页面自动每间隔一段时间刷新图片。假设要展示三副图片,为这三幅图片制作三个页面 1.htm,2.htm,3.htm。在每个页面的&head&与&/head&之间分别加入代码:
&META HTTP-EQUIV="Refresh" Content="6; URL=x.htm"&其中 1.htm指向 2.htm,2.htm指向 3.htm。
94.如何改变表单 submit按钮上的文字?把下面代码中的 value属性值改成你需要的文字即可。
&input type="submit" value="submit" name= "B1"&
95.如何加快页面图片的下载速度?当首页图片过少,而其它页面图片过多时,为了提高效率,可设置当访问者浏览首页时,后台进行其他页面的图片下载。方法是在首页加入如下代码:
&img src="cn.jpg" width=0 height=0&其中 width,height要设置为 0,cn.jpg为提前下载的图片名。
96.如何自动弹出对话框?在&body&与&/body&之间加入如下代码: &script LANGUAGE="javascript"&alert("弹出内容")&/script&
97.是否可以利用大写字体来书写 HTML标签?
对于大多数 HTML标签元素,你可以利用大写体或小写体及两者的混合体来书写标签元素。比如: &html&&/html&和&HTML&&/HTML&同等有效。但如果是特殊字符的标签元素,你只能使用小写体。
98.如何在页面中利用单击来关闭浏览窗口?在&BODY&与&/BODY&之间加入以下代码: &a href="javascript:window.close()"&关闭窗口 &/a&
99.在 Dreamweaver中采用行内插入式 CSS要手动输入代码吗?不用!先用 CSS面板定义好要用的 CSS,然后,在要插入 CSS的标签中插入:style="",再把刚定义的 CSS从后面拖到这个双引号中来,把花括号以外的部分删去即可。
100.如何给一部分文字添加背景色?给文字添加不同的颜色,只要在 Dreamweaver中的属性面板上选取文字的颜色即可,非常方便。但要给部分文字添加不同的背景色却没有相应的功能,这时,我们可以先做一个定义背景色的 CSS(如: bgstyle),再在 Dreamweaver中点击它既可完成。例如,定义一个淡黄色背景的 CSS,在应用时选取那段文字,再在 CSS面板上点一下 bgstyle即可。
[转]&[转]&[转]&[转]&
喜欢该文的人也喜欢&nbsp>&nbsp
&nbsp>&nbsp
&nbsp>&nbsp
说说大家都熟悉的网页动画技术
摘要:前言从古代手绘翻书动画,到胶片电影,再到多张静态图合成gif,这些都离不开一个术语叫帧。也就是我们需要绘制每一帧,然后控制一下帧与帧之间的时间间隔。然而相邻两帧之间的变化并不大,重复绘制浪费体力,幸亏计算机代码可以复制粘贴,然后修改一下变动的地方就可以了。等等,好像哪里不对。计算机代码除了可以复制粘贴,还有抽象能力。我们可以把需要复制粘贴的代码交给计算机来重复执行。把需要变动的地方,交给计算机来运算。而网页中具备运算能力的只有JS,其他的就只能是定义一下参数,剩下的就交给浏览
从古代手绘翻书动画,到胶片电影,再到多张静态图合成 gif, 这些都离不开一个术语叫 帧。
也就是我们需要绘制每一帧,然后控制一下帧与帧之间的时间间隔。
然而相邻两帧之间的变化并不大,重复绘制浪费体力, 幸亏计算机代码可以复制粘贴,然后修改一下变动的地方就可以了。
等等,好像哪里不对。
计算机代码除了可以复制粘贴,还有抽象能力。 我们可以把需要复制粘贴的代码交给计算机来重复执行。 把需要变动的地方,交给计算机来运算。
而网页中具备运算能力的只有 JS,其他的就只能是定义一下参数,剩下的就交给浏览器了。
这就是 JS 算编程,而 HTML、css 不算编程的原因。 相关讨论,回复内容+关键字 #你丫才码农#。
网页动画可以通过以下几种方式实现(gif、flash 除外),
作者知识面有限,如有遗漏,请留言通知我。 相关讨论,回复内容+关键字 #网页动画实现方式#。
css3 动画 SVG 动画 JS 动画(包括 css、SVG 的属性修改实现的动画)
作者认为 canvas、webGL 只能算是一种绘图方式。 他们的动画也都是通过 JS 修改参数来实现的。 相关讨论,回复内容+关键字 #canvas动画#。
最早 JS 通过 setTimeout()或者 setInterval()方法设置一个时间, 来控制帧与帧之间的时间间隔。
setTimeout()直接用跳出来终止下一帧。 setInterval()使用 clearInterval()来取消周期执行。
但是这样效果可能不够流畅,且会占用额外的资源。 相关讨论,回复内容+关键字 #你ST设置几毫秒#参考: http://www.cnblogs.com/chaogex/p/3960175.html?utm_source=tuicool&;utm_medium=referral
后来,有了一个 requestAnimationFrame(),让浏览器决定 最优帧速率、 选择绘制下一帧的最佳时机。 requestAnimationFrame()用 cancelAnimationFrame()来结束。
所以我们来改变一下思维方式,既然帧与帧之间的时间间隔不用考虑了,那就关心一下变化速率吧。 Partial support refers to lacking cancelAnimationFrame support. Supports webkitCancelRequestAnimationFrame rather than `webkitCancelAnimationFrame.
-- caniuse.com
好了,动画讲完了,你去找个教程看《canvas 绘图》?
别介,这才刚刚开始。
慢慢的,我们发现一些简单动画只是在修改几个 css 属性,而且只是在两三个状态之间来回变换。 大量的体力却浪费在两个状态间的补间状态函数上,而且质量良莠不齐。
来来来,这种事情就交给浏览器嘛。 css3 动画
能够执行补间状态的条件是,属性值能够转换成数值,这样就能参与运算。如: 颜色(color,background-color,border-color...) 长度/大小(width,height,font-size,border-width,border-radius...) 透明度(opacity) 堆叠顺序(z-index) 你吖补间它有毛用
而不能参与运算就意味着不能拿来补间状态,也就是没有中间状态,如: position(absolute、fixed、relative...) background-image(一个确定的 url) ...
一拍脑门就能想到,创建一个补间动画的条件有: 开始状态 结束状态 执行时间 补间效果
假如有个方块,宽度从 10px 变成 100px。
开始状态呢,在原 css 里就可以定义了 width: 10px。
结束状态呢,我们可以通过用 JS 直接修改 width值,或者增加一个 class选择器的方式, 或者是 :hover等其他表示状态的伪类,让 width: 100px。
而这时,你需要一个补间动画属性来声明 执行时间和 补间效果, 它就是 transition,中文译作 过渡,就是我所说的补间的意思。
transition为以下属性的简写
transition-property 规定哪个属性应用过渡 transition-duration 执行时间 transition-timing-function 补间效果,默认为 ease transition-delay 延迟多少时间开始
参考: http://w3school.com.cn/css3/css3_transition.asp
Support listed is for transition properties as well as the transitionend event. The prefixed name in WebKit browsers is webkitTransitionEnd
-- caniuse.com
css3 还提供了一个 animation属性来创建更丰富的自定义动画,而减少 JS 的介入。
比如: 你想一个动画中拥有多个状态 每个状态修改的属性值较多 循环播放 逆向播放 可自动开始,可中途暂停
animation和 @keyframes配合使用。
@keyframes用来定义动画, animation则可以多处应用,他们通过一个 name 来连接彼此, 因此 @keyframes必须要起个名字,而 animation则有个 animation-name。
animation在应用时,你可以自定义它:
animation-duration 执行时间 animation-time-function 补间效果,默认是 ease animation-delay 延迟多少时间开始 animation-iteration-count 循环播放次数 animation-direction 是否在下一周期逆向播放 animation-play-state 动画是否暂停,通过它,可以实现是否自动播放。要中途暂停的话,就要修改值,通过伪类或 JS 实现 animation-fill-mode 这个属性倒是有点出乎意料之外,请自行研究使用场景
可见 w3c 规范制定者们考虑到我们要用起来简单呢,基本上和我们思维方式一致。
实现动画的多个状态是在 @keyframes定义时完成的。
采用 0%~100%的分割方式,我们就不用在 执行时间之外考虑时间问题了。
参考: http://w3school.com.cn/css3/css3_animation.asp
Partial support in Android browser refers to buggy behavior in different scenarios.
--caniuse.com SVG 动画
css3 动画属性只管得住自己的 css 属性,SVG 绘制的图形,还得 SVG 自己解决。而对于 SVG 的 css 样式,一般两种皆可。
SVG 大大们的思维方式就有点绕了,竟然提供了 5 种动画 标签让我选择: set 相当于 animate 的 calcMode=&discrete&,忽略 animate animateColor 相当于 animate 的 attributeName=&color&,忽略 animateTransform animateMotion
我们先来看看和 css3 最像的 animate 标签,拥有的属性有 attributeName 规定哪个属性应用过渡 from 开始状态 to/by 结束状态,至少出现一个 values 多个状态时,忽略 from/to/by begin 延迟多少时间开始 dur 执行时间 calcMode,keyTimes,keySplines 自定义补间效果 repeatCount,repeatDur 循环播放次数/持续时间 ...
额,大概就是这样,下一个吧。
animateTransform主要是为了 attributeName=&transform&, 跟 css3 动画结合 transform变换类似,多了一个 type=&scale&属性用来区分相关参数。
animateMotion是 SVG 甩 css3 动画一条街的强大技能,可以让SVG各种图形沿着特定的 path 路径运动。
SVG 动画比 css 动画更强大,所以也更复杂。
细分成这 5 类标签,大概是性能考虑,人工简单区分一下数值、颜色、变换,可以为计算机省去大量的无用运算。
作者在这里也没办法讲的更详细,估计你也没看太明白 建议阅读: http://www.zhangxinxu.com/wordpress/2014/08/so-powerful-svg-smil-animation/
JS 还有啥用
通过声明属性,调用浏览器来实现的方式,毕竟有限,JS 可以为我们提供无限可能。
通过对比 CSS3 和 SVG 我们也能看出来,要实现的东西越多,我们需要区分、记忆的属性也越多。 一个复杂动画使用声明属性的方式有可能并没有通过编写逻辑来得更爽。看,SVG.js。
在这里倒是想到了 Grunt 和 Gulp 之争 相关讨论,请回复+关键字 #不要给我太多配置项#
css3 属性中声明的补间效果实在有限,SVG 的 calcMode,keyTimes,keySplines又略显复杂,
于是 github 上出现了一大批补间效果仓库,更有强大者弥补了 CSS3 与 SVG 动画上各个方面的不足。 https://github.com/bendc/animateplus 简单小巧,使用简单 4 大类/29 种补间动画效果 支持 SVG path 路径的补间过渡 !稍微有点鸡肋,path 长度不一致或类型不同时出现动画混乱
!仅支持开始、结束两个状态 animate({ el: &div&, // 选择器 duration: 1000, // 执行时间 delay: 0, // 延迟多少时间开始 easing: &easeOutElastic&, // 补间效果 loop: false, // 是否循环 direction: normal, // 是否重复 begin: function () {}, // 开始事件 complete: function () {}, // 结束事件 ...: ['', ''] // css/SVG 需要改变的属性}); http://mojs.io/tutorials/easing/path-easing/
无论你定义多少补间效果,都满足不了所有人的需求,这里有个 path 路径补间函数生成器。 var myFunc = mojs.easing.path(path),输入一个 SVG path,myFunc() 就是你自己的补间函数。
https://github.com/mbostock/d3/wiki/%E8%BF%87%E6%B8%A1 太屌,不进行反面评论
最喜欢它的链式操作 var svg = d3.select(&#a&) // 选择器 .attr('d', svg_num_path_d[0]) // ... 可以进行其他设置 .attr('fill', '#f00') // 设置初始状态 .transition() // 返回 transition 对象 .call(function (transition) { return transition // 承接 transition 对象 .duration(3000) // 执行时间 .delay(0) // 延迟多少时间开始 .ease('cubic-in-out') // 补间效果 .attr('fill', '#ff0'); // 本次过渡结束状态 }) // 重新返回选择器对象 // ... 可以进行其他设置 .transition() // 进行下一个过渡 .call(function (transition) { return transition.duration(3000).attr('fill', '#f0f'); }) // ... 可以进行其他设置 ;
作者将会在这里对比更多 JS 动画函数库的使用方法 鸣谢
以上是的内容,更多
的内容,请您使用右上方搜索功能获取相关信息。
若你要投稿、删除文章请联系邮箱:zixun-group@service.aliyun.com,工作人员会在五个工作日内给你回复。
新用户大礼包!
现在注册,免费体验40+云产品,及域名优惠!
云服务器 ECS
可弹性伸缩、安全稳定、简单易用
&40.8元/月起
预测未发生的攻击
&24元/月起
你可能还喜欢
你可能感兴趣
阿里云教程中心为您免费提供
说说大家都熟悉的网页动画技术相关信息,包括
的信息,所有说说大家都熟悉的网页动画技术相关内容均不代表阿里云的意见!投稿删除文章请联系邮箱:zixun-group@service.aliyun.com,工作人员会在五个工作日内答复
售前咨询热线
支持与服务
资源和社区
关注阿里云
International}

我要回帖

更多关于 settimeout 的文章

更多推荐

版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。

点击添加站长微信