4.2 利用jQuery脚本DIY闪光灯效果
在电影的开头常常会播放一段非常简短但是又特别炫目的动画来吸引观众的注意力，笔者一直对这样炫目的镜头向往不已，但是这些效果都需要专业人士通过专业的设备来完成，这不免令人遗憾。不过没有关系，经过笔者多年的研究，有一些办法可以实现一些简单的影视特效。如本节要介绍的闪光灯效果的代码。
实际上原理非常简单，就是利用jQuery不断地切换页面的背景颜色，代码如下：
【范例4-2 闪光灯】
01 <! DOCTYPE html>
02 //注意本书的html头标记都是HTML 5标记
03
04 <head>
05 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
06 <meta name="viewport" content="width=device-width, initial-scale=2">
07 <title>不断闪动的页面 </title>
08 <link rel="stylesheet" href="jquery.mobile.min.css" />
09 <script src="jquery-2.1.4.min.js"></script>
10 <script src="jquery.mobile.min.js"></script>
11 <! --<script type="text/javascript" src="cordova.js"></script>-->
12 <script type="text/javascript">
13 $(document).ready(function(){
14 var i=0; //声明标志变量i
15 setInterval(function(){ //启用计时器
16 if(i==0)
17 {
18 $("div").css("background-color", "yellow"); //将所有div标签的
背景颜色改为黄色
19 i=1; //标志背景颜色的状态字
20 }else
21 {
22 $("div").css("background-color", "red"); //将所有div标
签的背景颜色改为黄色
23 i=0; //标志背景颜色的状态字
24 }
25 },100); //时间间隔为0.1秒
26 });
27 </script>
28 </head>
29 <body>
30 <div data-role="page" data-theme="a">
31 </div>
32 </body>
33 </html>
运行之后可以看到页面以很快的速度闪动，颜色不断地在红黄两色之间切换。其中第12～27行即为使用的脚本程序。程序将在页面加载完成后开启setInterval()计数器，其中的100表示的是计数器运行的间隔为100ms，设置了一个临时变量i用来记录当前的状态，当背景变为红色时将i置为0，变成黄色再还原为1。$("div")选择了页面中的所有div标签，由于该页面中只有一个div，因此选中了page控件，然后利用CSS改变页面的属性。
既然这是一本介绍jQuery Mobile的书，介绍这样的内容有跑题的嫌疑，但是真相并非如此。笔者也曾想过选用page颜色为黑白两色的两套主题，然后利用jQuery来修改page的主题属性应该是最完美的方法，为此，曾经做出如下代码：
【范例4-3 利用jQuery Mobile主题的闪光灯】
01 <! DOCTYPE html>
02
03 <head>
04 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
05 <meta name="viewport" content="width=device-width, initial-scale=2">
06 <title>使用jQuery Mobile主题的闪光灯 </title>
07 <link rel="stylesheet" href="jquery.mobile.min.css" />
08 <script src="jquery-2.1.4.min.js"></script>
09 <script src="jquery.mobile.min.js"></script>
10 <! --<script type="text/javascript" src="cordova.js"></script>-->
11 <script type="text/javascript">
12 $(document).ready(function(){
13 var i=0; //声明标志变量
14 setInterval(function(){
15 if(i==0)
16 {
17 $("div").attr(“data-theme”, ”a”); //将page控件的主题设为a
18 i=1; //标志背景颜色的状态字
19 }else
20 {
21 $("div").attr("data-theme", "b"); //将page控件的主题设为b
22 i=0; //标志背景颜色的状态字
23 }
24 },100); //时间间隔为0.1秒
25 });
26 </script>
27 </head>
28 <body>
29 <div data-role="page" data-theme="a">
30 </div>
31 </body>
32 </html>
运行之后页面停在开始的黑色背景处，为了确认jQuery确实起到了修改页面属性的作用，笔者对jQuery脚本做了一点修改，使其在运行时能够以对话框的形式显示出page控件当前所使用的主题：
<script type="text/javascript">
$(document).ready(function(){
var i=0;
setInterval(function(){
if(i==0)
{
$("div").attr(“data-theme”, ”a”);
i=1;
}else
{
$("div").attr("data-theme", "b");
alert($("div").attr("data-theme")); //在主题被修改后用对话框弹出当前主题名
称
i=0;
}
},100);
});
</script>
运行结果如图4-3所示。
图4-3 显示page的主题结果
因为在本节中刚刚介绍了类似的脚本，这里不再赘述，读者可以清楚地看到page的主题确实改变了。可是为什么页面的颜色没有变化呢？
其原因在解释jQuery Mobile的原理时已经介绍过。就是在页面加载时，jQuery会搜索页面中所有data-role为page的元素并对其加载相应的主题，之后如果不重新运行加载脚本，那么无论元素的属性如何变化，页面上的显示是不会发生变化的。当然，也可以在文件中重新添加加载的脚本，但是笔者一直认为jQuery Mobile的出现是为了解放程序员使他们远离这样的工作，因此这里应该直接修改page所对应的CSS属性而不考虑jQuery Mobile的主题设置。
同样，在实际开发中常常也需要在运行中对一些元素的样式进行修改，比如皮肤的切换，建议大家直接对元素的CSS进行修改，这是一种非常简单而行之有效的方法，同时还要记得做好注释，以方便维护。