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>

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

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

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

  121. </head>

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

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

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

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

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

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

  282. </body>
  283. </html>