在wap开发中实现图片切换效果

前一阵和朋友一起开发wap站点时，根据需求需要在头部加上图片切换效果，查了相关资料在这里讲一下实现过程。使用WML的ontimer事件来延时交替显示两幅图像，来实现一个简单的动画应用。本例同时给出了从WML向WMLScript函数传递变量值，以及获取返回值的编程方法。WAP页面中使用的图像只能是1位的位图图像，格式为WAP专用的wbmp格式。

本例有两个程序文件：animate.wml和animated.wmls。animate.wml执行时首先给time变量赋予初始值20，然后在用户选择“运行动画(Run Animation)”选项后对存放图像文件的变量image进行初始化，并赋予它第1张图像文件名；当ontimer事件激活时，它就调用animated.wmls文件中的main()函数，该函数将每次使time变量的值减少2，并交换image变量的图像文件名，随后返回新的time值和image值，并在WAP浏览器上显示图像。这一过程将在ontimer事件激活时重复一次，直到time变量的值最后减少到0。

Animate.wml文件的程序代码如下：

1. <?xml version="1.0"?>
   
2. 
   
3.     <!DOCTYPE wml PUBLIC "-//PHONE.COM//DTD WML 1.1//EN" "http://www.phone.com/dtd/ wml11.dtd">
   
4. 
   
5. <wml>
   
6. 
   
7.     <card>
   
8. 
   
9.         <option>Run Animation                  // 定义一个选项
   
10. 
    
11.             <onevent type="onpick">
    
12. 
    
13.                 // 变量赋初值
    
14. 
    
15.                 <setvar name="time" value="20"/>
    
16. 
    
17.                 <setvar name="image" value="image1.bmp"/>
    
18. 
    
19.             </onevent>
    
20. 
    
21.         </option>
    
22. 
    
23.         <onevent type="ontimer">
    
24. 
    
25.             // 事件激活(即延时结束)后，执行animated.wmls文件中的外部函数main()
    
26. 
    
27.             <go href="animated.wmls#main()">
    
28. 
    
29.             </go>
    
30. 
    
31.         </onevent>
    
32. 
    
33.     // 显示图像及提示信息
    
34. 
    
35.     <p align="center"><img alt="animate" src="$(image)"/></p>
    
36. 
    
37.     <p align="center">A simple animation</p>
    
38. 
    
39.     </card>
    
40. 
    
41. </wml>
    
42. 
    
43. 
    
44. 
    
45. Animated.wmls文件的程序代码如下：
    
46. 
    
47. extern function main()
    
48. 
    
49. {
    
50. 
    
51.     // 获取初始变量值
    
52. 
    
53.     var image = WMLBrowser.getVar("image");
    
54. 
    
55.     var remianingTime = Lang.parseInt(WMLBrowser.getVar("time"));
    
56. 
    
57.     // 减少time的时间值，并判断值为0时终止执行
    
58. 
    
59.     remiainingTime -= 2;
    
60. 
    
61.     WMLBrowser.setVar("time", remainingTime);
    
62. 
    
63.     if (remainingTime > 0); {
    
64. 
    
65.         if (image == "image1.bmp") {
    
66. 
    
67.             WMLBrowser.setVar("image", "image2.bmp");          // 替换显示的图像文件
    
68. 
    
69.         }  file://如果当前显示的是image1.bmp，则换为image2.bmp
    
70. 
    
71.         else {
    
72. 
    
73.             WMLBrowser.setVar("image", "image1.bmp");
    
74. 
    
75.         }  // 否则就换为image1.bmp
    
76. 
    
77.         WMLBrowser.referesh();
    
78. 
    
79.     }  // 如果延时大于0
    
80. 
    
81. }
    

以上讲解了WMLScript语言提供的库函数，以及第三方提供的WMLScript非标准库函数，涉及的内容主要包括各函数的功能、用法、参数作用及取值范围等。希望大家能知道实现各种具体无线网络功能时所要用到的库函数，这样等实际开发时就可以来快速查阅这些函数的详细内容，从而提高开发效率。

 

 

文章来源:他舅网 http://bbs.tajiu.net/showtopic-72.html