注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

phperwuhan的博客

记载一个phper的历程!phperwuhan.blog.163.com

 
 
 

日志

 
 

vml极道教程3-DVML  

2008-01-18 11:39:09|  分类: vml |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

来源:http://www.elook.net.cn/vml/vml4/vmljdjc.htm


●DVML事件编程入门

1:DVML事件编程入门 - 简介    网页事件的概念:    想你刚才肯定点击了左边的“东西”-DVML事件编程入门,你才打开、看到了本网页。而对于那个“东西”来说,你用鼠标点击了它,你就触发了它的“鼠标点击事件”。所以它就变色了、该页也就显示了,这就是DVML事件交互程序(交互就是你把“事件”给了“东西”,而“东西”给了你“所以它就变色了、该页也就显示了”)……,这个事件的简介,够生动吧?    难到VML图形只能有“鼠标点击事件”么?当然不是,它的事件还有很多(几乎支持所有的DHTML事件),以下是一些常用事件的参考表格,这并不是全面的、或有部分事件只有在特定情况下才能用。不过我只要求你重视用“红色字”标识的事件,它们是最常用的事件,其他的要看你编程中用不用的到了。    2:DVML事件编程入门 - VML图形支持的所有事件    
事件名称特殊要求描述
鼠标激发的事件
onclick单击图形时
onmousedown鼠标按下时
onmouseup鼠标按下后、弹起时
oncontextmenu右键单击时
ondblclick双击时
onmouseover鼠标靠近时
onmouseout鼠标靠近后、离开时
onmousemove鼠标移动时
onselectstart按住鼠标准备选定它时
键盘激发的事件
onkeydowncontentEditable属性为true允许编辑键盘按下时
onkeypresscontentEditable属性为true允许编辑键盘输入时
onkeyupcontentEditable属性为true允许编辑键盘按下后、弹起时
oncutcontentEditable属性为true允许编辑编辑内容、使用剪切操作时
oncopycontentEditable属性为true允许编辑编辑内容、使用复制操作时
onpastecontentEditable属性为true允许编辑编辑内容、使用粘贴操作时
其他激发的事件
onfilterchange程序更新style.filterCSS filter滤镜改变时
onerror资源未加载成功、更新使用错误值加载、更新出错时
onfocuscontentEditable属性为true允许编辑聚集焦点时
onblurcontentEditable属性为true允许编辑失去焦点时
onscrollstyle.overflow设定具有滚动条滚动条滚动时
onresize程序更新style.width/height大小调整时
onmove启动时输出,程序更新style.left/top位置移动时
3:DVML事件编程入门 - 实例讲解 你也许想发牢骚了,这么多事件,要怎么实际应用?DVML事件编程代码到底怎么写?好,现在我就告诉你。
<HTML xmlns:v><STYLE>v\:*{behavior:url(#default#VML);}</STYLE><BODY>  <v:oval style="Z-INDEX:1;LEFT:100;WIDTH:90;POSITION:absolute;TOP:100;HEIGHT:90" fillcolor="yellow" onclick="alert('你单击了我')">鼠标单击我,我能出现对话框!</v:oval>    <v:oval style="Z-INDEX:1;LEFT:200;WIDTH:90;POSITION:absolute;TOP:100;HEIGHT:90" fillcolor="yellow" onmousedown="this.fillcolor='green'" onmouseup="this.fillcolor='yellow'">鼠标按下时我变绿色、弹起时我变黄色!</v:oval>    <v:oval style="Z-INDEX:1;LEFT:300;WIDTH:90;POSITION:absolute;TOP:100;HEIGHT:90" fillcolor="yellow" onmouseover="this.strokeweight=5" onmouseout="this.strokeweight='1px'">鼠标靠近我边框变粗、离开我还原!</v:oval>  </v:oval>  
瞧上边的例子,即演示了与鼠标相关的事件。分析代码不难发现,事件其实就跟通用属性一样(不光oval支持,像line、rect、roundrect、curve、shape、image、textbox、polyline等等所有可输出图形的一级VML标记均可使用上述表格列出的事件),只不过参数变成了像“alert('你单击了我')”、“this.fillcolor='green'”这样的DVML程序! 成熟的老WEB程序员基本都或多或少的懂些DHTML程序,不知你学没学过DHTML?如果有则最好不过,没有虽然很遗憾但也没关系,我会在接下来教你几招DVML程序的套路,足够你一展拳脚了(如果你不懂DHTML编程并且想有更高的突破,待学完本卷《DVML编程》以后,你就应该去网上下载或到书店购买关于DHTML编程的书籍,彻底将自己变成高手!由于DHTML涉及的内容太多,我在VML极道教程中就不在详细去讲DHTML了)。 4:DVML编程 - 充分发挥你所学的VML属性! 在介绍更多的事件范例之前,我先讲讲如何编写DVML程序语句、以及如何充分用上你在上一卷所学的VML标记/属性的知识。 先给个例子:
<HTML xmlns:v><STYLE>v\:*{behavior:url(#default#VML);}</STYLE><BODY>  <v:rect style="Z-INDEX:1;LEFT:300;WIDTH:90;POSITION:absolute;TOP:100;HEIGHT:90" fillcolor="yellow" onmousedown="this.fillcolor='white';this.strokeweight='5px'" onmouseup="this.fillcolor='yellow';this.strokeweight='1px'"/>  
上例中,程序的目的是:鼠标按下时图形的颜色变成白色、边框粗度变成5px,鼠标弹起时图形的颜色恢复原来的黄色、边框粗度恢复原来的1px。具体用代码实现起来其实很容易,我先说鼠标按下时的程序“this.fillcolor='white';this.strokeweight='5px'”。其中的this是DHTML的关键字,表示的是自己本身,你就理解为“this=我”。而“fillcolor='white'”你应该没有忘记fillcolor是VML通用属性之一用于描述图形背景颜色的吧?“.”意思你就理解为“的”,“this.fillcolor='white'”结合起来意思就是“我的背景颜色='white'”,所以你按下鼠标时“我就白了”。还有一句“this.strokeweight='5px'”就是“我的边框粗度='5px'”,不过在追加这句之前,也就是this.fillcolor='white'的后面必须增加一个“;”号,表示this.fillcolor='white'执行完毕。我用如此傻瓜的语言,鼠标弹起时执行的“this.fillcolor='yellow';this.strokeweight='1px'”不用我说你也能理解了吧? 在看个例子:
<HTML xmlns:v><STYLE>v\:*{behavior:url(#default#VML);}</STYLE><BODY>  <v:rect style="Z-INDEX:1;LEFT:300;WIDTH:90;POSITION:absolute;TOP:100;HEIGHT:90" fillcolor="yellow" onclick="if(this.fillcolor=='yellow'){this.fillcolor='red'}else{this.fillcolor='yellow'}"/>  
运行时,你反复点击图形,看看图形的变化。程序目的是:鼠标点击图形时,如果图形背景颜色是黄色那么就变成红色,如果不在是黄色了那么就在变回黄色。程序语句是if(this.fillcolor=='yellow'){this.fillcolor='red'}else{this.fillcolor='yellow'},这个稍微复杂了点,不过也是编程中最基本长用的判断语句。翻译成中文就成了“如果(我.fillcolor=='yellow'){我.fillcolor='red'}否则{我.fillcolor='yellow'}” 继续看例子:
<HTML xmlns:v><STYLE>v\:*{behavior:url(#default#VML);}</STYLE><BODY>  <v:rect style="Z-INDEX:1;LEFT:200;WIDTH:90;POSITION:absolute;TOP:100;HEIGHT:90" fillcolor="yellow" onclick="abc.fillcolor='red';abc.stroked=false">  按我更新id名为abc的图形  </v:rect>    <v:rect id=abc style="Z-INDEX:1;LEFT:300;WIDTH:90;POSITION:absolute;TOP:100;HEIGHT:90" fillcolor="yellow"/>    <v:rect style="Z-INDEX:1;LEFT:400;WIDTH:90;POSITION:absolute;TOP:100;HEIGHT:90" fillcolor="yellow" onclick="abc.fillcolor='yellow';abc.stroked=true">  按我更新id名为abc的图形  </v:rect>  
这次不同以往,this.fillcolor='red'被我换成了abc.fillcolor='red',而第二个VML标记的通用属性id名称被定义为abc,所以“this=我”就换成了“abc=id名为abc的目标图形”,这回明白id名称对于DVML编程的重要意义了吧?在说abc.stroked=false,表示把它的边框去掉,而abc.stroked=true,则表示不去掉它的边框。这时你如果用abc.stroked='false'或abc.stroked='true'就会出错,不信你改改试试!这是因为false和true为boolean类型的数据,它是常数(你要听不懂,就证明你不会DHTML编程。),而常数跟变量两边不能增加''符号,程序就是这么规定!而相对的abc.fillcolor='red'你要写成abc.fillcolor=red也会出错,不信你试试!这是因为fillcolor属性的数据类型是字符型,必须使用''或""包含着字符型数据,或定义变量后在引用(你要听不懂,就证明你不会编程)。这就是程序的规定、不管你听懂没听懂、你照着做就没错儿。 继续看例子:
<HTML xmlns:v><STYLE>v\:*{behavior:url(#default#VML);}</STYLE><BODY>  <v:rect id=abc1 style="Z-INDEX:1;LEFT:200;WIDTH:90;POSITION:absolute;TOP:100;HEIGHT:90" fillcolor="yellow"/>  <v:rect id=abc2 style="Z-INDEX:1;LEFT:300;WIDTH:90;POSITION:absolute;TOP:100;HEIGHT:90" fillcolor="yellow"/>  <v:rect id=abc3 style="Z-INDEX:1;LEFT:400;WIDTH:90;POSITION:absolute;TOP:100;HEIGHT:90" fillcolor="yellow"/>    <center>  <input type=button onclick='abc1.strokeweight=2;abc1.stroke.dashstyle="dot";abc1.stroke.on="t";abc2.fill.type="gradient";abc2.fill.color2="red";abc2.fill.on=true;abc3.extrusion.color="green";abc3.extrusion.backdepth="15pt";abc3.extrusion.on=true' value="增加二级标记边框、填充、立体的效果">    <input type=button onclick='abc1.stroke.on=false;abc2.fill.on=false;abc3.extrusion.on="f"' value="取消二级标记边框、填充、立体的效果">  </center>  
这个例子目的是:用程序实现给图形增加VML二级标记处理效果!全是用了我们上一卷所学的stroke、fill、extrusion二级标记的知识。代码虽然复杂了点,但待我仔细分析于你,你就发现,这太简单了。 我先解释第一个按钮的onclick事件所包含的程序。程序所包括的“abc1.strokeweight=2;abc1.stroke.dashstyle="dot";abc1.stroke.on="t";”,而“abc1.strokeweight=2”很显然就是更新abc1的VML通用属性strokeweight=2,让abc1的边框粗度变成2pt。由于我们用的是数字2所以两边不需要加''或""包括,反之如果换成2px或2pt就成了字符串,我们就应该写成"2px"或"2pt",不加""程序就会报错!在看“abc1.stroke.dashstyle="dot";abc1.stroke.on="t";”,你应还记的我们上卷所学的二级边框处理标记stroke吧?而该标记的专用属性表中又有dashstyle和on属性,因此“abc1.stroke.dashstyle="dot";abc1.stroke.on="t";”翻译成中文的意思就是“abc1.二级标记stroke.dashstyle边框样式属性="dot虚线";abc1.二级标记stroke.on处理是否生效="t生效"”,所以就实现用程序给图形增加了二级标记边框处理。 而相对而言,第一个按钮onclick事件所包含的程序剩下的“abc2.fill.type="gradient";abc2.fill.color2="red";abc2.fill.on=true;abc3.extrusion.color="green";abc3.extrusion.backdepth="15pt";abc3.extrusion.on=true”,就显而易见与增加二级标记stroke边框处理的原理相同,只不过我们给abc2、abc3增加的不是stroke而是fill和extrusion。 在说第二个按钮的onclick事件所包含的程序。程序所包括的“abc1.stroke.on=false;abc2.fill.on=false;abc3.extrusion.on="f"”,就更容易理解了。on这个大多数二级标记都有的属性就是控制处理是否生效,值为true或"t"时处理就生效,反之值为false或"f"时处理就不起效。程序里把stroke、fill、extrusion的on属性都给设置成了false或"f",所以按下这个按钮后图形的二级标记处理效果就没有了。 5:DVML编程 - 就是控制对象! 以上所有的校例,代码在有什么不同,但都有一个共同点,就是“处理目标对象”!目标可以是this(触发事件的图形本身)或id名称(对应id名称的VML图形)。而无论是this或id,他们共同的特点就是充当“对象”。而后在“XX对象.XX对象的XX属性=我们给定义的属性值;XXX对象.XXX对象的XXX属性=我们给定义的属性值”,DVML编程就是这么一回事,就是控制对象!


 ●DVML事件编程提高 

1:DVML事件编程提高 - 引语    同学们,通过我上一节通俗、易懂、抽象的范例与讲解,你是否感觉自己以入门DVML事件编程和DVML程序语句?如果没有,那请你在继续温习上一节,直到入门了为止。我会在接下来的课程里继续讲DVML事件编程,并不会沿用在向上一章节那样傻瓜式语言。而是进阶的将全新的事件、用新的程序,所以我劝你务必要掌握上一节所讲的知识,否则在接下的课程里你会感觉一头雾水、或者收效甚微。    2:DVML事件编程提高 - 键盘事件    上一节,我们讲了有关鼠标(单击、鼠标按下、鼠标弹起、鼠标靠近、鼠标离开)等最简单、易懂的事件,接下来我们就讲键盘事件。其实VML图形在正常情况下本身不支持onkeydown(键盘按下)、onkeyup(键盘按下后、弹起时)、onkeypress(键盘使用输入字符的键)、oncut、oncopy、onpaste等事件。那是正常情况下它们无法像文本输入框、按钮那样可以获取操作焦点,而是“与网页本身融为一体、化为一物、只能看但不能用键盘去操作。”。而只有在其使用HTML的contentEditable(描述对象是否支持被用户编辑内容)通用属性时,才支持获取操作焦点、支持键盘事件,如下例图形即启用了contentEditable通用属性:    
<HTML xmlns:v><STYLE>v\:*{behavior:url(#default#VML);}</STYLE><BODY>  <v:oval contentEditable="true" style="Z-INDEX:1;LEFT:100;WIDTH:90;POSITION:absolute;TOP:100;HEIGHT:90" fillcolor="yellow">你能输入、改变内容。</v:oval>    <v:oval contentEditable style="Z-INDEX:1;LEFT:200;WIDTH:90;POSITION:absolute;TOP:100;HEIGHT:90">我也是。</v:oval>    <v:oval contentEditable="false" style="Z-INDEX:1;LEFT:300;WIDTH:90;POSITION:absolute;TOP:100;HEIGHT:90">可我不能。</v:oval>  
上例中,图形一(contentEditable="true")、二(contentEditable,可以省略"true")均支持获得操作焦点,而图形三(contentEditable="false"或没有contentEditable属性)则不能。也就是图形一、二支持键盘事件,而图形三不支持。请看下边例子,你分别用键盘在图一、二击键盘输入字符试试?并在第二个图形里使用剪切、复制、粘贴操作试试?
<HTML xmlns:v><STYLE>v\:*{behavior:url(#default#VML);}</STYLE><BODY>  <v:oval contentEditable="true" style="Z-INDEX:1;LEFT:100;WIDTH:90;POSITION:absolute;TOP:100;HEIGHT:90" fillcolor="yellow" onkeydown="alert('你按下键盘了')">你能输入、改变内容。</v:oval>    <v:oval contentEditable style="Z-INDEX:1;LEFT:200;WIDTH:90;POSITION:absolute;TOP:100;HEIGHT:90" onkeyup="alert('你按下键盘后、并弹起了,右边的图形现在颜色值是'+a.fillcolor);" oncut="alert('你使用剪切了,我要右边的图形变成绿色');a.fillcolor='green'"  oncopy="alert('你使用复制了,我要右边的图形变成蓝色');a.fillcolor='blue'"  onpaste="alert('你使用粘贴了,我要右边的图形变成白色');a.fillcolor='white'">我也是。</v:oval>    <v:oval id=a contentEditable="false" style="Z-INDEX:1;LEFT:300;WIDTH:90;POSITION:absolute;TOP:100;HEIGHT:90">可我不能。</v:oval>  
这次有一点不同的是“alert('你按下键盘后、并弹起了,右边的图形现在颜色值是'+a.fillcolor)”。我们没有更新a.fillcolor值,而只是获取了a.fillcolor值,它后面没有='yellow'、='white'类的付值语句。 3:DVML事件编程提高 - 网页键盘事件编程 从上例中,我们学习了图形在contentEditable状态时支持键盘事件,当然事件想触发什么程序就触发什么程序,可用this更新自己也可以按照id名称更新图形。下面该说网页键盘事件编程了,网页可是什么事件都支持也不需要设置contentEditable状态。请运行下例,试着在网页任何位置击键盘。
<HTML xmlns:v><STYLE>v\:*{behavior:url(#default#VML);}</STYLE>  <BODY onkeyup="alert('你按下键盘、并弹起了,键值是 '+event.keyCode+' ,对应字母是 '+String.fromCharCode(event.keyCode))">  <v:oval style="Z-INDEX:1;LEFT:300;WIDTH:90;POSITION:absolute;TOP:100;HEIGHT:90"/>  
这个程序,更有趣了。我们把onkeyup事件直接增加给了<BODY>网页正文内容最高容器(你如果真不懂DHTML,就姑且理解为BODY就是你看到的网页)!而分析程序,event.keyCode其中的event是DHTML的一个固有对象,keyCode是它的固有属性,event.keyCode就是获取你按下的键盘键值(键盘上每个键都有一个系统键值)。而String.fromCharCode(event.keyCode),则是将该键值转换成对应的字母。这些就是JavaScript+DHTML程序了,而我们只是给个演示,接下来我们主要利用网页对键盘事件的支持来进行DVML编程,请看下面二个例子。
<HTML xmlns:v><STYLE>v\:*{behavior:url(#default#VML);}</STYLE>  <BODY onkeyup="var str1=event.keyCode;alert('变量str1现在值是'+str1);if(str1==65)a.fillcolor='red';if(str1==66)a.fillcolor='blue';if(str1==67)a.fillcolor='yellow'">  请分别按下a、b、c键  <v:oval id=a style="Z-INDEX:1;LEFT:300;WIDTH:90;POSITION:absolute;TOP:100;HEIGHT:90"/>  
<HTML xmlns:v><STYLE>v\:*{behavior:url(#default#VML);}</STYLE>  <BODY onkeyup="abcd1()">  <script>  function abcd1(){  var str1=event.keyCode;  alert('变量str1现在值是'+str1);  if(str1==65)a.fillcolor='red';  if(str1==66)a.fillcolor='blue';  if(str1==67)a.fillcolor='yellow'  }  </script>  请分别按下a、b、c键  <v:oval id=a style="Z-INDEX:1;LEFT:300;WIDTH:90;POSITION:absolute;TOP:100;HEIGHT:90"/>  
两个DVML程序的运行效果是一样的,只是写法有些区别而已。先说第一个,有一句“var str1=event.keyCode”,这就是变量声明与付值的语句,解释成中文的意思就是“新建变量 str1=event.keyCode”。你会问变量有什么用呢?变量用处可大着那~,只是写简单的程序时看不出、作用不大,但当要写大型的、上万、十万字的大型程序时,如果没有变量的概念啊,是累死都写不完。变量主要是为了节省代码字数、存储一些数据、加速作用等等很多用处。 生动的比喻一下,如果不用变量“if(str1==65)a.fillcolor='red';if(str1==66)a.fillcolor='blue';if(str1==67)a.fillcolor='yellow'”就只有写成“if(event.keyCode==65)a.fillcolor='red';if(event.keyCode==66)a.fillcolor='blue';if(event.keyCode==67)a.fillcolor='yellow'”。不懂编程的人也该看出了,用变量剩字数。而对于理解编程的人来说,前者运行起来要比后者效果快约2倍,只是电脑太快了、该程序也太简单了我们感觉不出来而已。为什么慢2倍呢?你比较比较,前者只用了1次读取event.keyCode给变量、后者用了3次读event.keyCode,这每一次的DHTML对象访问都需要经过电脑检索、计算才能得到的…… 而后一个例子,我们定义了一个<Script>脚本。而“function document.onkeyup(){ 所有程序语句 }”翻译成中文即是“创建函数 名为abcd1(){ 所有程序语句 }”,即创建了一个函数(你若不懂函数是什么,你就将函数理解成“把程序语句包装在一起的包装盒”)。然后在BODY的onkeyup事件内容内,直接写上abcd1(),即会执行abcd1函数内的所有语句。由于程序相同,所以运行效果跟前者一样,只不过后者在语法上更加易读,也更容易被其他对象使用(abcd1是函数,网页、圆形、方型等等都可以在XXX事件中用,算算,这样多剩代码?) 4:DVML事件编程提高 - 其他VML事件 在上一章节的表中还有一些诸如onscroll、onresize、onmove等事件。这些事件相对较特殊,而且也只能在特殊的情况下才能产生该事件,请看下例。
<HTML xmlns:v><STYLE>v\:*{behavior:url(#default#VML);}</STYLE><BODY>  <input type=button value="按我吹气球" onclick="a.style.width=parseInt(a.style.width)+5;a.style.height=parseInt(a.style.height)+5;">  <v:oval onresize="alert('又是谁在吹我???')" id=a style="Z-INDEX:1;LEFT:300;WIDTH:90;POSITION:absolute;TOP:100;HEIGHT:90"/>  
以上例子,按钮负责吹气球,程序是:“a.style.width=parseInt(a.style.width)+5;a.style.height=parseInt(a.style.height)+5;”。很显然,是更新了圆形的CSS style样式表所包含的width(宽度)、height(高度)属性。其中“a.style.width=parseInt(a.style.width)+5”翻译为中文即是“a.style.宽度=数字转换函数(a.style.宽度)+5”。你可能不理解“parseInt(a.style.width)+5”,我会使你理解。比如说上个oval标记其width宽度被我们定义为90,虽然我们省略了px单位,但实际输出当中它依然表示90px的大小。而我们用a.style.width获取它的宽度时,程序会给我们自动追加上px,返回的也就是90px。所以如果我们直接写“a.style.width=a.style.width+5”电脑就会理解为“a.style.width=90px+5”,电脑就弄不懂这90px+5该怎么加法了就会报错。。所以必须用“a.style.width=parseInt(a.style.width)+5;”电脑就会理解为“a.style.width=90+5”就OK了。 在说这点按钮吹气球时,这气球生气了。。因为有程序想更新它的大小把它吹大,所以就触发了它的“onresize(大小调整事件)”。而onresize内的程序是“alert('又是谁在吹我???')”,所以就会被执行了。 继续看例子:
<HTML xmlns:v><STYLE>v\:*{behavior:url(#default#VML);}</STYLE><BODY>  <input type=button value="马儿快走" onclick="a.style.left=parseInt(a.style.left)+10;a.style.top=parseInt(a.style.top)+5;">  <input type=button value="改变滤镜" onclick="a.style.filter='glow(color=orange,strength=10)'">  <v:oval onmove="alert('又是谁在拍我???')" id=a style="Z-INDEX:1;LEFT:300;WIDTH:90;POSITION:absolute;TOP:100;HEIGHT:90" onfilterchange="alert('哇塞,我在发光!?')"/>  
这次马儿快走跟吹气球一个道理,更新style.left跟style.top使之移动,然后触发了其onmove(位置调整事件)。而改变滤镜,我们在上一卷的image图片部分提及过CSS的滤镜效果。这次改变了它的filter滤镜为“glow(color=orange,strength=10)”,所以触发了它的滤镜改变事件。 但上两例“马儿快走”、“吹气球”都有一个缺陷,就是页面显示完成时会自动触发图形的onresize、onmove事件。这是因为页面在输出时,根据图形标记style定义width/height/left/top等值进行了初期的定位,但结果却使图形误以为是“谁在弄我?”。有解决的办法么?当然有 - 用自定义属性判断。
<HTML xmlns:v><STYLE>v\:*{behavior:url(#default#VML);}</STYLE><BODY>  <input type=button value="按我吹气球" onclick="a.style.width=parseInt(a.style.width)+5;a.style.height=parseInt(a.style.height)+5;">  <v:oval onresize="if(this.haha==null){this.haha='页面加载过了'}else{alert('又是谁在吹我???')}" id=a style="Z-INDEX:1;LEFT:300;WIDTH:90;POSITION:absolute;TOP:100;HEIGHT:90"/>  
瞧上边圆形onresize的程序“if(this.haha==null){this.haha='页面加载过了'}else{alert('又是谁在吹我???')}”中文意思是“如果(我的.haha属性==空){我的.haha属性='随意值'}else{弹出对话框('又是谁在吹我???')}”。很搞笑,oval哪里有haha属性?就是我们知道它没有这个属性,所以在页面加载时判断this.haha==null成立了。而成立我们却执行this.haha='页面加载过了'而不弹出对话框,所以启动时它没弹出。而到后来真有人吹它了,判断this.haha==null就不成立了,所以它就会执行alert('又是谁在吹我了???') 继续看例子:
<HTML xmlns:v><STYLE>v\:*{behavior:url(#default#VML);}</STYLE><BODY>  <v:oval onscroll="alert('谁敢动我滚动条??')" id=a style="Z-INDEX:1;LEFT:300;WIDTH:190;POSITION:absolute;TOP:100;HEIGHT:190;overflow-y:scroll">  dd<p>dd<p>dd<p>dd<p>dd<p>dd<p>dd<p>dd<p>  </v:oval>  
不难看出,用CSS的overflow-y:scroll;给它增加了滚动条,当它内容很长了超过它本身大小时,就会显示了。而这时如果你拖动滚动条,就会触发它的onscroll事件。


 ●DVML帧式动画 

 

1:DVML侦式动画编程 - 引语    同学们,通过以上章节的DVML事件编程的学习,是否以让你感觉自己脱胎换骨成为程序员了?别对自己谦虚、更不需要吹嘘,我不喜欢。如果你学习后感觉良好,那么我恭喜你,你算是一位DVML程序员了,只待更好的资材使你更胜一筹了。不过在那之前,我还是奉劝你不要先急着向下学,而是要充分的动手去编、去写、去实现自己想实现的效果。待自己事件编程熟悉了以后,在学习DVML动画不迟,因为事件编程的知识会变相加深了你对DVML程序的认识、掌握能力。在学起DVML动画编程开发来,将会是顺水行舟、事半功倍的。否则啊…………,举步为艰、甚至于听不懂我接下来讲的课了。    2:DVML侦式动画编程 - 概念、实例、讲解    你也许怀疑了,DVML能实现像电视动画片、flash那样的动画?我的回答是 - 当然可以。不过不会是件像学VML标记、DVML事件编程那样容易的事情,而且用纯手写代码不是件理智的事,必须借助flashvml+你对DVML动画的概念理解+你的DVML编程能力才可以实现。    至于“DVML侦式动画编程”,我不先解释,先让你看例子。    
<HTML xmlns:v><STYLE>v\:*{behavior:url(#default#VML);}</STYLE><BODY>  <v:oval id=a style="Z-INDEX:1;LEFT:200;WIDTH:90;POSITION:absolute;TOP:100;HEIGHT:90"/>  <script>  function window.onload(){  setTimeout("a.fillcolor='red'",1000);  setTimeout("a.fillcolor='green'",2000);  setTimeout("a.style.left=500",3000);  setTimeout("a.style.top=300;a.fillcolor='blue'",3500);  setTimeout("a.style.left=200;a.fillcolor='yellow'",4000);  setTimeout("a.style.top=100;a.fillcolor='white'",4500);  setTimeout("a.style.display='none';",5500);setTimeout("a.style.display='';",6500);  }  </script>  
怎么样,小有所悟?是的,这就是侦式动画,就是这么一侦、接一侦来实现的WEB动画。上面只是个在简单不过的应用了,你可想如果在多几个形状?在多几副图?我的程序在复杂一点?那就是一个好看的动画片了。。 分析程序,发现就一个VML标记,还有一个<script>脚本。而脚本内“function window.onload(){ 所有执行的程序 }”解释为中文即是“创建函数 window窗口.onload触发加载完成事件(){ 所有执行的程序 }”,你就理解为网页加载之后执行{}内的程序。而{}内都是些什么程序哪?分析上边代码,都是大同小异,setTimeout("xxxx",1234)做着主要角色,而实现侦式动画的源动力就是它! setTimeout(value1,value2),这是DHTML对象模型中window对象所有的一个“定时器”方法。该方法有两个参数书写位置,即value1,value2。value1是设置需要执行的程序,而value2则设置程序执行的“毫秒”定时数。500即表示0.5秒时执行、1000表示1秒时执行、10000表示10秒、60000表示60秒…… 你懂了这些知识,在综合你在DVML事件编程章节所学的程序语句自己去分析上边的代码,就会看懂了吧?唯一没说过的就是style.display,其实display这个CSS属性在动画开发中很关键,就是控制对象显示与否。


 ●DVML流线动画 

1:DVML流线动画编程 - 概念、实例、讲解    上一节DVML侦式动画很有趣?那么接下来的流线动画则更会让你心动。在学完了流线动画编程以后,有机的结合上你的侦式动画编程知识,你就可以靠自己在WEB页上直接做动画了!    那么流线动画是什么概念那?同样,先看例子。    
<HTML xmlns:v><STYLE>v\:*{behavior:url(#default#VML);}</STYLE><BODY>  <v:textbox id=xx style="Z-INDEX:1;LEFT:380;POSITION:absolute;TOP:50;display:none;">  DVML流线动画  </v:textbox>  <v:oval id=a style="Z-INDEX:1;LEFT:200;WIDTH:90;POSITION:absolute;TOP:150;HEIGHT:90;display:none;"/>  <v:oval id=b style="Z-INDEX:2;LEFT:600;WIDTH:90;POSITION:absolute;TOP:150;HEIGHT:90;display:none;" fillcolor="yellow"/>    <script>  var time1=null  function window.onload(){  setTimeout("xx.style.display=''",1000);  setTimeout("a.style.display=''",2000);  setTimeout("b.style.display=''",3000);  setTimeout("time1=setInterval('a.style.left=parseInt(a.style.left)+5;b.style.left=parseInt(b.style.left)-5;',20)",4000)  setTimeout("clearInterval(time1);",6000)  setTimeout("time1=setInterval('b.style.width=parseInt(b.style.width)+3;b.style.height=parseInt(b.style.height)+3;a.fillcolor=\"rgb(\"+Math.round(Math.random()*255)+\",\"+Math.round(Math.random()*255)+\",\"+Math.round(Math.random()*255)+\")\"',30)",6500)  setTimeout("clearInterval(time1);",8500)  setTimeout("time1=setInterval('b.style.top=parseInt(b.style.top)-10;',20)",9000)  setTimeout("clearInterval(time1);",10500)  setTimeout("time1=setInterval('a.style.left=parseInt(a.style.left)-10;',20)",10500)  setTimeout("clearInterval(time1);",13000)  setTimeout("xx.innerText='我服了~';xx.style.fontSize=50;xx.style.color='red';",13500)  }  </script>  
流线动画应用起来要比侦式动画复杂的多,而完成流线动画所需的源动力则是DHTML对象模型中window对象所有的一个“循环定时器”方法。 setInterval(value1,value2),它跟setTimeout“定时器”写法类似,只是稍有不同。该方法有两个参数书写位置,即value1,value2。value1是设置需要执行的程序,而value2则设置程序执行的“循环毫秒执行数”。20即表示每20毫秒重复执行一次value1程序、50表示50毫秒、100表示100毫秒…… 如果用它来实现流线动画,则必须配合setTimeout定时器在特定的时间“启动setInterval、销毁setInterval”。不然你想啊,setInterval如果老是这样循环下去,不在某一时间销毁它不就乱套了?在又说,没有setTimeout在指定时间启动它,它又怎么会听话? 在上例中,我们定义了一个全局变量“var time1=null”time1,而后又有诸如“setTimeout("time1=setInterval('b.style.top=parseInt(b.style.top)-10;',20)",9000)”的语句。我们先分析“time1=setInterval('b.style.top=parseInt(b.style.top)-10;',20)”即是把“setInterval('b.style.top=parseInt(b.style.top)-10;',20)”绑定给“time1”变量。而在它的外围又用setTimeout方法设定为9000毫秒时执行该语句,就完成了流线动画启动。 在说“setTimeout("clearInterval(time1);",10500)”,clearInterval(time1)的意思就是“销毁循环定时器”,而销毁的对象正是time1。它的外围用setTimeout设定为在10500毫秒时执行,就会在10500秒销毁time1结束一次流线动画。也就算出time1的生存时间为10500-9000=1500毫秒这么长。 2:DVML流线动画编程 - 学习与实际开发的转行 上边的演示、分析都讲完了,但我觉的没有几个同学能做出流线动画。因为有些知识就算我在会讲也是很难讲清楚、你能听的懂的。而真理是你必须的多学、多练,从实际开发中体会、从浏览器一次次报错中找到问题所在。 VML极道教程讲到这里,已到了学习中最难掌握的地方了 - 就是流线动画,不必说别人,就算是我也不可能靠纯手写代码实现像电视动画片、flash动画片那样的动画效果。这时最明智的选择就是flashvml,凭借它强大的绘图功能、图像处理功能、动画设计功能在加上你对VML标记的认识、DVML编程的能力,想实现类似电视动画、flash动画片、甚至于3D动画将不是件困难的事情。 就像上边那例DVML流线动画,我是手写的,用了10几分钟。而如果要我在flashvml里实现?最快只需不到1分钟就能搞定。由于现阶段你已经进入了VML应用阶段,而非学习阶段了,所以这时我不是反对你用VML开发工具,而是非常赞成你用。 


 ●DVML总结

1:DVML编程学习总结

从精通VML标记、到挑战DVML编程,过程如果你用心学了……那么我的执教心力总算没有白费,并对你寄予了未来VML WEB的厚望。VML在WEB的实际应用 - 充当HTML标记的补足、做数据图表类矢量图形、VML3D WEB网页、VML3D WEB网站、VMLflash动画、VML游戏、做其他你想在WEB用VML实现的事……

《师徒缘》
亿往昔无所一知、
思今朝翼丰羽硕、
恰似一波东去水、
浮辉玉喻两岸分。
2005-2-20 1:25:24

是啊,怀念曾经上学的日子、怀念曾经上学时的恩师……。而没想到今日自己却在教着别人,写到此刻才真有感慨那,也总算了解了曾经教吾之师的那份心。。

VML极道教程的正式学科至今已尽结束,你已具备了相当高VML开发实力。而剩下的flashvml课题与实战使用,相信对你来说则是很简单的操作问题、手到擒来的绝活。而接下来,师缘了解的日子也临近结束了,此情此景、此刻的话语。。写到此处又使我联想起来

96年告别执教我2年的小学五年级班主任兼语文恩师 - 潘果爽(你要好好的学习,考一中我认为你不行,但实验肯定没问题)
97年告别执教我3年的古典式摔交教练恩师 - 曾勇(今后一定老实点,别光捣蛋!)
99年告别执教我3年初中班主任兼英语恩师 - 马传军(我对你看在眼里是心疼、是担心,但又没有办法 -- 叹息)

那一幕幕的情形。。只待自己到社会闯荡才深深痛痛的体会到。而今日的此时此刻才最深、最痛的感受到。而我可能是与你素未眸面,但却能想象的出、联想的到你是怎样的用心学习。而最后与你了结师缘简短的一句话是:希望我教的东西对你的以后有用。

2:一些标记属性使用技巧 与 DVML编程实用技巧

<HTML xmlns:v><STYLE>v\:*{behavior:url(#default#VML);}</STYLE><BODY>  <v:Image src="shili/haha.gif" style="position:absolute;left:100;top:100;width:150;height:150;"/>  <v:Image src="shili/haha.gif" style="position:absolute;left:270;top:100;width:150;height:150;flip:x"/>  <v:Image src="shili/haha.gif" style="position:absolute;left:430;top:100;width:150;height:150;flip:y"/>  <v:Image src="shili/haha.gif" style="position:absolute;left:590;top:100;width:150;height:150;flip:x y"/>  



 

<HTML xmlns:v><STYLE>v\:*{behavior:url(#default#VML);position:absolute;}</STYLE><BODY>  在CSS中直接定义position为绝对定位  <v:Image src="shili/haha.gif" style="left:100;top:100;width:150;height:150;"/>  <v:Image src="shili/haha.gif" style="left:270;top:100;width:150;height:150;flip:x"/>  <v:Image src="shili/haha.gif" style="left:430;top:100;width:150;height:150;flip:y"/>  <v:Image src="shili/haha.gif" style="left:590;top:100;width:150;height:150;flip:x y"/>  



 

<HTML xmlns:v><STYLE>v\:*{behavior:url(#default#VML);}</STYLE><BODY>  <v:Image id="a" src="shili/haha.gif" style="position:absolute;left:300;top:200;width:150;height:150;rotation:50"/>  <center><input type=button value="左旋" onclick="a.rotation-=10">  <input type=button value="右旋" onclick="a.rotation+=10">  



 

<HTML xmlns:v><STYLE>v\:*{behavior:url(#default#VML);}</STYLE><BODY>  <v:Image id="a" src="shili/haha.gif" style="position:absolute;left:300;top:200;width:150;height:150;zoom:1"/>  <center><input type=button value="缩放放大3倍" onclick="a.style.zoom=3">  <input type=button value="缩放缩小50%" onclick="a.style.zoom=0.5;">  



 

<HTML xmlns:v><STYLE>v\:*{behavior:url(#default#VML);}</STYLE><BODY>  <v:Image id="a" src="shili/haha.gif" style="position:absolute;left:300;top:200;width:150;height:150;zoom:1"/>  <center><input type=button value="更改内容" onclick="a.innerHTML='VML<b>极道</b>教程'">  <input type=button value="读取内容" onclick="alert(a.innerHTML)">  



 

<HTML xmlns:v><STYLE>v\:*{behavior:url(#default#VML);}</STYLE><BODY>  <v:Image id="a" src="shili/haha.gif" style="position:absolute;left:300;top:200;width:150;height:150;zoom:1"/>  <center><input type=button value="更换图片" onclick="a.src='shili/fyw1.jpg'">  



 

<HTML xmlns:v><STYLE>v\:*{behavior:url(#default#VML);}</STYLE><BODY>  <bgsound id="bgsound1">  <bgsound id="bgsound2">  <v:Image id="a" src="shili/haha.gif" style="position:absolute;left:300;top:200;width:150;height:150;zoom:1"/>    <center>  <input type=button value="播放背景音乐" onclick="bgsound1.src='shili/sounds/THE HYBRID FRONT3.mp3';bgsound1.loop=-1;bgsound1.volume=-800">  <input type=button value="播放前景音乐" onclick="bgsound2.src='shili/sounds/button_move.wav';bgsound2.loop=1">  



 

《VML极道教程》第二卷[挑战DVML编程] 全文完!
  评论这张
 
阅读(581)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017