1分間隔アニメーション参考ページ

参考先　善光寺平ライブカメラ

index_0000.php

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <meta http-equiv="Content-Script-Type" content="text/javascript" />
  6. <meta name="robots" content="index, follow" />
  7. <meta name="keywords" content="各自設定項目" />
  8. <link rel="stylesheet" href="styles.css" type="text/css" />
  9. <title>24時～1時</title>

  11. <!--▼ IE7でエラー無しでページを閉じる ▼-->
  12. <SCRIPT LANGUAGE="JavaScript">
  13. <!--
  14. function WinCls(){
  15.         window.close()
  16.                        }
  17. //-->
  18. </SCRIPT>
  19. <!--▲ IE7でエラー無しでページを閉じる ▲-->

  21. <!--▼ 善光寺平様から使用許可いただいたスクリプト ▼-->
  22. <script type="text/javascript">
  23. <!--
  24. //変数の初期設定
  25. var movKazu=60;
  26. var imgNo=0;
  27. var timeID=null;
  28. var movSpeed;
  29. if(navigator.appVersion.charAt(0)>=3)
  30. {
  31. movimg=new Array()
  32. for(i=0;i<movKazu;i++){movimg[i] = new Image()}
  33. movimg[0].src='history/today/0000.jpg';
  34. movimg[1].src='history/today/0001.jpg';
  35. movimg[2].src='history/today/0002.jpg';
  36. movimg[3].src='history/today/0003.jpg';
  37. movimg[4].src='history/today/0004.jpg';
  38. movimg[5].src='history/today/0005.jpg';
  39. movimg[6].src='history/today/0006.jpg';
  40. movimg[7].src='history/today/0007.jpg';
  41. movimg[8].src='history/today/0008.jpg';
  42. movimg[9].src='history/today/0009.jpg';
  43. movimg[10].src='history/today/0010.jpg';
  44. movimg[11].src='history/today/0011.jpg';
  45. movimg[12].src='history/today/0012.jpg';
  46. movimg[13].src='history/today/0013.jpg';
  47. movimg[14].src='history/today/0014.jpg';
  48. movimg[15].src='history/today/0015.jpg';
  49. movimg[16].src='history/today/0016.jpg';
  50. movimg[17].src='history/today/0017.jpg';
  51. movimg[18].src='history/today/0018.jpg';
  52. movimg[19].src='history/today/0019.jpg';
  53. movimg[20].src='history/today/0020.jpg';
  54. movimg[21].src='history/today/0021.jpg';
  55. movimg[22].src='history/today/0022.jpg';
  56. movimg[23].src='history/today/0023.jpg';
  57. movimg[24].src='history/today/0024.jpg';
  58. movimg[25].src='history/today/0025.jpg';
  59. movimg[26].src='history/today/0026.jpg';
  60. movimg[27].src='history/today/0027.jpg';
  61. movimg[28].src='history/today/0028.jpg';
  62. movimg[29].src='history/today/0029.jpg';
  63. movimg[30].src='history/today/0030.jpg';
  64. movimg[31].src='history/today/0031.jpg';
  65. movimg[32].src='history/today/0032.jpg';
  66. movimg[33].src='history/today/0033.jpg';
  67. movimg[34].src='history/today/0034.jpg';
  68. movimg[35].src='history/today/0035.jpg';
  69. movimg[36].src='history/today/0036.jpg';
  70. movimg[37].src='history/today/0037.jpg';
  71. movimg[38].src='history/today/0038.jpg';
  72. movimg[39].src='history/today/0039.jpg';
  73. movimg[40].src='history/today/0040.jpg';
  74. movimg[41].src='history/today/0041.jpg';
  75. movimg[42].src='history/today/0042.jpg';
  76. movimg[43].src='history/today/0043.jpg';
  77. movimg[44].src='history/today/0044.jpg';
  78. movimg[45].src='history/today/0045.jpg';
  79. movimg[46].src='history/today/0046.jpg';
  80. movimg[47].src='history/today/0047.jpg';
  81. movimg[48].src='history/today/0048.jpg';
  82. movimg[49].src='history/today/0049.jpg';
  83. movimg[50].src='history/today/0050.jpg';
  84. movimg[51].src='history/today/0051.jpg';
  85. movimg[52].src='history/today/0052.jpg';
  86. movimg[53].src='history/today/0053.jpg';
  87. movimg[54].src='history/today/0054.jpg';
  88. movimg[55].src='history/today/0055.jpg';
  89. movimg[56].src='history/today/0056.jpg';
  90. movimg[57].src='history/today/0057.jpg';
  91. movimg[58].src='history/today/0058.jpg';
  92. movimg[59].src='history/today/0059.jpg';
  93. };
  94. function animation1(imgIndex)
  95. {
  96. if(navigator.appVersion.charAt(0)>=3)
  97.   {

  100.       if(imgNo<movKazu)
  101.          {
  102.          document.images[imgIndex].src=movimg[imgNo].src;
  103.          timeID=setTimeout("animation1("+imgIndex+")",movSpeed);
  104.          imgNo++;
  105.          }
  106.          else
  107.          {
  108.          clearTimeout(timeID)
  109.          };
  110.   };
  111. };
  112. <!---->
  113. </SCRIPT>
  114. <!--▲ 善光寺平様から使用許可いただいたスクリプト ▲-->

  116. <!--▼ jQuery で Lightbox のように表示する ▼-->
  117. <script type="text/javascript" src="js/jquery.js"></script>
  118. <script type="text/javascript" src="js/jquery.lightbox-0.4.js"></script>
  119. <link rel="stylesheet" type="text/css" href="js/jquery-lightbox/css/jquery.lightbox-0.4.css" media="screen" />
  120. <script type="text/javascript">
  121. $(function() {
  122.     $('#anima a').lightBox();
  123. });
  124. </script>
  125. <!--▲ jQuery で Lightbox のように表示する ▲-->

  127. </head>

  129. <!-- ▼アニメーションここから▼ -->
  130. <hr />
  131. <div align="center"><a href="index_2300.php">23～24時</a><< 24～1時　>><a href="index_0100.php">1～2時</a>
  132.     <br />
  133.     <br />
  134. </div>
  135. <p align="center" style="line-height: 200%; margin-top: 0; margin-botto3m: 0"><b><FONT COLOR="#ff4444" SIZE="4">
  136. </font></b>
  137. <IMG SRC="history/today/0000.jpg" NAME="img0" ALIGN=top width="320" height="240"><br />
  138. </p>
  139. <FORM>
  140.   <div align="center">
  141.       <INPUT TYPE="button" VALUE='アニメーション' onClick=" movSpeed=300;
  142.     Ail=0;//画像のインデックス番号(ここでは最初の画像だから0です)<br />
  143.     animation1(Ail)">
  144.       <br />
  145.       <font size="2" COLOR="#ffffff">↑<br />
  146.       </font>
  147.       <font size="2" COLOR="#000080">下記画像が全て取り込まれた後クリックしてください</font><br />
  148.   </div>
  149. </FORM>

  151. <p align="center"><a href="index_0000.php">リセット</a><br />
  152. <font size="2" COLOR="#990000">↑<br />再度アニメーションを見る場合は、リセットをクリックして下さい。</font><br />
  153. <br />

  155. <A HREF="javascript:WinCls()">ウィンドウを閉じます。</A>
  156. </p>

  158. <div id="anima">
  159. <div align="center">
  160. <table align="center" dir="ltr" border="0" cellspacing="1">
  161. <tr>
  162. <td bgcolor="#aaaaaa"><a href="history/today/0000.jpg"><img src="history/today/0000.jpg" border="1" width="34" height="28"></a><br /><center>
  163. 00:00</center></td>
  164. <td bgcolor="#aaaaaa"><a href="history/today/0001.jpg"><img src="history/today/0001.jpg" border="1" width="34" height="28"></a><br /><center>
  165. 00:01</center></td>
  166. <td bgcolor="#aaaaaa"><a href="history/today/0002.jpg"><img src="history/today/0002.jpg" border="1" width="34" height="28"></a><br /><center>
  167. 00:02</center></td>
  168. <td bgcolor="#aaaaaa"><a href="history/today/0003.jpg"><img src="history/today/0003.jpg" border="1" width="34" height="28"></a><br /><center>
  169. 00:03</center></td>
  170. <td bgcolor="#aaaaaa"><a href="history/today/0004.jpg"><img src="history/today/0004.jpg" border="1" width="34" height="28"></a><br /><center>
  171. 00:04</center></td>
  172. <td bgcolor="#aaaaaa"><a href="history/today/0005.jpg"><img src="history/today/0005.jpg" border="1" width="34" height="28"></a><br /><center>
  173. 00:05</center></td>
  174. <td bgcolor="#aaaaaa"><a href="history/today/0006.jpg"><img src="history/today/0006.jpg" border="1" width="34" height="28"></a><br /><center>
  175. 00:06</center></td>
  176. <td bgcolor="#aaaaaa"><a href="history/today/0007.jpg"><img src="history/today/0007.jpg" border="1" width="34" height="28"></a><br /><center>
  177. 00:07</center></td>
  178. <td bgcolor="#aaaaaa"><a href="history/today/0008.jpg"><img src="history/today/0008.jpg" border="1" width="34" height="28"></a><br /><center>
  179. 00:08</center></td>
  180. <td bgcolor="#aaaaaa"><a href="history/today/0009.jpg"><img src="history/today/0009.jpg" border="1" width="34" height="28"></a><br /><center>
  181. 00:09</center></td>
  182. <td bgcolor="#aaaaaa"><a href="history/today/0010.jpg"><img src="history/today/0010.jpg" border="1" width="34" height="28"></a><br /><center>
  183. 00:10</center></td>
  184. <td bgcolor="#aaaaaa"><a href="history/today/0011.jpg"><img src="history/today/0011.jpg" border="1" width="34" height="28"></a><br /><center>
  185. 00:11</center></td>
  186. <td bgcolor="#aaaaaa"><a href="history/today/0012.jpg"><img src="history/today/0012.jpg" border="1" width="34" height="28"></a><br /><center>
  187. 00:12</center></td>
  188. <td bgcolor="#aaaaaa"><a href="history/today/0013.jpg"><img src="history/today/0013.jpg" border="1" width="34" height="28"></a><br /><center>
  189. 00:13</center></td>
  190. <td bgcolor="#aaaaaa"><a href="history/today/0014.jpg"><img src="history/today/0014.jpg" border="1" width="34" height="28"></a><br /><center>
  191. 00:14</center></td>
  192. <td bgcolor="#aaaaaa"><a href="history/today/0015.jpg"><img src="history/today/0015.jpg" border="1" width="34" height="28"></a><br /><center>
  193. 00:15</center></td>
  194. <td bgcolor="#aaaaaa"><a href="history/today/0016.jpg"><img src="history/today/0016.jpg" border="1" width="34" height="28"></a><br /><center>
  195. 00:16</center></td>
  196. <td bgcolor="#aaaaaa"><a href="history/today/0017.jpg"><img src="history/today/0017.jpg" border="1" width="34" height="28"></a><br /><center>
  197. 00:17</center></td>
  198. <td bgcolor="#aaaaaa"><a href="history/today/0018.jpg"><img src="history/today/0018.jpg" border="1" width="34" height="28"></a><br /><center>
  199. 00:18</center></td>
  200. <td bgcolor="#aaaaaa"><a href="history/today/0019.jpg"><img src="history/today/0019.jpg" border="1" width="34" height="28"></a><br /><center>
  201. 00:19</center></td>
  202. </tr>

  204. <tr>
  205. <td bgcolor="#aaaaaa"><a href="history/today/0020.jpg"><img src="history/today/0020.jpg" border="1" width="34" height="28"></a><br /><center>
  206. 00:20</center></td>
  207. <td bgcolor="#aaaaaa"><a href="history/today/0021.jpg"><img src="history/today/0021.jpg" border="1" width="34" height="28"></a><br /><center>
  208. 00:21</center></td>
  209. <td bgcolor="#aaaaaa"><a href="history/today/0022.jpg"><img src="history/today/0022.jpg" border="1" width="34" height="28"></a><br /><center>
  210. 00:22</center></td>
  211. <td bgcolor="#aaaaaa"><a href="history/today/0023.jpg"><img src="history/today/0023.jpg" border="1" width="34" height="28"></a><br /><center>
  212. 00:23</center></td>
  213. <td bgcolor="#aaaaaa"><a href="history/today/0024.jpg"><img src="history/today/0024.jpg" border="1" width="34" height="28"></a><br /><center>
  214. 00:24</center></td>
  215. <td bgcolor="#aaaaaa"><a href="history/today/0025.jpg"><img src="history/today/0025.jpg" border="1" width="34" height="28"></a><br /><center>
  216. 00:25</center></td>
  217. <td bgcolor="#aaaaaa"><a href="history/today/0026.jpg"><img src="history/today/0026.jpg" border="1" width="34" height="28"></a><br /><center>
  218. 00:26</center></td>
  219. <td bgcolor="#aaaaaa"><a href="history/today/0027.jpg"><img src="history/today/0027.jpg" border="1" width="34" height="28"></a><br /><center>
  220. 00:27</center></td>
  221. <td bgcolor="#aaaaaa"><a href="history/today/0028.jpg"><img src="history/today/0028.jpg" border="1" width="34" height="28"></a><br /><center>
  222. 00:28</center></td>
  223. <td bgcolor="#aaaaaa"><a href="history/today/0029.jpg"><img src="history/today/0029.jpg" border="1" width="34" height="28"></a><br /><center>
  224. 00:29</center></td>
  225. <td bgcolor="#aaaaaa"><a href="history/today/0030.jpg"><img src="history/today/0030.jpg" border="1" width="34" height="28"></a><br /><center>
  226. 00:30</center></td>
  227. <td bgcolor="#aaaaaa"><a href="history/today/0031.jpg"><img src="history/today/0031.jpg" border="1" width="34" height="28"></a><br /><center>
  228. 00:31</center></td>
  229. <td bgcolor="#aaaaaa"><a href="history/today/0032.jpg"><img src="history/today/0032.jpg" border="1" width="34" height="28"></a><br /><center>
  230. 00:32</center></td>
  231. <td bgcolor="#aaaaaa"><a href="history/today/0033.jpg"><img src="history/today/0033.jpg" border="1" width="34" height="28"></a><br /><center>
  232. 00:33</center></td>
  233. <td bgcolor="#aaaaaa"><a href="history/today/0034.jpg"><img src="history/today/0034.jpg" border="1" width="34" height="28"></a><br /><center>
  234. 00:34</center></td>
  235. <td bgcolor="#aaaaaa"><a href="history/today/0035.jpg"><img src="history/today/0035.jpg" border="1" width="34" height="28"></a><br /><center>
  236. 00:35</center></td>
  237. <td bgcolor="#aaaaaa"><a href="history/today/0036.jpg"><img src="history/today/0036.jpg" border="1" width="34" height="28"></a><br /><center>
  238. 00:36</center></td>
  239. <td bgcolor="#aaaaaa"><a href="history/today/0037.jpg"><img src="history/today/0037.jpg" border="1" width="34" height="28"></a><br /><center>
  240. 00:37</center></td>
  241. <td bgcolor="#aaaaaa"><a href="history/today/0038.jpg"><img src="history/today/0038.jpg" border="1" width="34" height="28"></a><br /><center>
  242. 00:38</center></td>
  243. <td bgcolor="#aaaaaa"><a href="history/today/0039.jpg"><img src="history/today/0039.jpg" border="1" width="34" height="28"></a><br /><center>
  244. 00:39</center></td>
  245. </tr>

  247. <tr>
  248. <td bgcolor="#aaaaaa"><a href="history/today/0040.jpg"><img src="history/today/0040.jpg" border="1" width="34" height="28"></a><br /><center>
  249. 00:40</center></td>
  250. <td bgcolor="#aaaaaa"><a href="history/today/0041.jpg"><img src="history/today/0041.jpg" border="1" width="34" height="28"></a><br /><center>
  251. 00:41</center></td>
  252. <td bgcolor="#aaaaaa"><a href="history/today/0042.jpg"><img src="history/today/0042.jpg" border="1" width="34" height="28"></a><br /><center>
  253. 00:42</center></td>
  254. <td bgcolor="#aaaaaa"><a href="history/today/0043.jpg"><img src="history/today/0043.jpg" border="1" width="34" height="28"></a><br /><center>
  255. 00:43</center></td>
  256. <td bgcolor="#aaaaaa"><a href="history/today/0044.jpg"><img src="history/today/0044.jpg" border="1" width="34" height="28"></a><br /><center>
  257. 00:44</center></td>
  258. <td bgcolor="#aaaaaa"><a href="history/today/0045.jpg"><img src="history/today/0045.jpg" border="1" width="34" height="28"></a><br /><center>
  259. 00:45</center></td>
  260. <td bgcolor="#aaaaaa"><a href="history/today/0046.jpg"><img src="history/today/0046.jpg" border="1" width="34" height="28"></a><br /><center>
  261. 00:46</center></td>
  262. <td bgcolor="#aaaaaa"><a href="history/today/0047.jpg"><img src="history/today/0047.jpg" border="1" width="34" height="28"></a><br /><center>
  263. 00:47</center></td>
  264. <td bgcolor="#aaaaaa"><a href="history/today/0048.jpg"><img src="history/today/0048.jpg" border="1" width="34" height="28"></a><br /><center>
  265. 00:48</center></td>
  266. <td bgcolor="#aaaaaa"><a href="history/today/0049.jpg"><img src="history/today/0049.jpg" border="1" width="34" height="28"></a><br /><center>
  267. 00:49</center></td>
  268. <td bgcolor="#aaaaaa"><a href="history/today/0050.jpg"><img src="history/today/0050.jpg" border="1" width="34" height="28"></a><br /><center>
  269. 00:50</center></td>
  270. <td bgcolor="#aaaaaa"><a href="history/today/0051.jpg"><img src="history/today/0051.jpg" border="1" width="34" height="28"></a><br /><center>
  271. 00:51</center></td>
  272. <td bgcolor="#aaaaaa"><a href="history/today/0052.jpg"><img src="history/today/0052.jpg" border="1" width="34" height="28"></a><br /><center>
  273. 00:52</center></td>
  274. <td bgcolor="#aaaaaa"><a href="history/today/0053.jpg"><img src="history/today/0053.jpg" border="1" width="34" height="28"></a><br /><center>
  275. 00:53</center></td>
  276. <td bgcolor="#aaaaaa"><a href="history/today/0054.jpg"><img src="history/today/0054.jpg" border="1" width="34" height="28"></a><br /><center>
  277. 00:54</center></td>
  278. <td bgcolor="#aaaaaa"><a href="history/today/0055.jpg"><img src="history/today/0055.jpg" border="1" width="34" height="28"></a><br /><center>
  279. 00:55</center></td>
  280. <td bgcolor="#aaaaaa"><a href="history/today/0056.jpg"><img src="history/today/0056.jpg" border="1" width="34" height="28"></a><br /><center>
  281. 00:56</center></td>
  282. <td bgcolor="#aaaaaa"><a href="history/today/0057.jpg"><img src="history/today/0057.jpg" border="1" width="34" height="28"></a><br /><center>
  283. 00:57</center></td>
  284. <td bgcolor="#aaaaaa"><a href="history/today/0058.jpg"><img src="history/today/0058.jpg" border="1" width="34" height="28"></a><br /><center>
  285. 00:58</center></td>
  286. <td bgcolor="#aaaaaa"><a href="history/today/0059.jpg"><img src="history/today/0059.jpg" border="1" width="34" height="28"></a><br /><center>
  287. 00:59</center></td>
  288. </tr>
  289. </div><!-- <div align="center"> -->
  290. </div><!-- <div id="anima"> -->
  291. </center>
  292. </table>
  293. <!-- ▲アニメーションここまで▲ -->

  295. </body>
  296. </html>