tag:blogger.com,1999:blog-46313370817741966692024-03-05T15:27:28.156+09:003Dalbumskwin786http://www.blogger.com/profile/11636870499038520354noreply@blogger.comBlogger42125tag:blogger.com,1999:blog-4631337081774196669.post-39264181198153417152015-09-24T13:07:00.001+09:002015-09-24T13:19:51.258+09:00Utsunomiya Life Style Magazine 2015/03/31ウのコト UTSUNOMIYA LIFE STYLE MAGAZINE H27/03/31号掲載 場所<br />
+ 宇都宮美術館<br />
+ ダンクソフト サテライトオフィス<br />
<iframe src="https://www.google.com/maps/d/embed?mid=zTGKTbBNXyls.khpZAaq-ZNaM" width="640" height="480"></iframe>
<p />
下記の画像をクリックで3D表示モード。 <br />
再生には Unity WebPlayer 用のPluginのが必要となります。<br />
Chrome では再生できません。 Safari, Firefox, IE9 などで試してみてください。<br />
うまく再生できない場合、ブラウザをリロードしてみてください。<br />
<p/ >
カーソルキーで移動<br />
数字の 1、2 でストリート・ビュー画像を 表示、表示停止 します。<br />
option (Mac), Alt(Windows) キーでカメラの角度が鳥瞰モードに切り替わります。<br />
<a href="https://museumincloud.blob.core.windows.net/webplay01/webPlay01Html.html?map=36.56123,139.8976,svc,36.56139,139.8977,forcekml{zTGKTbBNXyls.khpZAaq-ZNaM}">
<img src="https://pbs.twimg.com/media/CPb7QN7UwAALrO1.png"></a>
<a href="https://museumincloud.blob.core.windows.net/webplay01/webPlay01Html.html?map=36.55777,139.8889,forcekml{zTGKTbBNXyls.khpZAaq-ZNaM}">
<img src="https://pbs.twimg.com/media/CPbxTvVUcAAmpiJ.png">
</a>
kwin786http://www.blogger.com/profile/11636870499038520354noreply@blogger.com0tag:blogger.com,1999:blog-4631337081774196669.post-53295231998604275112015-09-18T14:04:00.001+09:002015-09-18T14:39:40.041+09:00Google Static Map
<a href="http://museumincloud.blob.core.windows.net/webplaydocstreamed/WebPlayDocStreamedHtml.html">
http://museumincloud.blob.core.windows.net/webplaydocstreamed/WebPlayDocStreamedHtml.html</a>
<p />
<iframe src="https://www.google.com/maps/d/embed?mid=zTGKTbBNXyls.ktN91jsqn9Ro" width="640" height="480"></iframe>
<a href="https://museumincloud.blob.core.windows.net/webplay01/webPlay01Html.html">
https://museumincloud.blob.core.windows.net/webplay01/webPlay01Html.html
</a>
<p />
<iframe src="https://www.google.com/maps/d/embed?mid=zTGKTbBNXyls.kCqduWbWVOD8" width="640" height="480"></iframe>
<p />
<img src="https://pbs.twimg.com/media/COTT9bVUYAAxKAn.png">
<a href="https://museumincloud.blob.core.windows.net/webplay01/webPlay01Html.html?map=2.80612,-11.44514,forcekml{zTGKTbBNXyls.ktN91jsqn9Ro}">
https://museumincloud.blob.core.windows.net/webplay01/webPlay01Html.html?map=2.80612,-11.44514,forcekml{zTGKTbBNXyls.ktN91jsqn9Ro}
</a>
<p />
<a href="https://museum3d.azurewebsites.net/">
https://museum3d.azurewebsites.net/
</a>
<p />
<a href="https://twitter.com/kwinTW">
https://twitter.com/kwinTW
</a>kwin786http://www.blogger.com/profile/11636870499038520354noreply@blogger.com0tag:blogger.com,1999:blog-4631337081774196669.post-24944254103334588942014-03-07T15:27:00.001+09:002018-04-26T22:20:46.676+09:00museumInSlate<h2>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif; font-size: x-large;"><gs class="GINGER_SOFTWARE_mark" ginger_software_uiphraseguid="98ad4750-7894-4cd4-a77c-c853ec551372" id="4783063d-c95b-4b96-ae98-d83f94390268"><gs class="GINGER_SOFTWARE_mark" ginger_software_uiphraseguid="dcaf8098-33f8-4c75-90e0-fe122e5c631f" id="5af93f17-c142-4568-be06-a369131da536"><gs class="GINGER_SOFTWARE_mark" ginger_software_uiphraseguid="d8ab244f-fc1b-4852-a82a-4da2a8102aba" id="98a25d65-b8b9-40d1-8758-8df097718577"><gs class="GINGER_SOFTWARE_mark" ginger_software_uiphraseguid="05ff6ab6-7bac-4d81-a990-f7e76022f687" id="108375ba-782e-4def-9127-8754be17843a"><gs class="GINGER_SOFTWARE_mark" ginger_software_uiphraseguid="75cf56af-613c-4f71-a598-7ba01b087bea" id="e314a744-315a-4889-ae3d-1262d2a45c30">museumInSlate</gs></gs></gs></gs></gs></span>
</h2>
<div class="separator" style="clear: both; text-align: right;">
<a href="https://itunes.apple.com/app/museuminslate/id735011362?mt=8"><img border="0" height="65" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj196t2MhVEU3r-S51lo48gfBWNJ39xfzdfEyOJYaWybXSp2Y2UO6GOsfj_SeVtKKmmX5plaWiaZXgy7bsKnfqilKGlLDtd3i4nRacMxVtKkblG2fnhfmd8l6a2v2PCo5FIfnY0SPtkdLcy/s200/AppStoreiPad2201.png" width="200" /></a>
</div>
<hr />
<div style="clear: both;">
<span style="color: #cccccc; font-size: 20px;"> </span><br />
<span style="font-size: 20px;"><span style="color: white;">チュートリアル ゲーム</span><br />
<span style="color: #cccccc;"> 写真を2つ絵に設定すれば先に進めます。</span><br />
<span style="color: #cccccc;"> エレベーターに乗り、絵巻を3巻ほど読み進めると、</span><br />
<span style="color: #cccccc;"> クリムトの絵画の部屋に到達して完了。</span><br />
<span style="color: #cccccc;"> この先の絵画に近づくと、リンクしてある新しいアルバムの画廊に</span><br />
<span style="color: #cccccc;"> アクセスできます。</span><br />
<br />
<span style="color: #cccccc;"> また、このエリアでは絵画に独自のアルバムへのリンクを設定することができます。</span>
</span>
<br />
<br />
<span style="color: white; font-size: 20px;">Tutorial game</span><br />
<span style="color: #cccccc; font-size: 20px;"> Proceed with what you by setting the photo to the two paintings.</span><br />
<span style="color: #cccccc; font-size: 20px;"> Take the elevator, and proceed to read about three volumes of the picture scroll.</span>
<br />
<span style="color: #cccccc; font-size: 20px;"> Completion to reach the Klimt paintings of the room.</span><br />
<span style="color: #cccccc; font-size: 20px;"> Approaches the paintings of this former area, you can access the gallery of the new album you have </span>
<br />
<span style="font-size: 20px;"><span style="color: #cccccc; font-size: 20px;"></span><br />
<span style="color: #cccccc;"> In addition, you can set up a link to your own album to <gs class="GINGER_SOFTWARE_mark" ginger_software_uiphraseguid="183f2dda-33e3-42f0-89c9-5f90f1aa95f9" id="3c363bec-9b4b-45d4-8b87-f77c1eeb191a">painting</gs> in this area.</span></span><br />
<div>
<br /></div>
</div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5mIv2rbJXiKiHLcuUpo6rxWgthxIvACC7LE7UnxP6ygpYBZ3jLdLX1a9Wm-CXYx4y4uvkslwzW_izbBWd8hXidPi6kXg34pH3zadfnFd2zYe3h-XPTwGzXtfy04Z43-2otxx9b3Q7i51I/s1600/museumInSlate0.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="493" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5mIv2rbJXiKiHLcuUpo6rxWgthxIvACC7LE7UnxP6ygpYBZ3jLdLX1a9Wm-CXYx4y4uvkslwzW_izbBWd8hXidPi6kXg34pH3zadfnFd2zYe3h-XPTwGzXtfy04Z43-2otxx9b3Q7i51I/s640/museumInSlate0.png" width="640" /></a></div>
<hr />
<br />
<h3 style="clear: both; text-align: left;">
</h3>
<h3 style="clear: both; text-align: left;">
<span style="font-size: large;">
操作ガイド / Operations Guide</span></h3>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRCXiItOdY3hkFdPcfQAYCanLqyhhbSchfwFwvWjhpAcIwuIStb2cQWzZZvRN-yGFsKCuMqXsH3T0GD2xpr10_NA-ZemPbYFQgLN2YHhG8cOhglUrCmAXMBJmRx5n4p4iR6WWg0HDgkg83/s1600/museumInSlate1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="484" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRCXiItOdY3hkFdPcfQAYCanLqyhhbSchfwFwvWjhpAcIwuIStb2cQWzZZvRN-yGFsKCuMqXsH3T0GD2xpr10_NA-ZemPbYFQgLN2YHhG8cOhglUrCmAXMBJmRx5n4p4iR6WWg0HDgkg83/s640/museumInSlate1.png" width="640" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIImO9migxj6LOf263T89qVP1UaepYWHUSAP3DDf-Ot8VBhgY6-Y_0WNO5-zGOIWdHfbGe3A4hZ9oVnLrKbN5bvDGdxT-L5nts5CSTurK5cCcPUtneOEQ1uV7U4fEhItCedBgsI7sEJWnm/s1600/museumInSlate2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="478" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIImO9migxj6LOf263T89qVP1UaepYWHUSAP3DDf-Ot8VBhgY6-Y_0WNO5-zGOIWdHfbGe3A4hZ9oVnLrKbN5bvDGdxT-L5nts5CSTurK5cCcPUtneOEQ1uV7U4fEhItCedBgsI7sEJWnm/s640/museumInSlate2.png" width="640" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8F07YjUWfUzepQSOfNd0-EMEpjHhNkHRWvdozJToaJBER9sScPfGSBDRhWnA4bv1B_U3UJD87FIeFs99OYcoc9bjaVf85mtDtm8Td6OZ2JdIsUYOm8DXQxee3Ialg757UfzUuamryH2gn/s1600/museumInSlate3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="492" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8F07YjUWfUzepQSOfNd0-EMEpjHhNkHRWvdozJToaJBER9sScPfGSBDRhWnA4bv1B_U3UJD87FIeFs99OYcoc9bjaVf85mtDtm8Td6OZ2JdIsUYOm8DXQxee3Ialg757UfzUuamryH2gn/s640/museumInSlate3.png" width="640" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_rqlDibAeIm8JGbSnuZQ1TXZdmaalYFUS8g4h2ZspojGQGm3oIH0tKBcF0f9V-Hk8GNihqoJO_XW3mvweOTtypn6ULkFNj3mevJ2n6o7vonThrIpeus1IGRE82w53l-h_5jp3FaOYZxN2/s1600/museumInSlate4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="478" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_rqlDibAeIm8JGbSnuZQ1TXZdmaalYFUS8g4h2ZspojGQGm3oIH0tKBcF0f9V-Hk8GNihqoJO_XW3mvweOTtypn6ULkFNj3mevJ2n6o7vonThrIpeus1IGRE82w53l-h_5jp3FaOYZxN2/s640/museumInSlate4.png" width="640" /></a>
</div>
<hr />
<br />
<h3>
<a href="museuminslate://3-4_Birth2/fbAid170251749687065_1073741834?createPlist"><br /></a></h3>
<h3>
<a href="museuminslate://3-4_Birth2/fbAid170251749687065_1073741834?createPlist"><span style="font-size: large;">サンプルアルバム / Sample Albums</span></a></h3>
<a href="museuminslate://3-4_Birth2/fbAid170251749687065_1073741834?createPlist"><br /></a>
<br />
<h4>
<span style="font-weight: normal;">クリックするとアプリケーションが起動します。<br />
<gs class="GINGER_SOFTWARE_mark" ginger_software_uiphraseguid="8db1cad5-7cab-4210-b4b4-164c06d6cf34" id="9c2c9250-5da6-482f-a226-4ec77e5f4c7c"><gs class="GINGER_SOFTWARE_mark" ginger_software_uiphraseguid="13ce7b0a-03e6-45f6-89ca-0c64046b4e27" id="8c36e3d3-aca1-4ed4-af71-2cd960b87ce2">Application</gs></gs> will start when you click.</span></h4>
<a href="museuminslate://3-4_Birth2/fbAid170251749687065_1073741834?createPlist"><br /></a>
<a href="museuminslate://3-4_Birth2/fbAid170251749687065_1073741834?createPlist"><br /></a>
<a href="museuminslate://3-4_Birth2/fbAid170251749687065_1073741834?createPlist"><br /></a>
<a href="museuminslate://3-4_Birth2/fbAid170251749687065_1073741834?createPlist">*</a>
<a href="museuminslate://3-4_Birth2/fbAid170251749687065_1073741834">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjudYI2_I-gDGjhS9MYIe8unl-ZL4LqN336h00zIcl5LxzBr3audAzNW9ShyphenhyphenI5j9KJfG8rD9DYp8IYH1t_gGUkakTt5arGSsSr16MJ3SFvlbblq9LvRNPGs-AAdJbMRct_GJwz0s-jeWbFq/s320/1.jpg" />
</a>
<a href="museuminslate://3-4_Birth2/fbAid170251749687065_54182?createPlist">*</a>
<a href="museuminslate://3-4_Birth2/fbAid170251749687065_54182" imageanchor="1">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPrApyFj_aE560dumNwZbjIBATWuV8xQU9rVii4uEHk6ACiT8yaxdPxc-Febj9g90H-iE1gxj2_wgMYfozaLgarvUFmqq8pzpwNvIN_oGwSfyID_VtDk3Gkps7GSNhkdyEA3nrwu5Yylo5/s1600/1.jpg" width="120" />
</a>
<a href="museuminslate://3-4_Birth2/fbAid170251749687065_81727?createPlist">□</a>
<a href="museuminslate://3-4_Birth2/fbAid170251749687065_81727" imageanchor="1">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifRiQ-cuT3e2Va0X669I19dFBdJKDrXi3-YydbrANabqY3BH5iUz6xxgg0fUf9Nfe7izPHwm01FEQWtc9YAhz3r3-ZfHguvu0usoEQGlQRgwH4M3WFtdfKU9LlZ5yY9TWLP3DnFisdqy8L/s1600/1.jpg" width="120" />
</a>
<a href="museuminslate://3-4_Birth2/fbAid170251749687065_81723?createPlist">□</a>
<a href="museuminslate://3-4_Birth2/fbAid170251749687065_81723" imageanchor="1">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNErxyCoBG8BKqOBjDF3reEvv8i6mjJ2zCPLXFi4_WE4KCbc1Fzec2V2HPUc4XBaT5fqGjN3rQFGH_t2VQPBM1hLtHmO7Je5RWgPtm93oiCGlkUmFHChH8QSvVQuKOeJ0Oifb8BOkBPHba/s1600/1.jpg" width="120" />
</a>
<a href="museuminslate://3-4_Birth2/fbAid170251749687065_45304?createPlist">*</a>
<a href="museuminslate://3-4_Birth2/fbAid170251749687065_45304" imageanchor="1">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFWS6wL-66-i6b16lz7dtukaAEKsYeIgNWZtLtY0-dlo-0Lqt4llXm8w1M_7n4ctbY5JRp7Yx91L8yWzKoR13HFcWt5X0HKpwUP7MK7bSc9yOtvmGThqR_jBIxFAIyqnYo5NoA-MW6yz5y/s1600/1.jpg" width="120" />
</a>
<a href="museuminslate://3-4_Birth2/fbAid170251749687065_45303?createPlist">*</a>
<a href="museuminslate://3-4_Birth2/fbAid170251749687065_45303" imageanchor="1">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZPmmProHLNNdCq6F8LO7v8HJvz8CQKWL2xmfB23mxL7L7S6EjklK93siz7sIhzFTM5TMsLWUg-OAWz2I6AQ7UGK2PLUR1auzPTFDvCHmdz8PWALEQfhxNX58q4B7Ep53fdv8NPHkk7Hxa/s1600/1.jpg" width="120" /></a>
<a href="museuminslate://3-4_Birth2/fbAid170251749687065_81592?createPlist">*</a>
<a href="museuminslate://3-4_Birth2/fbAid170251749687065_81592" imageanchor="1">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTLzEILk6iVviLkk640_uwWlD7i89vQDQumNm0SR0IAYLIci020X_bVMFx5uzBrvC9e9OHGFiciRNvEhS6qDXlJXFX2lqLM28y2BrCnLCuurAqjRvDhyA_WpOL6VRNbhW8ZLbvH2Saf8ps/s1600/1.jpg" width="220" />
</a>
<a href="museuminslate://3-4_Birth2/fbAid170251749687065_81595?createPlist">*</a>
<a href="museuminslate://3-4_Birth2/fbAid170251749687065_81595" imageanchor="1">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhPGLeJPQsYMN9hYey2Ik2Z_HkWhvrdZdRA6BDcQmT_7yCx0IBTfQLJgxkIRhQEYz45QCjZhjcFxF9wEgIritaFQPDpSpAmfbmfq5B3hysfRs4fzftz5ubA2CATTXuR2HhbVeH1ablvdDx/s1600/img56_s.png" /></a>
<a href="museuminslate://3-4_Birth2/fbAid170251749687065_82042?createPlist">*</a>
<a href="museuminslate://3-4_Birth2/fbAid170251749687065_82042" imageanchor="1">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX8jOlv8fntDYokK4-RNSmgLBrsmhs9AizQWFAe8EhIbfXBPUJq3f576SZX4x-2shoYh994FSa4qW0yrXudX9NAnRh90GDuvULpwVIw8O-lbMlPBwyOdlpJ7PKsJqg-B4vgu3bomRr9xHJ/s1600/img57_s.png" /></a>
<a href="museuminslate://3-4_Birth2/fbAid170251749687065_45305?createPlist">*</a>
<a href="museuminslate://3-4_Birth2/fbAid170251749687065_45305" imageanchor="1">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeZhvuvhzR3wGm8hd_LAqotPGLPgWXG0RMVzlHgig0Metx_No0orpZyZsUDqb-wY203uHwJaAIhc-P1-bErS6cIhYG9ODphvOGqtnhaTGv4m46_-c2j9eB4N04stcVAvh1rwGFGMz0ppF6/s1600/1.jpg" width="180" /> </a>
<a href="museuminslate://3-4_Birth2/fbAid170251749687065_82296?createPlist">*</a>
<a href="museuminslate://3-4_Birth2/fbAid170251749687065_82296" imageanchor="1">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_FO4QcK_mdanMKSgoVmD24UGbIyq2LqA-lZAYYpT-68zRAL_5G4G4IqANcX9M0HhKSQWUShli-mLDAvclhnAeJ1RDpyJq5tGBmL35hSsqzNyZ6ynV-0zOrJdjxI3dOu1Z-fOLOhZ49O1m/s1600/img55_s.png" />
</a>
<a href="museuminslate://3-4_Birth2/fbAid170251749687065_82000?createPlist">*</a>
<a href="museuminslate://3-4_Birth2/fbAid170251749687065_82000" imageanchor="1">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_M-UljOy7YuVznBaLV5_NNNJ69b4P2qWbMDhophVRmlgmSJCy28cgrFZ4d8-Oe-FLMHKjYkEJEqkl0j7Oc8RFYaeXMFKkemN_v773zdV__pFLlf0dNVfUDQ6qMqHWgK7HzFEXDTzvlOwX/s1600/1.jpg" width="120" />
</a>
<a href="museuminslate://3-4_Birth2/fbAid170251749687065_82276?createPlist">*</a>
<a href="museuminslate://3-4_Birth2/fbAid170251749687065_82276" imageanchor="1">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwcfnYrZEfJTdsS4H5QQbDXmNWrGgvyaDK5tzH_W0zT4l38lhTWaZRS0BgcrthBs98FRl9k9qiPGHzrvsmZZgmavpsrySTFWe0iwS5sWTKJ6BAfkbv7NU62swklNZGzvCt7AA1AK8Ay0Qm/s1600/img54_s.png" /></a>
<a href="museuminslate://3-4_Birth2/fbAid170251749687065_104387?createPlist">*</a>
<a href="museuminslate://3-4_Birth2/fbAid170251749687065_104387" imageanchor="1">
<img border="0" src="https://i.pinimg.com/564x/3c/61/59/3c6159ced2e20ec18127ef8d2e34469a.jpg" width="320" /></a>
kwin786http://www.blogger.com/profile/11636870499038520354noreply@blogger.com0tag:blogger.com,1999:blog-4631337081774196669.post-57833440947648319292014-03-07T10:52:00.003+09:002014-03-07T15:26:46.175+09:00albums<!--<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">-->
<html lang="en">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0, user-scalable=YES" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<style type="text/css" media="screen">
body { background-color: black; color: white; font-family: 'Lucida Grande', Verdana, Arial; font-size: 12px;
background-image: -webkit-gradient(radial,50% 500,1,50% 500,400, from(rgba(255, 255, 255, 0.3)),to(rgba(255, 255, 255, 0)));
background-repeat: no-repeat;
}
#container { width: 100%; height: 850px;
-webkit-perspective: 800; /* For compatibility with iPhone 3.0, we leave off the units here */
-webkit-perspective-origin: 50% 225px;
}
/* 0 -> -120 -100 -> -50 2012/02/07 */
#floor { position:absolute;top:-10%; left:-50% ; margin-top:-120px; margin-left:-50px;
-webkit-mask-image:-webkit-gradient(radial, center center, 0, center center, 350,from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
-webkit-transform: rotateX(90deg) rotateY(0deg) rotateZ(90deg) translateZ(-210px) translateY(10px);
}
.mapCss { position:absolute;top:0%; left:0% ; margin-top:0px; margin-left:-0px; width:500px; height:500px;/* 2012/11/27 */
-webkit-mask-image:-webkit-gradient(radial, center center, 0, center center, 350,from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
-webkit-transform: rotateX(90deg) rotateY(0deg) rotateZ(90deg) translateZ(-210px) translateY(10px);
opacity:0.8; /* translateY などはきいていないが webkit-transform はきいている これをなくすと opacity の値を小さくする必要がある */
}
#floorBallLeft { position:absolute;top:-10%; left:10% ; margin-top:0px; margin-left:-90px; height:50px; opacity:0.5;
-webkit-transform: rotateX(15deg) rotateY(45deg) rotateZ(0deg) translateZ(0px) translateY(0px); }
#floorBallRight { position:absolute;top:-10%; right:15% ; margin-top:0px; margin-right:-90px; height:50px; width:45px;opacity:0.5;
-webkit-transform: rotateX(10deg) rotateY(-45deg) rotateZ(0deg) translateZ(0px) translateY(0px); }
#floorBallHome { position:absolute;top:20%; left:35% ; margin-top:60px; margin-left:0px; height:35px; width:75px; opacity:0.3;
-webkit-transform: rotateX(15deg) rotateY(0deg) rotateZ(0deg) translateZ(0px) translateY(0px); }
/* #floorC { position:absolute;top:95%; left:50% ;-webkit-transform:scale(3);}
#floorR { position:absolute;top:90%; right:15% ; margin-top:0px; margin-right:0px; -webkit-transform:scale(3);}
#floorL { position:absolute;top:90%; left: 15% ; margin-top:0px; margin-left:0px ; -webkit-transform:scale(3);}*/
a:link { text-decoration: none; color:#DF1FBB; }
a:active { text-decoration: none; color:#DF1FBB; }
a:visited { text-decoration: none; color:#DF1FBB; } /* #555555 */
a:hover { text-decoration: none; color:#DF1FBB; }
li { display:inline-block; }
#floor_text{ position: absolute;
top:80%; left:-80%; height: 800px; width: 420px;
border: 0px solid white;
-webkit-box-sizing: border-box; text-align: left; font-family: Times, serif;
font-size: 20pt; font-color: white; /*font-size: 24pt; color: white; */
}
#stage { width: 100%; height: 100%; -webkit-transition: -webkit-transform 2s; -webkit-transform-style: preserve-3d; }
#shape { position: relative; top: 50px; margin: 0 auto; height: 400px; width: 204px; -webkit-transform-style: preserve-3d; }
#shapeX { margin: 0 auto; height: 200px; width: 200px; -webkit-transform-style: preserve-3d; }
.plane { position: absolute; top:0%; /*top:-150%; */
height: 400px; width: 204px; border: 0px solid white;
text-align: center; font-family: Times, serif; font-size: 124pt; color: black;
background-image: -webkit-gradient(linear, left bottom, right top,from(rgba(0,0,0,0)), to(rgba(0,0,0,1.0)));
background-repeat: no-repeat;
background-color: rgba( 0, 0, 0, 0.4); /* 0.6 */
-webkit-box-sizing: border-box;
-webkit-transition: -webkit-transform 2s, opacity 2s; -webkit-backface-visibility: hidden; /* hidden */
}
.subplane {position: absolute; width:204px;top:-335px; border: 0px; padding:0px; opacity:0.5;
-webkit-transition: -webkit-transform 2s,opacity 2s;-webkit-backface-visibility:visible;}
#shape.backfaces .plane { -webkit-backface-visibility: visible; }
@-webkit-keyframes spin { from { -webkit-transform: rotateY(0); } to { -webkit-transform: rotateY(-360deg); } }
@-webkit-keyframes spinR{ from { -webkit-transform: rotateY(0); } to { -webkit-transform: rotateY( 360deg); } }
@-webkit-keyframes spin0{ }
/* 上部の説明文の書式設定 背景は灰色で角を丸める .controls {width: 70%; height:10%; margin: 0 auto; padding: 5px 20px; */
.controls { opacity:0.6; /* width: 80%; height:40%; */
position:absolute;top:80%; left:34%; height:36px; /* bottom:1% */
margin: 0 auto; padding: 5px 10px; background-color: rgba(255, 255, 255, 0.15);
-webkit-border-radius: 48px;
/* -webkit-touch-callout: none;きかない */
}
.ctlBtn { font-size:10pt; opacity:0.8; margin-bottom:7px;}
.ctlBtn2 { font-size:10pt; opacity:0.8; margin-bottom:15px; font-family:Curier;}
.controls > div { margin: 10px; }
/* ---------- ring2 styles ------------- */
.ring2 > .s1 { -webkit-transform: rotateY( 0deg) translateY( 0px) translateZ(-380px); }
.ring2 > .s2 { -webkit-transform: rotateY( -30deg) translateY( 0px) translateZ(-380px); }
.ring2 > .s3 { -webkit-transform: rotateY( -60deg) translateY( 0px) translateZ(-380px); }
.ring2 > .s4 { -webkit-transform: rotateY( -90deg) translateZ(-380px); }
.ring2 > .s5 { -webkit-transform: rotateY( -120deg) translateZ(-380px); }
.ring2 > .s6 { -webkit-transform: rotateY( -150deg) translateZ(-380px); }
.ring2 > .s7 { -webkit-transform: rotateY( -180deg) translateZ(-380px); }
.ring2 > .s8 { -webkit-transform: rotateY( -210deg) translateZ(-380px); }
.ring2 > .s9 { -webkit-transform: rotateY( 120deg) translateZ(-380px); }
.ring2 > .s10 { -webkit-transform: rotateY( 90deg) translateZ(-380px); }
.ring2 > .s11 { -webkit-transform: rotateY( -300deg) translateZ(-380px); }
.ring2 > .s12 { -webkit-transform: rotateY( -330deg) translateZ(-380px); }
.ring2 > .s13 { -webkit-transform: translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s14 { -webkit-transform: rotateY( -20deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s15 { -webkit-transform: rotateY( -40deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s16 { -webkit-transform: rotateY( -60deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s17 { -webkit-transform: rotateY( -80deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s18 { -webkit-transform: rotateY( -100deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s19 { -webkit-transform: rotateY( -120deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s20 { -webkit-transform: rotateY( -140deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s21 { -webkit-transform: rotateY( -160deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s22 { -webkit-transform: rotateY( -180deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s23 { -webkit-transform: rotateY( -200deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s24 { -webkit-transform: rotateY( -220deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s25 { -webkit-transform: rotateY( -240deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s26 { -webkit-transform: rotateY( -260deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s27 { -webkit-transform: rotateY( -280deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s28 { -webkit-transform: rotateY( -300deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s29 { -webkit-transform: rotateY( -320deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s30 { -webkit-transform: rotateY( -340deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.slideIn {-webkit-animation-timing-function: ease ;-webkit-animation-duration: 1500ms;-webkit-animation-name: slidein; margin-right:0px;}
@-webkit-keyframes slidein {from { margin-top: 120px; opacity:0; } to { margin-top: 0px; opacity:1; } }
.slideFloor {-webkit-animation-timing-function: ease;-webkit-animation-duration: 1000ms;-webkit-animation-name: slidein; margin-left:0px;}
@-webkit-keyframes slideFloor {from { margin-top: 120px; opacity:0; } to { margin-top: 0px; opacity:1;} }
.blur, .blur > img {margin: 0; padding: 0; border: 0; }
.blur { position: relative;display: inline-block;font-size: 0; line-height: 0; }
.blur:after { position: absolute;left: 0; top: 0; right: 0; bottom: 0;
-webkit-box-shadow: inset 0px 0px 15px 15px #fff;
box-shadow: inset 0px 0px 15px 15px #fff;
content: " ";
}
<!--
#jquery-ui-slider-wrap {padding:0px;text-align: center; width: 38px;border: 0px;border-radius:20px; background-color: rgba(255, 255, 255, 0.15);opacity:0.4; }
#jquery-ui-slider-value {border:0; color: red !important; font-weight: bold; background-color: transparent;margin: 5px; width: 40px; text-align: center; }
#jquery-ui-slider {height: 150px; width:25px;background-color:rgba(255, 255, 255, 0.15); opacity:0.2;opacity:0.2;}
#jquery-ui-slider-wrap2 {padding:0px;text-align: center;width: 38px; border: 0px;border-radius:10px; background-color: rgba(255, 255, 255, 0.15); opacity:0.4; }
#jquery-ui-slider-value2{ border: 0; color: red !important; font-weight: bold; background-color: transparent;margin: 5px;width: 40px; text-align: center; }
#jquery-ui-slider2 { height: 150px; width:25px; background-color:rgba(255, 255, 255, 0.15); opacity:0.2;}
-->
</style>
<link rel="stylesheet" href="alexframework/src/javascript/jquery-ui-1.7.1.custom.css" type="text/css">
<script type="text/javascript" src="alexframework/src/javascript/gear5.js"></script>
<script type="text/javascript" src="alexframework/src/javascript/jquery.min.js"></script>
<script type="text/javascript" src="alexframework/src/javascript/alex.core.js"></script>
<script type="text/javascript" src="alexframework/src/javascript/alex.record.js"></script>
<script type="text/javascript" src="alexframework/src/javascript/albums.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript" ></script>
<script type="text/javascript" src="alexframework/src/javascript/googleMap.js"></script>
<!--<script src="http://code.jquery.com/jquery.min.js"></script>-->
<!--<script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script>-->
<script type="text/javascript" src="alexframework/src/javascript/facebook.js"></script>
<script type="text/javascript" src="alexframework/src/javascript/jquery.ui.min.js"></script>
<script type="text/javascript" src="alexframework/src/javascript/jquery.ui.touch-punch.min.js"></script>
<script type="text/javascript">
function setCss(currentWidth,startDeg, panoramaMode){ // 2012/11/26 add startDeg, panoramaMode
if ( navigator.userAgent.match( /iPhone/i ) || navigator.userAgent.match( /iPod/i ) ) {
alert(navigator.userAgent)
var el = document.getElementById("ctrl1");
el.style.position = 'absolute';
el.style.left = '60px';
el.style.width = '180px';
if(window.navigator.standalone){ el.style.top = '10px'; }
}
shape.style.top='25%';
floor.style.top='30%';
floor.style.left='-50%';
var tY = -1*(720-586)/2;
var tY = 0;
if (window.orientation == 90 || window.orientation == -90||currentWidth > 800){
ctrl2.style.top='60%';ctrl1.style.left='42%';
}
if ( panoramaMode === "3DWall"){ // 2012/11/26
showWall(-1200,startDeg -120); // 20 -> -110
}
$("#getComment").hide();
}
function showWall(x0,rY){ // 2012/11/26
for (var s = 1; s < 13 ; s++){
$("div#s"+ s ).css("top","20%");
tX = x0 + s*204;
$("div#s"+ s ).css("-webkit-transform","rotateY("+rY+"deg)"
+ "translateX("+tX+"px) "
);
}
//$("div#shape").css("-webkit-transform","translateX(500px)");
}
// $.browser.mobileSafari = /webkit.*mobile/i.test(navigator.userAgent)
// if ($.browser.mobileSafari) {
// $.getScript('/public/javascripts/jquery.ui.touch-punch.min.js');
// }
function ctrlToggle(){
$('#jquery-ui-slider-wrap').toggle();
$('#jquery-ui-slider-wrap2').toggle();
$('#ctrl2').toggle();
$('#ctrl1').toggle();
}
<!--
jQuery( function() {
jQuery( '#jquery-ui-slider' ) . slider( {
orientation: 'vertical', animate: 'slow', range: 'min', value: 70, min: -100, max: 300,
slide: function( event, ui ) {
jQuery( '#jquery-ui-slider-value' ) . val( ui.value );
var top = ui.value -100;
shape.style.top= top+ '%';
}
} );
jQuery( '#jquery-ui-slider-value' ) . val( jQuery( '#jquery-ui-slider' ) . slider( 'value' ) );
} );
jQuery( function() {
jQuery( '#jquery-ui-slider2' ) . slider( {
orientation: 'vertical', animate: 'slow', range: 'min', value: 70, min: -200, max: 300,
slide: function( event, ui ) {
jQuery( '#jquery-ui-slider-value2' ) . val( ui.value );
var top = ui.value -100; floor.style.top= top+ '%';
}
} );
jQuery( '#jquery-ui-slider-value2' ) . val( jQuery( '#jquery-ui-slider2' ) . slider( 'value' ) );
} );
jQuery( function() {
jQuery( '#jquery-ui-slider3' ).slider( {
animate:'slow', range: 'min', value: staticRotationY, min: -180, max: 360,
slide: function( event, ui ) {
staticRotationY = ui.value*Math.PI/180;
shape.style.webkitTransform = 'rotateY('+staticRotationY+'rad)';
}
});
} );
-->
</script>
</head>
<body onload="addAnimationHandlers('/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/6.1/Applications/7193F0A5-C5EC-490B-BF92-B73AFEE9A8C1/KwinTabBar2.app',90,'stop','0','768',15,'0')"><!-- 2012/11/26 add panorama 12/24 aZoom-->
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1&appId=231699360296504";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<br/ >
<br />
<div id="container">
<div id="stage">
<div id="shape" class="ring2 ">
<div id="shapeX" class="ring2 ">
<img class="subplane s1 slideIn" id="sub1" style="padding:0px;"/><img class="subplane s2 slideIn" id="sub2" style="padding:0px;"/>
<img class="subplane s3 slideIn" id="sub3" style="padding:0px;"/><img class="subplane s4 slideIn" id="sub4" style="padding:0px;"/>
<img class="subplane s5 slideIn" id="sub5" style="padding:0px;"/><img class="subplane s6 slideIn" id="sub6" style="padding:0px;"/>
<img class="subplane s7 slideIn" id="sub7" style="padding:0px;"/><img class="subplane s8 slideIn" id="sub8" style="padding:0px;"/>
<img class="subplane s9 slideIn" id="sub9" style="padding:0px;"/><img class="subplane s10 slideIn" id="sub10" style="padding:0px;"/>
<img class="subplane s11 slideIn" id="sub11" style="padding:0px;"/><img class="subplane s12 slideIn" id="sub12" style="padding:0px;"/>
<div class="plane s1 slideIn" id="s1" style="margin-left:-18px; width:408px;">
<a href='#' onclick="pop('1','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPrApyFj_aE560dumNwZbjIBATWuV8xQU9rVii4uEHk6ACiT8yaxdPxc-Febj9g90H-iE1gxj2_wgMYfozaLgarvUFmqq8pzpwNvIN_oGwSfyID_VtDk3Gkps7GSNhkdyEA3nrwu5Yylo5/w793-h621-no/1.jpg', '1/0','170251749687065_54182',
'museumInSlate://3-4_Birth2/fbAid170251749687065_54182',
'a_ios','240','60','https://fbcdn-sphotos-b-a.akamaihd.net/hphotos-ak-frc3/t1/s720x720/313453_227147683997471_5132583_n.jpg','0','13','0')">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPrApyFj_aE560dumNwZbjIBATWuV8xQU9rVii4uEHk6ACiT8yaxdPxc-Febj9g90H-iE1gxj2_wgMYfozaLgarvUFmqq8pzpwNvIN_oGwSfyID_VtDk3Gkps7GSNhkdyEA3nrwu5Yylo5/w793-h621-no/1.jpg" width="240" style="margin-left:5px; margin-top:66px; padding:0px;" id="i1"></a>
</div>
<div class="plane s3 slideIn" id="s3" >
<a href='#' onclick="pop('3','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifRiQ-cuT3e2Va0X669I19dFBdJKDrXi3-YydbrANabqY3BH5iUz6xxgg0fUf9Nfe7izPHwm01FEQWtc9YAhz3r3-ZfHguvu0usoEQGlQRgwH4M3WFtdfKU9LlZ5yY9TWLP3DnFisdqy8L/w613-h793-no/1.jpg','3/0','170251749687065_81727','museumInSlate://3-4_Birth2/fbAid170251749687065_81727','a_ios','160','61','https://fbcdn-sphotos-a-a.akamaihd.net/hphotos-ak-ash2/t1/s720x720/538507_365128310199407_1481220093_n.jpg','0','13','0')">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifRiQ-cuT3e2Va0X669I19dFBdJKDrXi3-YydbrANabqY3BH5iUz6xxgg0fUf9Nfe7izPHwm01FEQWtc9YAhz3r3-ZfHguvu0usoEQGlQRgwH4M3WFtdfKU9LlZ5yY9TWLP3DnFisdqy8L/w613-h793-no/1.jpg" width="160" style="margin-left:0px; margin-top:70px; padding:0px;" id="i3"></a>
</div>
<div class="plane s4 slideIn" id="s4" >
<a href='#' onclick="pop('4','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNErxyCoBG8BKqOBjDF3reEvv8i6mjJ2zCPLXFi4_WE4KCbc1Fzec2V2HPUc4XBaT5fqGjN3rQFGH_t2VQPBM1hLtHmO7Je5RWgPtm93oiCGlkUmFHChH8QSvVQuKOeJ0Oifb8BOkBPHba/w575-h793-no/1.jpg','4/0','170251749687065_81723','museumInSlate://3-4_Birth2/fbAid170251749687065_81723','a_ios','160','62','https://fbcdn-sphotos-c-a.akamaihd.net/hphotos-ak-ash3/t1/s720x720/540169_365109120201326_1692796122_n.jpg','0','13','0')">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNErxyCoBG8BKqOBjDF3reEvv8i6mjJ2zCPLXFi4_WE4KCbc1Fzec2V2HPUc4XBaT5fqGjN3rQFGH_t2VQPBM1hLtHmO7Je5RWgPtm93oiCGlkUmFHChH8QSvVQuKOeJ0Oifb8BOkBPHba/w575-h793-no/1.jpg" width="160" style="margin-left:0px; margin-top:70px; padding:0px;" id="i4"></a>
</div>
<div class="plane s6 slideIn" id="s6" style="margin-left:-18px; width:408px;">
<a href='#' onclick="pop('6','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFWS6wL-66-i6b16lz7dtukaAEKsYeIgNWZtLtY0-dlo-0Lqt4llXm8w1M_7n4ctbY5JRp7Yx91L8yWzKoR13HFcWt5X0HKpwUP7MK7bSc9yOtvmGThqR_jBIxFAIyqnYo5NoA-MW6yz5y/w793-h631-no/1.jpg', '6/0','170251749687065_45304','museumInSlate://3-4_Birth2/fbAid170251749687065_45304','a_ios','240','63','https://fbcdn-sphotos-e-a.akamaihd.net/hphotos-ak-prn2/t1/247035_192147500830823_4293116_n.jpg','0','13','0')">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFWS6wL-66-i6b16lz7dtukaAEKsYeIgNWZtLtY0-dlo-0Lqt4llXm8w1M_7n4ctbY5JRp7Yx91L8yWzKoR13HFcWt5X0HKpwUP7MK7bSc9yOtvmGThqR_jBIxFAIyqnYo5NoA-MW6yz5y/w793-h631-no/1.jpg" width="240" style="margin-left:5px; margin-top:64px; padding:0px;" id="i6"></a>
</div>
<div class="plane s7 slideIn" id="s7" >
<a href='#' onclick="pop('7','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZPmmProHLNNdCq6F8LO7v8HJvz8CQKWL2xmfB23mxL7L7S6EjklK93siz7sIhzFTM5TMsLWUg-OAWz2I6AQ7UGK2PLUR1auzPTFDvCHmdz8PWALEQfhxNX58q4B7Ep53fdv8NPHkk7Hxa/w350-h265-no/1.jpg','7/0','170251749687065_45303','museumInSlate://3-4_Birth2/fbAid170251749687065_45303','a_ios','160','64','https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-frc1/t1/247157_192145187497721_2303316_n.jpg','0','13','0')">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZPmmProHLNNdCq6F8LO7v8HJvz8CQKWL2xmfB23mxL7L7S6EjklK93siz7sIhzFTM5TMsLWUg-OAWz2I6AQ7UGK2PLUR1auzPTFDvCHmdz8PWALEQfhxNX58q4B7Ep53fdv8NPHkk7Hxa/w350-h265-no/1.jpg" width="160" style="margin-left:0px; margin-top:100px; padding:0px;" id="i7"></a>
</div>
<div class="plane s9 slideIn" id="s9" style="margin-left:-5px; width:408px;">
<a href='#' onclick="pop('9','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTLzEILk6iVviLkk640_uwWlD7i89vQDQumNm0SR0IAYLIci020X_bVMFx5uzBrvC9e9OHGFiciRNvEhS6qDXlJXFX2lqLM28y2BrCnLCuurAqjRvDhyA_WpOL6VRNbhW8ZLbvH2Saf8ps/w710-h793-no/1.jpg', '9/0','170251749687065_81592','museumInSlate://3-4_Birth2/fbAid170251749687065_81592','a_ios','215','65','https://scontent-b.xx.fbcdn.net/hphotos-ash3/t1/s720x720/540573_364116136967291_401851872_n.jpg','0','13','0')">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTLzEILk6iVviLkk640_uwWlD7i89vQDQumNm0SR0IAYLIci020X_bVMFx5uzBrvC9e9OHGFiciRNvEhS6qDXlJXFX2lqLM28y2BrCnLCuurAqjRvDhyA_WpOL6VRNbhW8ZLbvH2Saf8ps/w710-h793-no/1.jpg" width="215" style="margin-left:5px; margin-top:40px; padding:0px;" id="i9"></a>
</div>
<div class="plane s11 slideIn" id="s11" >
<a href='#' onclick="pop('11','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_M-UljOy7YuVznBaLV5_NNNJ69b4P2qWbMDhophVRmlgmSJCy28cgrFZ4d8-Oe-FLMHKjYkEJEqkl0j7Oc8RFYaeXMFKkemN_v773zdV__pFLlf0dNVfUDQ6qMqHWgK7HzFEXDTzvlOwX/w661-h656-no/1.jpg','11/0','170251749687065_82000','museumInSlate://3-4_Birth2/fbAid170251749687065_82000','a_ios','160','66','https://scontent-b.xx.fbcdn.net/hphotos-ash3/t1/536733_367337586645146_1223932757_n.jpg','0','13','0')">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_M-UljOy7YuVznBaLV5_NNNJ69b4P2qWbMDhophVRmlgmSJCy28cgrFZ4d8-Oe-FLMHKjYkEJEqkl0j7Oc8RFYaeXMFKkemN_v773zdV__pFLlf0dNVfUDQ6qMqHWgK7HzFEXDTzvlOwX/w661-h656-no/1.jpg" width="160" style="margin-left:0px; margin-top:90px; padding:0px;" id="i11"></a></div>
<div id="floor" class="slideFloor" align="center">
<!--<img src='@@@' id="floorImg" width="500" height="500">-->
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgm_ITQc5iAGmmroNHRxwPBAbh3JtDn8zrPnlXilPxCOKWgdJU3302o42xU-a-NRpqvEja6EOkdF2oZCcHsKEPw_J4sCwswkc5cKaCGJC05dMOBSoF92Nj2xK_TKgtFGSU0yao34TKR2EQo/w362-h551-no/1.jpg' id="floorImg" width="500" height="500">
</div>
<span id="floor_text"></span>
</div>
</div>
<!-- <span id="floor_text"></span>-->
</div>
</div>
<div class="controls" id="ctrl1" style="position:absolute;top:2%; left:38%;width:180px; height:32px; ">
<button onmouseover="toggleShape1(100)" onclick="toggleShape1(200)" class="ctlBtn">-Zoom</button>
<button onmouseover="toggleShape1(-100)" onclick="toggleShape1(-200)" class="ctlBtn">Zoom+</button>
</div>
<div class="controls" id="ctrl2" style="position:absolute;width:282px"><!-- style="position:absolute; top:30px;"-->
<table><tr><td style="height:32px">
<!-- west 左画面--><a href="#" onclick="runAction('changeCurrentTitle','0');">
<img src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRUPoV8HgDosuP_l5BqIkXQNdoa7GYp27kpfCqh3NTcxvfh3yrF1AIfz5NUH7j_tv0UizLv1MJNDfkIXbV44181el-z_TW8oykABWSoUnw2S_aBylT1NZhtb57UCyNHy56b2vM8LImcGNT/s1600/gray_ball2.png style="position:absolute;top:-20%;margin-left:-100px; opacity:0.5; padding:0px;width:70px;height:40px;
-webkit-transform:rotateX(10deg) rotateY(50deg); background:none">
</a>
<a href="#" onclick="runAction('fbAlbum','(null),https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-frc3/t1/206055_209445795843887_653104639_n.jpg,prev,0');">
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSLuj4s0z2FJRXkAlK4ivFl9uDiVwCajiX4G6Uy2cvO2yB5B5kLIZlInUUQFBjkNYHfXGH4GDF6gP8RNZPFdKknQR-zZyF-Cb-oWkNqofsD8MJ6NnhXLO6tovfOdkFuT_WebwqHKFEcSUv/s1600/gray_ball.png'
style="-webkit-transform:rotateX(10deg) rotateY(45deg);height:40px; width:48px;opacity:0.5;margin-left:-15px;margin-bottom:3px;background:none"/></a>
</td><td>
<button onclick="autoRotate('left')" class="ctlBtn">
< </button> <button onclick="autoRotate('stop');" class="ctlBtn2">■</button>
<button onclick="autoRotate('right')" class="ctlBtn"> > </button>
</td><td>
<a href="#" onclick="runAction('fbAlbum','(null),https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-frc3/t1/206055_209445795843887_653104639_n.jpg,next,0');">
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSLuj4s0z2FJRXkAlK4ivFl9uDiVwCajiX4G6Uy2cvO2yB5B5kLIZlInUUQFBjkNYHfXGH4GDF6gP8RNZPFdKknQR-zZyF-Cb-oWkNqofsD8MJ6NnhXLO6tovfOdkFuT_WebwqHKFEcSUv/s1600/gray_ball.png'
style="-webkit-transform:rotateX(10deg) rotateY(-45deg);height:40px; width:48px;opacity:0.5;margin-right:-20px;margin-bottom:3px;background:none"/></a>
<!--<button onclick="toggleShape1(400)">-Zoom</button> <button onclick="toggleShape1(-400)">Zoom+</button>-->
</td></tr>
</table>
<!--east 右画面--><a href="#" onclick="runAction('changeCurrentTitle','0');">
<img src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRUPoV8HgDosuP_l5BqIkXQNdoa7GYp27kpfCqh3NTcxvfh3yrF1AIfz5NUH7j_tv0UizLv1MJNDfkIXbV44181el-z_TW8oykABWSoUnw2S_aBylT1NZhtb57UCyNHy56b2vM8LImcGNT/s1600/gray_ball2.png style="position:absolute;top:-20%; right:-28%;opacity:0.5; margin-bottom:3px; width:70px;height:40px;
-webkit-transform:rotateX(10deg) rotateY(-50deg);background:none " />
</a>
<!-- slider -->
<div id="jquery-ui-slider3"></div>
</div>
<!--
@movieUrl@
<div style="position:absolute; bottom:10px;">
<a href="#" onclick='runAction("fbtest","")'>fbtest</a><br />
<a href="#" onclick='runAction("changeCurrentTitle","0")'>Home</a><br />
<a href="#" onclick='runAction("changeCurrentTitle","146")'>parentTitle</a><br />
</div>-->
<input id="_type" type="hidden" value="000" />
<!-- map
<div id="map" style="position:absolute;left:15%; top:0%; margin-top:0px; opacity:0.5; width:600px; height:300px;"></div>
-->
<!-- slider -->
<div id="jquery-ui-slider-wrap" style="position:absolute; top:80px;left:-15px;">
<!--<p style="color:red">plane</p>-->
<input type="text" id="jquery-ui-slider-value" /><div id="jquery-ui-slider"></div>
</div>
<div id="jquery-ui-slider-wrap2" style="position:absolute; top:465px; left:-15px;">
<!--<pstyle="color:red">floor</p>-->
<input type="text" id="jquery-ui-slider-value2" /> <div id="jquery-ui-slider2"></div>
</div>
<!-- hideControl -->
<table><tr><td>
<a href="#" onClick="ctrlToggle();">
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRUPoV8HgDosuP_l5BqIkXQNdoa7GYp27kpfCqh3NTcxvfh3yrF1AIfz5NUH7j_tv0UizLv1MJNDfkIXbV44181el-z_TW8oykABWSoUnw2S_aBylT1NZhtb57UCyNHy56b2vM8LImcGNT/s1600/gray_ball2.png' style='opacity:0.3;width:40px;height:40px;background:none'/>
</a></td><td><br /><br />
<a href="#" onClick="ctrlToggle2();">
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRUPoV8HgDosuP_l5BqIkXQNdoa7GYp27kpfCqh3NTcxvfh3yrF1AIfz5NUH7j_tv0UizLv1MJNDfkIXbV44181el-z_TW8oykABWSoUnw2S_aBylT1NZhtb57UCyNHy56b2vM8LImcGNT/s1600/gray_ball2.png' style='opacity:0.3;width:40px;height:40px;background:none'/>
</a></td></tr></table>
<div id="getComment" style="font-size:16px;position:absolute;
top:50%;right:0%;width:480px;padding:30px;height:250px;overflow:scroll;background-color:rgba(0,0,0,0.8);opacity:0.8;">
<!-- <a href="#" onclick="$('#getComment').hide('slow');")>X</a><br />-->
</div>
<!-- <a href="#" onclick="fbLogin();">fbLogin</a><p />-->
</body>
</html>kwin786http://www.blogger.com/profile/11636870499038520354noreply@blogger.com0tag:blogger.com,1999:blog-4631337081774196669.post-84887732746232091832013-04-24T14:37:00.006+09:002013-04-26T00:52:31.758+09:00AsukaTemple-IshibuaiKofun<!--<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">-->
<html lang="en">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0, user-scalable=YES" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<style type="text/css" media="screen">
body { background-color: black; color: white; font-family: 'Lucida Grande', Verdana, Arial; font-size: 12px;
background-image: -webkit-gradient(radial,50% 500,1,50% 500,400, from(rgba(255, 255, 255, 0.3)),to(rgba(255, 255, 255, 0)));
background-repeat: no-repeat;
}
#container { width: 100%; height: 850px;
-webkit-perspective: 800; /* For compatibility with iPhone 3.0, we leave off the units here */
-webkit-perspective-origin: 50% 225px;
}
/* 0 -> -120 -100 -> -50 2012/02/07 */
#floor { position:absolute;top:-10%; left:-50% ; margin-top:-120px; margin-left:-50px;
-webkit-mask-image:-webkit-gradient(radial, center center, 0, center center, 350,from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
-webkit-transform: rotateX(90deg) rotateY(0deg) rotateZ(90deg) translateZ(-210px) translateY(10px);
}
.mapCss { position:absolute;top:0%; left:0% ; margin-top:0px; margin-left:-0px; width:500px; height:500px;/* 2012/11/27 */
-webkit-mask-image:-webkit-gradient(radial, center center, 0, center center, 350,from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
-webkit-transform: rotateX(90deg) rotateY(0deg) rotateZ(90deg) translateZ(-210px) translateY(10px);
opacity:0.8; /* translateY などはきいていないが webkit-transform はきいている これをなくすと opacity の値を小さくする必要がある */
}
#floorBallLeft { position:absolute;top:-10%; left:10% ; margin-top:0px; margin-left:-90px; height:50px; opacity:0.5;
-webkit-transform: rotateX(15deg) rotateY(45deg) rotateZ(0deg) translateZ(0px) translateY(0px); }
#floorBallRight { position:absolute;top:-10%; right:15% ; margin-top:0px; margin-right:-90px; height:50px; width:45px;opacity:0.5;
-webkit-transform: rotateX(10deg) rotateY(-45deg) rotateZ(0deg) translateZ(0px) translateY(0px); }
#floorBallHome { position:absolute;top:20%; left:35% ; margin-top:60px; margin-left:0px; height:35px; width:75px; opacity:0.3;
-webkit-transform: rotateX(15deg) rotateY(0deg) rotateZ(0deg) translateZ(0px) translateY(0px); }
/* #floorC { position:absolute;top:95%; left:50% ;-webkit-transform:scale(3);}
#floorR { position:absolute;top:90%; right:15% ; margin-top:0px; margin-right:0px; -webkit-transform:scale(3);}
#floorL { position:absolute;top:90%; left: 15% ; margin-top:0px; margin-left:0px ; -webkit-transform:scale(3);}*/
a:link { text-decoration: none; color:#DF1FBB; }
a:active { text-decoration: none; color:#DF1FBB; }
a:visited { text-decoration: none; color:#DF1FBB; } /* #555555 */
a:hover { text-decoration: none; color:#DF1FBB; }
li { display:inline-block; }
#floor_text{ position: absolute;
top:80%; left:-80%; height: 800px; width: 420px;
border: 0px solid white;
-webkit-box-sizing: border-box; text-align: left; font-family: Times, serif;
font-size: 20pt; font-color: white; /*font-size: 24pt; color: white; */
}
#stage { width: 100%; height: 100%; -webkit-transition: -webkit-transform 2s; -webkit-transform-style: preserve-3d; }
#shape { position: relative; top: 50px; margin: 0 auto; height: 400px; width: 204px; -webkit-transform-style: preserve-3d; }
#shapeX { margin: 0 auto; height: 200px; width: 200px; -webkit-transform-style: preserve-3d; }
.plane { position: absolute; top:0%; /*top:-150%; */
height: 400px; width: 204px; border: 0px solid white;
text-align: center; font-family: Times, serif; font-size: 124pt; color: black;
background-image: -webkit-gradient(linear, left bottom, right top,from(rgba(0,0,0,0)), to(rgba(0,0,0,1.0)));
background-repeat: no-repeat;
background-color: rgba( 0, 0, 0, 0.4); /* 0.6 */
-webkit-box-sizing: border-box;
-webkit-transition: -webkit-transform 2s, opacity 2s; -webkit-backface-visibility: hidden; /* hidden */
}
.subplane {position: absolute; width:204px;top:-335px; border: 0px; padding:0px; opacity:0.5;
-webkit-transition: -webkit-transform 2s,opacity 2s;-webkit-backface-visibility:visible;}
#shape.backfaces .plane { -webkit-backface-visibility: visible; }
@-webkit-keyframes spin { from { -webkit-transform: rotateY(0); } to { -webkit-transform: rotateY(-360deg); } }
@-webkit-keyframes spinR{ from { -webkit-transform: rotateY(0); } to { -webkit-transform: rotateY( 360deg); } }
@-webkit-keyframes spin0{ }
/* 上部の説明文の書式設定 背景は灰色で角を丸める .controls {width: 70%; height:10%; margin: 0 auto; padding: 5px 20px; */
.controls { opacity:0.6; /* width: 80%; height:40%; */
position:absolute;top:80%; left:34%; height:36px; /* bottom:1% */
margin: 0 auto; padding: 5px 10px; background-color: rgba(255, 255, 255, 0.15);
-webkit-border-radius: 48px;
/* -webkit-touch-callout: none;きかない */
}
.ctlBtn { font-size:10pt; opacity:0.8; margin-bottom:7px;}
.ctlBtn2 { font-size:10pt; opacity:0.8; margin-bottom:15px; font-family:Curier;}
.controls > div { margin: 10px; }
/* ---------- ring2 styles ------------- */
.ring2 > .s1 { -webkit-transform: rotateY( 0deg) translateY( 0px) translateZ(-1380px); }
.ring2 > .s2 { -webkit-transform: rotateY( -30deg) translateY( 0px) translateZ(-380px); }
.ring2 > .s3 { -webkit-transform: rotateY( -60deg) translateY( 0px) translateZ(-380px); }
.ring2 > .s4 { -webkit-transform: rotateY( -90deg) translateZ(-380px); }
.ring2 > .s5 { -webkit-transform: rotateY( -120deg) translateZ(-380px); }
.ring2 > .s6 { -webkit-transform: rotateY( -150deg) translateZ(-380px); }
.ring2 > .s7 { -webkit-transform: rotateY( -180deg) translateZ(-380px); }
.ring2 > .s8 { -webkit-transform: rotateY( -210deg) translateZ(-380px); }
.ring2 > .s9 { -webkit-transform: rotateY( 120deg) translateZ(-380px); }
.ring2 > .s10 { -webkit-transform: rotateY( 90deg) translateZ(-380px); }
.ring2 > .s11 { -webkit-transform: rotateY( -300deg) translateZ(-380px); }
.ring2 > .s12 { -webkit-transform: rotateY( -330deg) translateZ(-380px); }
.ring2 > .s13 { -webkit-transform: translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s14 { -webkit-transform: rotateY( -20deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s15 { -webkit-transform: rotateY( -40deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s16 { -webkit-transform: rotateY( -60deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s17 { -webkit-transform: rotateY( -80deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s18 { -webkit-transform: rotateY( -100deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s19 { -webkit-transform: rotateY( -120deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s20 { -webkit-transform: rotateY( -140deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s21 { -webkit-transform: rotateY( -160deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s22 { -webkit-transform: rotateY( -180deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s23 { -webkit-transform: rotateY( -200deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s24 { -webkit-transform: rotateY( -220deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s25 { -webkit-transform: rotateY( -240deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s26 { -webkit-transform: rotateY( -260deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s27 { -webkit-transform: rotateY( -280deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s28 { -webkit-transform: rotateY( -300deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s29 { -webkit-transform: rotateY( -320deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s30 { -webkit-transform: rotateY( -340deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.slideIn {-webkit-animation-timing-function: ease ;-webkit-animation-duration: 1500ms;-webkit-animation-name: slidein; margin-right:0px;}
@-webkit-keyframes slidein {from { margin-top: 120px; opacity:0; } to { margin-top: 0px; opacity:1; } }
.slideFloor {-webkit-animation-timing-function: ease;-webkit-animation-duration: 1000ms;-webkit-animation-name: slidein; margin-left:0px;}
@-webkit-keyframes slideFloor {from { margin-top: 120px; opacity:0; } to { margin-top: 0px; opacity:1;} }
.blur, .blur > img {margin: 0; padding: 0; border: 0; }
.blur { position: relative;display: inline-block;font-size: 0; line-height: 0; }
.blur:after { position: absolute;left: 0; top: 0; right: 0; bottom: 0;
-webkit-box-shadow: inset 0px 0px 15px 15px #fff;
box-shadow: inset 0px 0px 15px 15px #fff;
content: " ";
}
<!--
#jquery-ui-slider-wrap {padding:0px;text-align: center; width: 38px;border: 0px;border-radius:20px; background-color: rgba(255, 255, 255, 0.15);opacity:0.4; }
#jquery-ui-slider-value {border:0; color: red !important; font-weight: bold; background-color: transparent;margin: 5px; width: 40px; text-align: center; }
#jquery-ui-slider {height: 150px; width:25px;background-color:rgba(255, 255, 255, 0.15); opacity:0.2;opacity:0.2;}
#jquery-ui-slider-wrap2 {padding:0px;text-align: center;width: 38px; border: 0px;border-radius:10px; background-color: rgba(255, 255, 255, 0.15); opacity:0.4; }
#jquery-ui-slider-value2{ border: 0; color: red !important; font-weight: bold; background-color: transparent;margin: 5px;width: 40px; text-align: center; }
#jquery-ui-slider2 { height: 150px; width:25px; background-color:rgba(255, 255, 255, 0.15); opacity:0.2;}
-->
</style>
<script type="text/javascript">
function setCss(currentWidth,startDeg, panoramaMode){ // 2012/11/26 add startDeg, panoramaMode
if ( navigator.userAgent.match( /iPhone/i ) || navigator.userAgent.match( /iPod/i ) ) {
alert(navigator.userAgent)
var el = document.getElementById("ctrl1");
el.style.position = 'absolute';
el.style.left = '60px';
el.style.width = '180px';
if(window.navigator.standalone){ el.style.top = '10px'; }
}
shape.style.top='25%';
floor.style.top='30%';
floor.style.left='-50%';
var tY = -1*(720-586)/2;
var tY = 0;
if (window.orientation == 90 || window.orientation == -90||currentWidth > 800){
ctrl2.style.top='60%';ctrl1.style.left='42%';
}
if ( panoramaMode === "3DWall"){ // 2012/11/26
showWall(-1200,startDeg -120); // 20 -> -110
}
$("#getComment").hide();
}
function showWall(x0,rY){ // 2012/11/26
for (var s = 1; s < 13 ; s++){
$("div#s"+ s ).css("top","20%");
tX = x0 + s*204;
$("div#s"+ s ).css("-webkit-transform","rotateY("+rY+"deg)"
+ "translateX("+tX+"px) "
);
}
//$("div#shape").css("-webkit-transform","translateX(500px)");
}
// $.browser.mobileSafari = /webkit.*mobile/i.test(navigator.userAgent)
// if ($.browser.mobileSafari) {
// $.getScript('/public/javascripts/jquery.ui.touch-punch.min.js');
// }
function ctrlToggle(){
$('#jquery-ui-slider-wrap').toggle();
$('#jquery-ui-slider-wrap2').toggle();
$('#ctrl2').toggle();
$('#ctrl1').toggle();
}
<!--
jQuery( function() {
jQuery( '#jquery-ui-slider' ) . slider( {
orientation: 'vertical', animate: 'slow', range: 'min', value: 70, min: -100, max: 300,
slide: function( event, ui ) {
jQuery( '#jquery-ui-slider-value' ) . val( ui.value );
var top = ui.value -100;
shape.style.top= top+ '%';
}
} );
jQuery( '#jquery-ui-slider-value' ) . val( jQuery( '#jquery-ui-slider' ) . slider( 'value' ) );
} );
jQuery( function() {
jQuery( '#jquery-ui-slider2' ) . slider( {
orientation: 'vertical', animate: 'slow', range: 'min', value: 70, min: -200, max: 300,
slide: function( event, ui ) {
jQuery( '#jquery-ui-slider-value2' ) . val( ui.value );
var top = ui.value -100; floor.style.top= top+ '%';
}
} );
jQuery( '#jquery-ui-slider-value2' ) . val( jQuery( '#jquery-ui-slider2' ) . slider( 'value' ) );
} );
jQuery( function() {
jQuery( '#jquery-ui-slider3' ).slider( {
animate:'slow', range: 'min', value: staticRotationY, min: -180, max: 360,
slide: function( event, ui ) {
staticRotationY = ui.value*Math.PI/180;
shape.style.webkitTransform = 'rotateY('+staticRotationY+'rad)';
}
});
} );
-->
function pop2(s,n,caption,aid,link,type,rotateY,translateZ,translateX){
// alert("curPop:"+ curPop+", staticRotationY"+ staticRotationY);
console.log("curPop2:"+ curPop+", staticRotationY"+ staticRotationY);
var x = translateX; var rotX = 0;
var y = staticRotationY + 100 ; var z = translateZ; // 55;
var el = document.getElementById("i"+s);
d = rotateY;
if( curPop == s){
curPop = 0; c = 1.0;
document.all["floor_text"].innerHTML = "";
document.all["getComment"].innerHTML = "";
$("#getComment").hide("slow");
el.removeEventListener("gesturestart", gestureStart, false);
el.removeEventListener("gesturechange",gestureChange,false);
}else{
c= 1.5; curPop = s; z = z + 100
var zz = z + 100;
getComments(aid);
$("#getComment").show("slow");
document.all["floor_text"].innerHTML = '<a href="'+link+'">○</a>'+caption ;
document.getElementById("s"+s).src=n;
el.addEventListener("gesturestart", gestureStart, false);
el.addEventListener("gesturechange",gestureChange,false);
}
el.style.webkitTransitionDuration = '800ms';
floor_text.style.webkitTransform ='rotateY('+ d +'deg) translateY(0px) translateZ('+zz+'px) ' ;
el.style.webkitTransform ='rotateY('+ d +'deg) translateX('+x+'px) translateZ('+z+'px) scale('+c+') ';
}
</script>
</head>
<body onload="addAnimationHandlers('/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/6.1/Applications/5E5A60CF-A66B-420C-A1FC-843E1D546E7B/KwinTabBar2.app',150,'stop','34.47865, 135.820178,10','768',14,1)"><!-- 2012/11/26 add panorama 12/24 aZoom-->
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1&appId=231699360296504";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<br/ >
<br />
<div id="container">
<div id="stage">
<div id="shape" class="ring2 ">
<div id="shapeX" class="ring2 ">
<img class="subplane s1 slideIn" id="sub1" style="padding:0px;"/>
<img class="subplane s2 slideIn" id="sub2" style="padding:0px;"/>
<img class="subplane s3 slideIn" id="sub3" style="padding:0px;"/>
<img class="subplane s4 slideIn" id="sub4" style="padding:0px;"/>
<img class="subplane s5 slideIn" id="sub5" style="padding:0px;"/>
<img class="subplane s6 slideIn" id="sub6" style="padding:0px;"/>
<img class="subplane s7 slideIn" id="sub7" style="padding:0px;"/>
<img class="subplane s8 slideIn" id="sub8" style="padding:0px;"/>
<img class="subplane s9 slideIn" id="sub9" style="padding:0px;"/>
<img class="subplane s10 slideIn" id="sub10" style="padding:0px;"/>
<img class="subplane s11 slideIn" id="sub11" style="padding:0px;"/>
<img class="subplane s12 slideIn" id="sub12" style="padding:0px;"/>
<div class="plane s1 slideIn" id="s1" style="margin-left:-69px; width:408px;">
<a href='#' onclick="pop('1','https://lh5.googleusercontent.com/-dVBVWQscF-0/UQJk0el1mGI/AAAAAAAAFJ4/_W_RdksqBh4/test%252520title.jpg',
'ペルセポリス',
'10151368201776880',
'https://picasaweb.google.com/102448397019191874652/_03#5837338919753324642','link','343','25','https://lh5.googleusercontent.com/-dVBVWQscF-0/UQJk0el1mGI/AAAAAAAAFJ4/_W_RdksqBh4/test%252520title.jpg',
'29.934444, 52.891389','0','10151368201776880')">
<img src="https://lh5.googleusercontent.com/-dVBVWQscF-0/UQJk0el1mGI/AAAAAAAAFJ4/_W_RdksqBh4/test%252520title.jpg" width="343" style="margin-left:5px; margin-top:31px; padding:0px;" id="i1"></a>
</div>
<div class="plane s4 slideIn" id="s4" style="margin-left:-82px; width:408px;">
<a href='#' onclick="pop('4','https://lh6.googleusercontent.com/-1H07prKtMfk/UQDL48DO-DI/AAAAAAAAFGE/MMxKQ_P7WSA/test%252520title.jpg',
'飛鳥寺',
'https://lh6.googleusercontent.com/-1H07prKtMfk/UQDL48DO-DI/AAAAAAAAFGE/MMxKQ_P7WSA/test%252520title.jpg','https://picasaweb.google.com/102448397019191874652/_03#5836889296124966962','p','368','26','https://lh6.googleusercontent.com/-1H07prKtMfk/UQDL48DO-DI/AAAAAAAAFGE/MMxKQ_P7WSA/test%252520title.jpg',
'34.47865, 135.820178,14','0','0')">
<img src="https://lh6.googleusercontent.com/-1H07prKtMfk/UQDL48DO-DI/AAAAAAAAFGE/MMxKQ_P7WSA/test%252520title.jpg" width="368" style="margin-left:5px; margin-top:36px; padding:0px;" id="i4"></a>
</div>
<div class="plane s7 slideIn" id="s7" style="margin-left:-111px; width:612px;">
<a href='#' onclick="pop('7','https://lh5.googleusercontent.com/-1em7XONq4dY/UQdYfETFz9I/AAAAAAAAFLU/Mgv3wlROq-E/test%252520title.jpg',
'鹿島神宮',
'10151368201776880',
'http://kurishin2013.wix.com/kurishin-world#!untitled/c1fz6',
'p','426','27','https://lh5.googleusercontent.com/-1em7XONq4dY/UQdYfETFz9I/AAAAAAAAFLU/Mgv3wlROq-E/test%252520title.jpg',
'35.968861, 140.631489,19','0','0')">
<img src="https://lh5.googleusercontent.com/-1em7XONq4dY/UQdYfETFz9I/AAAAAAAAFLU/Mgv3wlROq-E/test%252520title.jpg" width="426" style="margin-left:5px; margin-top:30px; padding:0px;" id="i7"></a>
</div>
<div class="plane s10 slideIn" id="s10" style="margin-left:-32px; width:408px;">
<a href='#' onclick="pop('10','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-TU9nGoPx2dVfHFPF4BaKaPkZPnr83WMOcrt28HB8eVKQc_0w2XDUHa2Di-UcDkvP5KlJKDcDD6EUvo4hisstiEAQkO1hD3qNKqteHMlvbVfJC8EG99m5aUOmgLeKHLuyagcS84zlqjHU/',
'石舞台古墳',
'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-TU9nGoPx2dVfHFPF4BaKaPkZPnr83WMOcrt28HB8eVKQc_0w2XDUHa2Di-UcDkvP5KlJKDcDD6EUvo4hisstiEAQkO1hD3qNKqteHMlvbVfJC8EG99m5aUOmgLeKHLuyagcS84zlqjHU/',
'http://obtweb.typepad.jp/obt/2013/02/asuka.html',
'p','269','24','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-TU9nGoPx2dVfHFPF4BaKaPkZPnr83WMOcrt28HB8eVKQc_0w2XDUHa2Di-UcDkvP5KlJKDcDD6EUvo4hisstiEAQkO1hD3qNKqteHMlvbVfJC8EG99m5aUOmgLeKHLuyagcS84zlqjHU/',
'34.466789, 135.82615,14','0','0')">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-TU9nGoPx2dVfHFPF4BaKaPkZPnr83WMOcrt28HB8eVKQc_0w2XDUHa2Di-UcDkvP5KlJKDcDD6EUvo4hisstiEAQkO1hD3qNKqteHMlvbVfJC8EG99m5aUOmgLeKHLuyagcS84zlqjHU/" width="269" style="margin-left:5px; margin-top:70px; padding:0px;" id="i10"></a>
</div>
<div id="floor" class="slideFloor" align="center">
<img src='https://picasaweb.google.com/data/feed/base/user/102448397019191874652/albumid/5817631081094332753?alt=rss&kind=photo&hl=ja' id="floorImg" width="500" height="500" />
<div id="map" class="mapCss"></div>
</div>
<span id="floor_text"></span>
</div>
</div>
</div>
</div>
<div class="controls" id="ctrl1" style="position:absolute;top:2%; left:38%;width:180px; height:32px; ">
<button onmouseover="toggleShape1(100)" onclick="toggleShape1(200)" class="ctlBtn">-Zoom</button>
<button onmouseover="toggleShape1(-100)" onclick="toggleShape1(-200)" class="ctlBtn">Zoom+</button>
</div>
<div class="controls" id="ctrl2" style="position:absolute;width:282px;top:880px"><!-- style="position:absolute; top:30px;"-->
<table><tr><td style="height:32px">
<!-- west 左画面--><a href="http://snsimglink.blogspot.jp/2012/12/blog-post.html">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij0i0LOVXVSSM4xIZj94o0jCru9qBKFMoW45Gs-CFaf0rF6gOLFf44qyY-hLq_v-BIy-AsGlcMZV6pJYKTJVL41f4JKN1NiYVNt0NsafOILd47VVAxQlvXZ90rbDBJzSF3bwE7KUYHxnQZ/s128/%E6%B3%95%E9%9A%86%E5%AF%BA.png" style="position:absolute;top:-20%;margin-left:-100px; opacity:0.5; padding:0px;width:70px;height:40px;
-webkit-transform:rotateX(10deg) rotateY(50deg); background:none">
</a>
<a href="#" onclick="runAction('fbAlbum','(null),https://picasaweb.google.com/data/feed/base/user/102448397019191874652/albumid/5817631081094332753?alt=rss&kind=photo&hl=ja,prev,34.683325,135.833606,10');">
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSLuj4s0z2FJRXkAlK4ivFl9uDiVwCajiX4G6Uy2cvO2yB5B5kLIZlInUUQFBjkNYHfXGH4GDF6gP8RNZPFdKknQR-zZyF-Cb-oWkNqofsD8MJ6NnhXLO6tovfOdkFuT_WebwqHKFEcSUv/s1600/gray_ball.png'
style="-webkit-transform:rotateX(10deg) rotateY(45deg);height:40px; width:48px;opacity:0.5;margin-left:-15px;margin-bottom:3px;background:none"/></a>
</td><td>
<button onclick="autoRotate('left')" class="ctlBtn">
< </button> <button onclick="autoRotate('stop');" class="ctlBtn2">■</button>
<button onclick="autoRotate('right')" class="ctlBtn"> > </button>
</td><td>
<a href="#" onclick="runAction('fbAlbum','(null),https://picasaweb.google.com/data/feed/base/user/102448397019191874652/albumid/5817631081094332753?alt=rss&kind=photo&hl=ja,next,34.683325,135.833606,10');">
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSLuj4s0z2FJRXkAlK4ivFl9uDiVwCajiX4G6Uy2cvO2yB5B5kLIZlInUUQFBjkNYHfXGH4GDF6gP8RNZPFdKknQR-zZyF-Cb-oWkNqofsD8MJ6NnhXLO6tovfOdkFuT_WebwqHKFEcSUv/s1600/gray_ball.png'
style="-webkit-transform:rotateX(10deg) rotateY(-45deg);height:40px; width:48px;opacity:0.5;margin-right:-20px;margin-bottom:3px;background:none"/></a>
<!--<button onclick="toggleShape1(400)">-Zoom</button> <button onclick="toggleShape1(-400)">Zoom+</button>-->
</td></tr>
</table>
<!--east 右画面--><a href="#" onclick="runAction('changeCurrentTitle','0');">
<img src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRUPoV8HgDosuP_l5BqIkXQNdoa7GYp27kpfCqh3NTcxvfh3yrF1AIfz5NUH7j_tv0UizLv1MJNDfkIXbV44181el-z_TW8oykABWSoUnw2S_aBylT1NZhtb57UCyNHy56b2vM8LImcGNT/s1600/gray_ball2.png style="position:absolute;top:-20%; right:-28%;opacity:0.5; margin-bottom:3px; width:70px;height:40px;
-webkit-transform:rotateX(10deg) rotateY(-50deg);background:none " />
</a>
<!-- slider -->
<div id="jquery-ui-slider3"></div>
</div>
<!--
@movieUrl@
<div style="position:absolute; bottom:10px;">
<a href="#" onclick='runAction("fbtest","")'>fbtest</a><br />
<a href="#" onclick='runAction("changeCurrentTitle","0")'>Home</a><br />
<a href="#" onclick='runAction("changeCurrentTitle","0")'>parentTitle</a><br />
</div>-->
<input id="_type" type="hidden" value="000" />
<!-- map
<div id="map" style="position:absolute;left:15%; top:0%; margin-top:0px; opacity:0.5; width:600px; height:300px;"></div>
-->
<!-- slider -->
<div id="jquery-ui-slider-wrap" style="position:absolute; top:80px;left:-15px;">
<!--<p style="color:red">plane</p>-->
<input type="text" id="jquery-ui-slider-value" /><div id="jquery-ui-slider"></div>
</div>
<div id="jquery-ui-slider-wrap2" style="position:absolute; top:465px; left:-15px;">
<!--<pstyle="color:red">floor</p>-->
<input type="text" id="jquery-ui-slider-value2" /> <div id="jquery-ui-slider2"></div>
</div>
<!-- hideControl -->
<table><tr><td>
<a href="#" onClick="ctrlToggle();">
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRUPoV8HgDosuP_l5BqIkXQNdoa7GYp27kpfCqh3NTcxvfh3yrF1AIfz5NUH7j_tv0UizLv1MJNDfkIXbV44181el-z_TW8oykABWSoUnw2S_aBylT1NZhtb57UCyNHy56b2vM8LImcGNT/s1600/gray_ball2.png' style='opacity:0.3;width:40px;height:40px;background:none'/>
</a></td><td><br /><br />
<a href="#" onClick="ctrlToggle2();">
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRUPoV8HgDosuP_l5BqIkXQNdoa7GYp27kpfCqh3NTcxvfh3yrF1AIfz5NUH7j_tv0UizLv1MJNDfkIXbV44181el-z_TW8oykABWSoUnw2S_aBylT1NZhtb57UCyNHy56b2vM8LImcGNT/s1600/gray_ball2.png' style='opacity:0.3;width:40px;height:40px;background:none'/>
</a></td></tr></table>
<!-- <a href="#" onclick="$('#getComment').hide('slow');")>X</a><br />-->
<!-- <a href="#" onclick="fbLogin();">fbLogin</a><p />-->
<div style="font-size:16px;background-color:rgba(0,0,0,0.8);opacity:0.8;">
<a href="http://www.amazon.co.jp/gp/product/4774156396/ref=as_li_ss_il?ie=UTF8&camp=247&creative=7399&creativeASIN=4774156396&linkCode=as2&tag=kwin786-22"><img border="0" src="http://ws.assoc-amazon.jp/widgets/q?_encoding=UTF8&ASIN=4774156396&Format=_SL160_&ID=AsinImage&MarketPlace=JP&ServiceVersion=20070822&WS=1&tag=kwin786-22" ></a><img src="http://www.assoc-amazon.jp/e/ir?t=kwin786-22&l=as2&o=9&a=4774156396" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />
<a href="http://kurishin2013.wix.com/kurishin-world" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaBu72RrgminJuR569jPmSGuRe0MUxXj2ACL2MmChFN6rv-d8NPDvsj8hx53ViElhzL6M_j_dUSDLd6Lqxny6hj8_D_u66A0A2ch6KB38mz8eEaAFQwg701dsXW-Ct9YPYXwom3JIzmEjn/s320/1.jpg" /></a>
<br />
「栗本慎一郎の全世界史」によると「蘇我氏が扶桑国を支配する(王として迎えられた)ことは、鹿島神宮が扶桑国の聖なる拠点として作られたあたりで明確になる。だから鹿島神宮はさして古いものではない。古くはないが、最初から重要な神宮だ。理由は明らかで、鹿島神宮はペルセポリスと同じく、聖方位で建てられているからである」<br />
<br />
鵤寺にも聖方位がみられる。<br />
また、蘇我氏の飛鳥寺と石舞台古墳の位置関係また聖方位にもとづいていることは間違いないように思える。
<br />
<img border="0" src="https://lh4.googleusercontent.com/-AbUqqKv1ct8/UROprJgY9HI/AAAAAAAAFhM/IXJLCrtZWtg/s310/test%2520title.jpg" />
現法隆寺とは異なる鵤寺の存在
・1998年に行われた奈良県立橿原(かしはら)考古学研究所の発掘調査によると
「その西限にある律学院の築地塀は、鵤寺伽藍の東側の柵列と同じように磁北より20度西に偏って南北に走っていたそうで、鵤寺と鵤宮が並び立っていた時代を彷彿させると同時に、あらためて現法隆寺とは異なる鵤寺の存在をあきらかに示しています。」
- 法隆寺を歩く P168
<br />
<br />
飛鳥寺からみると冬至の深夜にシリウスが石舞台古墳の上から昇ってくるようにみえる(?)
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpFIjL5Vuba_xBC1gBCCgcBXzLB3J_QPboAEUTkKd6eqbYKYgeyddIaHdEnV1hdf7SN8cykfI9y23wr0eDlE3bXiGzQWRMDMz_beQnQqnZfE5FdCC2V1pZAZYnwEYYXCDKWd9iVNhkg5HN/s1600/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88+2013-04-24+15.45.52.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpFIjL5Vuba_xBC1gBCCgcBXzLB3J_QPboAEUTkKd6eqbYKYgeyddIaHdEnV1hdf7SN8cykfI9y23wr0eDlE3bXiGzQWRMDMz_beQnQqnZfE5FdCC2V1pZAZYnwEYYXCDKWd9iVNhkg5HN/s640/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88+2013-04-24+15.45.52.png" /></a>
鹿島神宮
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhp0Ku8TKQ27x0v4bl4CQx83bT_KScA9fJueEaRnwP9lAAG8GazTsHUiiYjyMxK55PWnnVMN6YQs7Rc2Zdi_vKkmN3kk8dKvo5Q9fj2T7Jd4EzSfqJUr4bqRxWdSQuG_jXaf7vV6e7LjNmS/s1600/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88+2013-04-25+11.19.12.png" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhp0Ku8TKQ27x0v4bl4CQx83bT_KScA9fJueEaRnwP9lAAG8GazTsHUiiYjyMxK55PWnnVMN6YQs7Rc2Zdi_vKkmN3kk8dKvo5Q9fj2T7Jd4EzSfqJUr4bqRxWdSQuG_jXaf7vV6e7LjNmS/s640/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88+2013-04-25+11.19.12.png" /></a>
儀式用の都市であったのではないかという説もある<a href="http://ja.wikipedia.org/wiki/%E3%83%9A%E3%83%AB%E3%82%BB%E3%83%9D%E3%83%AA%E3%82%B9">ペルセポリス</a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxVKIuhbgPiztYK05yYhRSRfvnKcZ5kiFePsp_PIeD8HY4epfOB4Ev2G7Yr-FIQkdFK0z79VukqBsiml2RcXq8d6phH9NghfvGqqgHLOuKIEjBKc_bkLlGAx7tIqIETXC5p5q5KZiTp285/s1600/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88+2013-04-25+11.21.30.png" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxVKIuhbgPiztYK05yYhRSRfvnKcZ5kiFePsp_PIeD8HY4epfOB4Ev2G7Yr-FIQkdFK0z79VukqBsiml2RcXq8d6phH9NghfvGqqgHLOuKIEjBKc_bkLlGAx7tIqIETXC5p5q5KZiTp285/s640/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88+2013-04-25+11.21.30.png" /></a>
</div>
<iframe width="640" height="480" src="http://www.youtube.com/embed/FML6cTVkxzc?rel=0" frameborder="0" allowfullscreen></iframe>
<div id="getComment"
style="font-size:16px;position:absolute; top:50%; width:480px; padding:30px;height:480px;overflow:scroll;
/* color: #fff; background-color:black; */ background-color:rgba(0,0,0,0.8);
">
</div>
</body>
</html>kwin786http://www.blogger.com/profile/11636870499038520354noreply@blogger.com1tag:blogger.com,1999:blog-4631337081774196669.post-75248786409752023272013-01-04T18:50:00.001+09:002013-01-07T10:37:37.374+09:00Titian’s Venus of Urbino<!--<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">-->
<html lang="en">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0, user-scalable=YES" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<style type="text/css" media="screen">
body { background-color: black; color: white; font-family: 'Lucida Grande', Verdana, Arial; font-size: 12px;
background-image: -webkit-gradient(radial,50% 500,1,50% 500,400, from(rgba(255, 255, 255, 0.3)),to(rgba(255, 255, 255, 0)));
background-repeat: no-repeat;
}
#container { width: 100%; height: 850px;
-webkit-perspective: 800; /* For compatibility with iPhone 3.0, we leave off the units here */
-webkit-perspective-origin: 50% 225px;
}
/* 0 -> -120 -100 -> -50 2012/02/07 */
#floor { position:absolute;top:-10%; left:-50% ; margin-top:-120px; margin-left:-50px;
-webkit-mask-image:-webkit-gradient(radial, center center, 0, center center, 350,from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
-webkit-transform: rotateX(90deg) rotateY(0deg) rotateZ(90deg) translateZ(-210px) translateY(10px);
}
.mapCss { position:absolute;top:0%; left:0% ; margin-top:0px; margin-left:-0px; width:500px; height:500px;/* 2012/11/27 */
-webkit-mask-image:-webkit-gradient(radial, center center, 0, center center, 350,from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
-webkit-transform: rotateX(90deg) rotateY(0deg) rotateZ(90deg) translateZ(-210px) translateY(10px);
opacity:0.8; /* translateY などはきいていないが webkit-transform はきいている これをなくすと opacity の値を小さくする必要がある */
}
#floorBallLeft { position:absolute;top:-10%; left:10% ; margin-top:0px; margin-left:-90px; height:50px; opacity:0.5;
-webkit-transform: rotateX(15deg) rotateY(45deg) rotateZ(0deg) translateZ(0px) translateY(0px); }
#floorBallRight { position:absolute;top:-10%; right:15% ; margin-top:0px; margin-right:-90px; height:50px; width:45px;opacity:0.5;
-webkit-transform: rotateX(10deg) rotateY(-45deg) rotateZ(0deg) translateZ(0px) translateY(0px); }
#floorBallHome { position:absolute;top:20%; left:35% ; margin-top:60px; margin-left:0px; height:35px; width:75px; opacity:0.3;
-webkit-transform: rotateX(15deg) rotateY(0deg) rotateZ(0deg) translateZ(0px) translateY(0px); }
/* #floorC { position:absolute;top:95%; left:50% ;-webkit-transform:scale(3);}
#floorR { position:absolute;top:90%; right:15% ; margin-top:0px; margin-right:0px; -webkit-transform:scale(3);}
#floorL { position:absolute;top:90%; left: 15% ; margin-top:0px; margin-left:0px ; -webkit-transform:scale(3);}*/
a:link { text-decoration: none; color:#DF1FBB; }
a:active { text-decoration: none; color:#DF1FBB; }
a:visited { text-decoration: none; color:#DF1FBB; } /* #555555 */
a:hover { text-decoration: none; color:#DF1FBB; }
li { display:inline-block; }
#floor_text{ position: absolute;
top:80%; left:-80%; height: 800px; width: 420px;
border: 0px solid white;
-webkit-box-sizing: border-box; text-align: left; font-family: Times, serif;
font-size: 20pt; font-color: white; /*font-size: 24pt; color: white; */
}
#stage { width: 100%; height: 100%; -webkit-transition: -webkit-transform 2s; -webkit-transform-style: preserve-3d; }
#shape { position: relative; top: 50px; margin: 0 auto; height: 400px; width: 204px; -webkit-transform-style: preserve-3d; }
#shapeX { margin: 0 auto; height: 200px; width: 200px; -webkit-transform-style: preserve-3d; }
.plane { position: absolute; top:0%; /*top:-150%; */
height: 690px; width: 204.2px; border: 0px solid white;
text-align: center; font-family: Times, serif; font-size: 124pt; color: black;
background-image: -webkit-gradient(linear, left bottom, right top,from(rgba(0,0,0,0)), to(rgba(0,0,0,1.0)));
background-repeat: no-repeat;
background-color: rgba( 255, 255, 255, 0.4); /* 0.6 */
background-color:#330000;
-webkit-box-sizing: border-box;
-webkit-transition: -webkit-transform 2s, opacity 2s; -webkit-backface-visibility: hidden; /* hidden */
}
.subplane {position: absolute; width:204px;top:-335px; border: 0px; padding:0px; opacity:0.5;
-webkit-transition: -webkit-transform 2s,opacity 2s;-webkit-backface-visibility:visible;}
#shape.backfaces .plane { -webkit-backface-visibility: visible; }
@-webkit-keyframes spin { from { -webkit-transform: rotateY(0); } to { -webkit-transform: rotateY(-360deg); } }
@-webkit-keyframes spinR{ from { -webkit-transform: rotateY(0); } to { -webkit-transform: rotateY( 360deg); } }
@-webkit-keyframes spin0{ }
/* 上部の説明文の書式設定 背景は灰色で角を丸める .controls {width: 70%; height:10%; margin: 0 auto; padding: 5px 20px; */
.controls { opacity:0.6; /* width: 80%; height:40%; */
position:absolute;top:80%; left:34%; height:36px; /* bottom:1% */
margin: 0 auto; padding: 5px 10px; background-color: rgba(255, 255, 255, 0.15);
-webkit-border-radius: 48px;
/* -webkit-touch-callout: none;きかない */
}
.ctlBtn { font-size:10pt; opacity:0.8; margin-bottom:7px;}
.ctlBtn2 { font-size:10pt; opacity:0.8; margin-bottom:15px; font-family:Curier;}
.controls > div { margin: 10px; }
/* ---------- ring2 styles ------------- */
.ring2 > .s1 { -webkit-transform: rotateY( 0deg) translateY( 0px) translateZ(-380px); }
.ring2 > .s2 { -webkit-transform: rotateY( -30deg) translateY( 0px) translateZ(-380px); }
.ring2 > .s3 { -webkit-transform: rotateY( -60deg) translateY( 0px) translateZ(-380px); }
.ring2 > .s4 { -webkit-transform: rotateY( -90deg) translateZ(-380px); }
.ring2 > .s5 { -webkit-transform: rotateY( -120deg) translateZ(-380px); }
.ring2 > .s6 { -webkit-transform: rotateY( -150deg) translateZ(-380px); }
.ring2 > .s7 { -webkit-transform: rotateY( -180deg) translateZ(-380px); }
.ring2 > .s8 { -webkit-transform: rotateY( -210deg) translateZ(-380px); }
.ring2 > .s9 { -webkit-transform: rotateY( 120deg) translateZ(-380px); }
.ring2 > .s10 { -webkit-transform: rotateY( 90deg) translateZ(-380px); }
.ring2 > .s11 { -webkit-transform: rotateY( -300deg) translateZ(-380px); }
.ring2 > .s12 { -webkit-transform: rotateY( -330deg) translateZ(-380px); }
.ring2 > .s13 { -webkit-transform: translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s14 { -webkit-transform: rotateY( -20deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s15 { -webkit-transform: rotateY( -40deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s16 { -webkit-transform: rotateY( -60deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s17 { -webkit-transform: rotateY( -80deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s18 { -webkit-transform: rotateY( -100deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s19 { -webkit-transform: rotateY( -120deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s20 { -webkit-transform: rotateY( -140deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s21 { -webkit-transform: rotateY( -160deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s22 { -webkit-transform: rotateY( -180deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s23 { -webkit-transform: rotateY( -200deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s24 { -webkit-transform: rotateY( -220deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s25 { -webkit-transform: rotateY( -240deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s26 { -webkit-transform: rotateY( -260deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s27 { -webkit-transform: rotateY( -280deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s28 { -webkit-transform: rotateY( -300deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s29 { -webkit-transform: rotateY( -320deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s30 { -webkit-transform: rotateY( -340deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.slideIn {-webkit-animation-timing-function: ease ;-webkit-animation-duration: 1500ms;-webkit-animation-name: slidein; margin-right:0px;}
@-webkit-keyframes slidein {from { margin-top: 120px; opacity:0; } to { margin-top: 0px; opacity:1; } }
.slideFloor {-webkit-animation-timing-function: ease;-webkit-animation-duration: 1000ms;-webkit-animation-name: slidein; margin-left:0px;}
@-webkit-keyframes slideFloor {from { margin-top: 120px; opacity:0; } to { margin-top: 0px; opacity:1;} }
.blur, .blur > img {margin: 0; padding: 0; border: 0; }
.blur { position: relative;display: inline-block;font-size: 0; line-height: 0; }
.blur:after { position: absolute;left: 0; top: 0; right: 0; bottom: 0;
-webkit-box-shadow: inset 0px 0px 15px 15px #fff;
box-shadow: inset 0px 0px 15px 15px #fff;
content: " ";
}
<!--
#jquery-ui-slider-wrap {padding:0px;text-align: center; width: 38px;border: 0px;border-radius:20px; background-color: rgba(255, 255, 255, 0.15);opacity:0.4; }
#jquery-ui-slider-value {border:0; color: red !important; font-weight: bold; background-color: transparent;margin: 5px; width: 40px; text-align: center; }
#jquery-ui-slider {height: 150px; width:25px;background-color:rgba(255, 255, 255, 0.15); opacity:0.2;opacity:0.2;}
#jquery-ui-slider-wrap2 {padding:0px;text-align: center;width: 38px; border: 0px;border-radius:10px; background-color: rgba(255, 255, 255, 0.15); opacity:0.4; }
#jquery-ui-slider-value2{ border: 0; color: red !important; font-weight: bold; background-color: transparent;margin: 5px;width: 40px; text-align: center; }
#jquery-ui-slider2 { height: 150px; width:25px; background-color:rgba(255, 255, 255, 0.15); opacity:0.2;}
-->
</style>
<link rel="stylesheet" href="alexframework/src/javascript/jquery-ui-1.7.1.custom.css" type="text/css">
<script type="text/javascript" src="alexframework/src/javascript/gear5.js"></script>
<script type="text/javascript" src="alexframework/src/javascript/jquery.min.js"></script>
<script type="text/javascript" src="alexframework/src/javascript/alex.core.js"></script>
<script type="text/javascript" src="alexframework/src/javascript/alex.record.js"></script>
<script type="text/javascript" src="alexframework/src/javascript/albums.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript" ></script>
<script type="text/javascript" src="alexframework/src/javascript/googleMap.js"></script>
<!--<script src="http://code.jquery.com/jquery.min.js"></script>-->
<!--<script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script>-->
<script type="text/javascript" src="alexframework/src/javascript/facebook.js"></script>
<script type="text/javascript" src="alexframework/src/javascript/jquery.ui.min.js"></script>
<script type="text/javascript" src="alexframework/src/javascript/jquery.ui.touch-punch.min.js"></script>
<script type="text/javascript">
function setCss(currentWidth,startDeg, panoramaMode){ // 2012/11/26 add startDeg, panoramaMode
if ( navigator.userAgent.match( /iPhone/i ) || navigator.userAgent.match( /iPod/i ) ) {
alert(navigator.userAgent)
var el = document.getElementById("ctrl1");
el.style.position = 'absolute';
el.style.left = '60px';
el.style.width = '180px';
if(window.navigator.standalone){ el.style.top = '10px'; }
}
//alert("test");
shape.style.top='0px';
floor.style.top='320px';
floor.style.left='-50%';
var tY = -1*(720-586)/2;
var tY = 0;
if (window.orientation == 90 || window.orientation == -90||currentWidth > 800){
ctrl2.style.top='60%';ctrl1.style.left='42%';
}
if ( panoramaMode === "3DWall"){ // 2012/11/26
showWall(-1200,startDeg -120); // 20 -> -110
}
$("#getComment").hide();
}
function showWall(x0,rY){ // 2012/11/26
for (var s = 1; s < 13 ; s++){
$("div#s"+ s ).css("top","20%");
tX = x0 + s*204;
$("div#s"+ s ).css("-webkit-transform","rotateY("+rY+"deg)"
+ "translateX("+tX+"px) "
);
}
//$("div#shape").css("-webkit-transform","translateX(500px)");
}
// $.browser.mobileSafari = /webkit.*mobile/i.test(navigator.userAgent)
// if ($.browser.mobileSafari) {
// $.getScript('/public/javascripts/jquery.ui.touch-punch.min.js');
// }
function ctrlToggle(){
$('#jquery-ui-slider-wrap').toggle();
$('#jquery-ui-slider-wrap2').toggle();
$('#ctrl2').toggle();
$('#ctrl1').toggle();
}
<!--
jQuery( function() {
jQuery( '#jquery-ui-slider' ) . slider( {
orientation: 'vertical', animate: 'slow', range: 'min', value: 70, min: -100, max: 300,
slide: function( event, ui ) {
jQuery( '#jquery-ui-slider-value' ) . val( ui.value );
var top = ui.value -100;
shape.style.top= top+ '%';
}
} );
jQuery( '#jquery-ui-slider-value' ) . val( jQuery( '#jquery-ui-slider' ) . slider( 'value' ) );
} );
jQuery( function() {
jQuery( '#jquery-ui-slider2' ) . slider( {
orientation: 'vertical', animate: 'slow', range: 'min', value: 70, min: -200, max: 300,
slide: function( event, ui ) {
jQuery( '#jquery-ui-slider-value2' ) . val( ui.value );
var top = ui.value -100; floor.style.top= top+ '%';
}
} );
jQuery( '#jquery-ui-slider-value2' ) . val( jQuery( '#jquery-ui-slider2' ) . slider( 'value' ) );
} );
jQuery( function() {
jQuery( '#jquery-ui-slider3' ).slider( {
animate:'slow', range: 'min', value: staticRotationY, min: -180, max: 360,
slide: function( event, ui ) {
staticRotationY = ui.value*Math.PI/180;
shape.style.webkitTransform = 'rotateY('+staticRotationY+'rad)';
}
});
} );
-->
</script>
</head>
<body onload="addAnimationHandlers('/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/6.0/Applications/265AB680-9D44-48B1-A4F3-D59E7649A88B/KwinTabBar2.app',90,'stop','0','768',15,'panorama')"><!-- 2012/11/26 add panorama 12/24 aZoom-->
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1&appId=231699360296504";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<br/ >
<br />
<div id="container">
<div id="stage">
<div id="shape" class="ring2 ">
<div id="shapeX" class="ring2 ">
<img class="subplane s1 slideIn" id="sub1" style="padding:0px;"/><img class="subplane s2 slideIn" id="sub2" style="padding:0px;"/>
<img class="subplane s3 slideIn" id="sub3" style="padding:0px;"/><img class="subplane s4 slideIn" id="sub4" style="padding:0px;"/>
<img class="subplane s5 slideIn" id="sub5" style="padding:0px;"/><img class="subplane s6 slideIn" id="sub6" style="padding:0px;"/>
<img class="subplane s7 slideIn" id="sub7" style="padding:0px;"/><img class="subplane s8 slideIn" id="sub8" style="padding:0px;"/>
<img class="subplane s9 slideIn" id="sub9" style="padding:0px;"/><img class="subplane s10 slideIn" id="sub10" style="padding:0px;"/>
<img class="subplane s11 slideIn" id="sub11" style="padding:0px;"/><img class="subplane s12 slideIn" id="sub12" style="padding:0px;"/>
<div class="plane s3 slideIn" id="s3" ></div>
<div class="plane s5 slideIn" id="s5" ></div>
<div class="plane s9 slideIn" id="s9" ></div>
<!-- s,n,caption,aid,link,type, w, rowId,isbn,latlng,startRSS,fbid -->
<div class="plane s10 slideIn" id="s10" style="opacity:0.3;width:70px;background-color:black">
<a href='#' onclick="pop('10','0','マグダラのマリア Doria Pamphilij へ' ,'aid','http://snsimglink.blogspot.jp/2012/12/doria-pamphilij.html',
'p','68','0','https://lh3.googleusercontent.com/-zdjOkaB1UFA/UOAd98J_JII/AAAAAAAAEso/p5kI-MdGyAs/s320/test%2520title.jpg','0','0','0');">
<img src="https://lh3.googleusercontent.com/-zdjOkaB1UFA/UOAd98J_JII/AAAAAAAAEso/p5kI-MdGyAs/s320/test%2520title.jpg" style="width:68px; top:100px; padding:0px"/></a>
</div>
<div class="plane s11 slideIn" id="s11" ></div>
<div class="plane s4 slideIn" id="s4" >
<a href='#' onclick="pop('4','https://lh4.googleusercontent.com/-exh4fFK9nns/UNwhGschltI/AAAAAAAAEnE/fenu2r0BkJs/test%252520title.jpg','洗礼者ヨハネ','https://lh4.googleusercontent.com/-exh4fFK9nns/UNwhGschltI/AAAAAAAAEnE/fenu2r0BkJs/test%252520title.jpg','https://picasaweb.google.com/102448397019191874652/Art#5826568416804312786','p','204','180','https://lh4.googleusercontent.com/-exh4fFK9nns/UNwhGschltI/AAAAAAAAEnE/fenu2r0BkJs/test%252520title.jpg','0','0','468664619845775')">
<img src="https://lh4.googleusercontent.com/-exh4fFK9nns/UNwhGschltI/AAAAAAAAEnE/fenu2r0BkJs/test%252520title.jpg" width="204" style="margin-left:0px; margin-top:100px; padding:0px;" id="i4"></a>
</div>
<div class="plane s6 slideIn" id="s6" >
<a href='#' onclick="pop('6','https://lh4.googleusercontent.com/-IErnYF0hsyk/UOaYZhTjbKI/AAAAAAAAEzI/YejUKNxPiv0/out-0.jpg','6/0','https://lh4.googleusercontent.com/-IErnYF0hsyk/UOaYZhTjbKI/AAAAAAAAEzI/YejUKNxPiv0/out-0.jpg','https://picasaweb.google.com/102448397019191874652/Art#5829514331882220706','p','204','179','https://lh4.googleusercontent.com/-IErnYF0hsyk/UOaYZhTjbKI/AAAAAAAAEzI/YejUKNxPiv0/out-0.jpg','0','0','473056522739918')">
<img src="https://lh4.googleusercontent.com/-IErnYF0hsyk/UOaYZhTjbKI/AAAAAAAAEzI/YejUKNxPiv0/out-0.jpg" width="204" style="margin-left:0px; margin-top:110px; padding:0px;" id="i6"></a>
</div>
<div class="plane s7 slideIn" id="s7" >
<a href='#' onclick="pop('7','https://lh6.googleusercontent.com/-uVFBMOZ9O5M/UOaYZisl9fI/AAAAAAAAEzI/WqyxTjOToac/out-1.jpg','7/0','https://lh6.googleusercontent.com/-uVFBMOZ9O5M/UOaYZisl9fI/AAAAAAAAEzI/WqyxTjOToac/out-1.jpg','https://picasaweb.google.com/102448397019191874652/Art#5829514332255679986','p','204','181','https://lh6.googleusercontent.com/-uVFBMOZ9O5M/UOaYZisl9fI/AAAAAAAAEzI/WqyxTjOToac/out-1.jpg','0','0','473056526073251')">
<img src="https://lh6.googleusercontent.com/-uVFBMOZ9O5M/UOaYZisl9fI/AAAAAAAAEzI/WqyxTjOToac/out-1.jpg" width="204" style="margin-left:0px; margin-top:109px; padding:0px;" id="i7"></a>
</div>
<div class="plane s8 slideIn" id="s8" >
<a href='#' onclick="pop('8','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgemd77Jg2HOePKjPdGA63S264Aq41webKswJVzT1MNX4Z2ACwbtt-aQ7CsO-UlN3dlyqavO6n5k25nhth5Gxs3Qo0xOnrtQ7SFcLXWHRj-tpJ8wPydQ3L_sbXvbFIpHbC1Ax2bo7bYEN1O/','8/0','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgemd77Jg2HOePKjPdGA63S264Aq41webKswJVzT1MNX4Z2ACwbtt-aQ7CsO-UlN3dlyqavO6n5k25nhth5Gxs3Qo0xOnrtQ7SFcLXWHRj-tpJ8wPydQ3L_sbXvbFIpHbC1Ax2bo7bYEN1O/','https://picasaweb.google.com/102448397019191874652/Art#5829514332575072354','p','204','182','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgemd77Jg2HOePKjPdGA63S264Aq41webKswJVzT1MNX4Z2ACwbtt-aQ7CsO-UlN3dlyqavO6n5k25nhth5Gxs3Qo0xOnrtQ7SFcLXWHRj-tpJ8wPydQ3L_sbXvbFIpHbC1Ax2bo7bYEN1O/','0','0','473056532739917')">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgemd77Jg2HOePKjPdGA63S264Aq41webKswJVzT1MNX4Z2ACwbtt-aQ7CsO-UlN3dlyqavO6n5k25nhth5Gxs3Qo0xOnrtQ7SFcLXWHRj-tpJ8wPydQ3L_sbXvbFIpHbC1Ax2bo7bYEN1O/" width="204" style="margin-left:0px; margin-top:109px; padding:0px;" id="i8"></a>
</div>
<div class="plane s12 slideIn" id="s12" >
<a href='#' onclick="pop('12','https://lh5.googleusercontent.com/-oEiKlNZvZFc/UOaYe7lfm0I/AAAAAAAAEzI/NZ9mu8cnmYI/out2-0.jpg','12/0','https://lh5.googleusercontent.com/-oEiKlNZvZFc/UOaYe7lfm0I/AAAAAAAAEzI/NZ9mu8cnmYI/out2-0.jpg','https://picasaweb.google.com/102448397019191874652/Art#5829514424836135746','p','204','183','https://lh5.googleusercontent.com/-oEiKlNZvZFc/UOaYe7lfm0I/AAAAAAAAEzI/NZ9mu8cnmYI/out2-0.jpg','0','0','10151333143736880')">
<img src="https://lh5.googleusercontent.com/-oEiKlNZvZFc/UOaYe7lfm0I/AAAAAAAAEzI/NZ9mu8cnmYI/out2-0.jpg" width="204" style="margin-left:0px; margin-top:1px; padding:0px;" id="i12"></a>
</div>
<div class="plane s1 slideIn" id="s1" >
<a href='#' onclick="pop('1','https://lh3.googleusercontent.com/-CLHk3n0kG3o/UOaYerc-JqI/AAAAAAAAEzI/qkgTj6PU4to/out2-1.jpg','1/0','https://lh3.googleusercontent.com/-CLHk3n0kG3o/UOaYerc-JqI/AAAAAAAAEzI/qkgTj6PU4to/out2-1.jpg','https://picasaweb.google.com/102448397019191874652/Art#5829514420505421474','p','204','185','https://lh3.googleusercontent.com/-CLHk3n0kG3o/UOaYerc-JqI/AAAAAAAAEzI/qkgTj6PU4to/out2-1.jpg','0','0','10151333143746880')">
<img src="https://lh3.googleusercontent.com/-CLHk3n0kG3o/UOaYerc-JqI/AAAAAAAAEzI/qkgTj6PU4to/out2-1.jpg" width="204"
style="margin-left:0px; margin-top:1px; padding:0px;" id="i1"></a>
</div>
<div class="plane s2 slideIn" id="s2" >
<a href='#' onclick="pop('2','https://lh5.googleusercontent.com/-OCdtIjuHqNE/UOaYevwgReI/AAAAAAAAEzI/Ez7AzKnSgec/out2-2.jpg',
'six slave-market scenes ','https://lh5.googleusercontent.com/-OCdtIjuHqNE/UOaYevwgReI/AAAAAAAAEzI/Ez7AzKnSgec/out2-2.jpg','https://www.facebook.com/photo.php?fbid=10150489646711880&set=a.10150395031586880.383714.727371879&type=3&theater','p','204','184','https://lh5.googleusercontent.com/-OCdtIjuHqNE/UOaYevwgReI/AAAAAAAAEzI/Ez7AzKnSgec/out2-2.jpg','0','0','10150489646711880')">
<img src="https://lh5.googleusercontent.com/-OCdtIjuHqNE/UOaYevwgReI/AAAAAAAAEzI/Ez7AzKnSgec/out2-2.jpg" width="204" style="margin-left:0px; margin-top:1px; padding:0px;" id="i2"></a>
</div>
<div id="floor" class="slideFloor" align="center">
<!--<img src='@@@' id="floorImg" width="500" height="500">-->
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMopNweW50yG36wc1DCsYu5GisLnqEE9cjkvWOO8vQtHQsTytL1ctQWixEc4cIiAizb7OK-s398hOm000cpCnPqEapPVt_w9lQ9Atnx1uL9cBCyrhoNYNvxebjAwMqLii32CdX-NSEvWd3/' id="floorImg" width="500" height="500">
</div>
<span id="floor_text"></span>
</div>
</div>
<!-- <span id="floor_text"></span>-->
</div>
</div>
<div class="controls" id="ctrl1" style="position:absolute;top:2%; left:38%;width:180px; height:32px; ">
<button onmouseover="toggleShape1(100)" onclick="toggleShape1(200)" class="ctlBtn">-Zoom</button>
<button onmouseover="toggleShape1(-100)" onclick="toggleShape1(-200)" class="ctlBtn">Zoom+</button>
</div>
<div class="controls" id="ctrl2" style="position:absolute;width:282px"><!-- style="position:absolute; top:30px;"-->
<table><tr><td style="height:32px">
<!-- west 左画面--><a href="#" onclick="runAction('changeCurrentTitle','0');">
<img src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRUPoV8HgDosuP_l5BqIkXQNdoa7GYp27kpfCqh3NTcxvfh3yrF1AIfz5NUH7j_tv0UizLv1MJNDfkIXbV44181el-z_TW8oykABWSoUnw2S_aBylT1NZhtb57UCyNHy56b2vM8LImcGNT/s1600/gray_ball2.png style="position:absolute;top:-20%;margin-left:-100px; opacity:0.5; padding:0px;width:70px;height:40px;
-webkit-transform:rotateX(10deg) rotateY(50deg); background:none">
</a>
<a href="#" onclick="runAction('fbAlbum','https://picasaweb.google.com/data/feed/base/user/102448397019191874652/albumid/5243668162180262017?alt=rss&kind=photo&start-index=47,https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMopNweW50yG36wc1DCsYu5GisLnqEE9cjkvWOO8vQtHQsTytL1ctQWixEc4cIiAizb7OK-s398hOm000cpCnPqEapPVt_w9lQ9Atnx1uL9cBCyrhoNYNvxebjAwMqLii32CdX-NSEvWd3/,prev,0');">
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSLuj4s0z2FJRXkAlK4ivFl9uDiVwCajiX4G6Uy2cvO2yB5B5kLIZlInUUQFBjkNYHfXGH4GDF6gP8RNZPFdKknQR-zZyF-Cb-oWkNqofsD8MJ6NnhXLO6tovfOdkFuT_WebwqHKFEcSUv/s1600/gray_ball.png'
style="-webkit-transform:rotateX(10deg) rotateY(45deg);height:40px; width:48px;opacity:0.5;margin-left:-15px;margin-bottom:3px;background:none"/></a>
</td><td>
<button onclick="autoRotate('left')" class="ctlBtn">
< </button> <button onclick="autoRotate('stop');" class="ctlBtn2">■</button>
<button onclick="autoRotate('right')" class="ctlBtn"> > </button>
</td><td>
<a href="#" onclick="runAction('fbAlbum','https://picasaweb.google.com/data/feed/base/user/102448397019191874652/albumid/5243668162180262017?alt=rss&kind=photo&start-index=47,https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMopNweW50yG36wc1DCsYu5GisLnqEE9cjkvWOO8vQtHQsTytL1ctQWixEc4cIiAizb7OK-s398hOm000cpCnPqEapPVt_w9lQ9Atnx1uL9cBCyrhoNYNvxebjAwMqLii32CdX-NSEvWd3/,next,0');">
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSLuj4s0z2FJRXkAlK4ivFl9uDiVwCajiX4G6Uy2cvO2yB5B5kLIZlInUUQFBjkNYHfXGH4GDF6gP8RNZPFdKknQR-zZyF-Cb-oWkNqofsD8MJ6NnhXLO6tovfOdkFuT_WebwqHKFEcSUv/s1600/gray_ball.png'
style="-webkit-transform:rotateX(10deg) rotateY(-45deg);height:40px; width:48px;opacity:0.5;margin-right:-20px;margin-bottom:3px;background:none"/></a>
<!--<button onclick="toggleShape1(400)">-Zoom</button> <button onclick="toggleShape1(-400)">Zoom+</button>-->
</td></tr>
</table>
<!--east 右画面--><a href="#" onclick="runAction('changeCurrentTitle','0');">
<img src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRUPoV8HgDosuP_l5BqIkXQNdoa7GYp27kpfCqh3NTcxvfh3yrF1AIfz5NUH7j_tv0UizLv1MJNDfkIXbV44181el-z_TW8oykABWSoUnw2S_aBylT1NZhtb57UCyNHy56b2vM8LImcGNT/s1600/gray_ball2.png style="position:absolute;top:-20%; right:-28%;opacity:0.5; margin-bottom:3px; width:70px;height:40px;
-webkit-transform:rotateX(10deg) rotateY(-50deg);background:none " />
</a>
<!-- slider -->
<div id="jquery-ui-slider3"></div>
</div>
<!--
@movieUrl@
<div style="position:absolute; bottom:10px;">
<a href="#" onclick='runAction("fbtest","")'>fbtest</a><br />
<a href="#" onclick='runAction("changeCurrentTitle","0")'>Home</a><br />
<a href="#" onclick='runAction("changeCurrentTitle","https://lh4.googleusercontent.com/-Q2PDEEQLUTs/UN0c-40jCXI/AAAAAAAAEoA/GXZa93Ids40/Entrance_Palazzo_Nuovo_2006.jpg")'>parentTitle</a><br />
</div>-->
<input id="_type" type="hidden" value="000" />
<!-- map
<div id="map" style="position:absolute;left:15%; top:0%; margin-top:0px; opacity:0.5; width:600px; height:300px;"></div>
-->
<!-- slider -->
<div id="jquery-ui-slider-wrap" style="position:absolute; top:80px;left:-15px;">
<!--<p style="color:red">plane</p>-->
<input type="text" id="jquery-ui-slider-value" /><div id="jquery-ui-slider"></div>
</div>
<div id="jquery-ui-slider-wrap2" style="position:absolute; top:465px; left:-15px;">
<!--<pstyle="color:red">floor</p>-->
<input type="text" id="jquery-ui-slider-value2" /> <div id="jquery-ui-slider2"></div>
</div>
<!-- hideControl -->
<table><tr><td>
<a href="#" onClick="ctrlToggle();">
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRUPoV8HgDosuP_l5BqIkXQNdoa7GYp27kpfCqh3NTcxvfh3yrF1AIfz5NUH7j_tv0UizLv1MJNDfkIXbV44181el-z_TW8oykABWSoUnw2S_aBylT1NZhtb57UCyNHy56b2vM8LImcGNT/s1600/gray_ball2.png' style='opacity:0.3;width:40px;height:40px;background:none'/>
</a></td><td><br /><br />
<a href="#" onClick="ctrlToggle2();">
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRUPoV8HgDosuP_l5BqIkXQNdoa7GYp27kpfCqh3NTcxvfh3yrF1AIfz5NUH7j_tv0UizLv1MJNDfkIXbV44181el-z_TW8oykABWSoUnw2S_aBylT1NZhtb57UCyNHy56b2vM8LImcGNT/s1600/gray_ball2.png' style='opacity:0.3;width:40px;height:40px;background:none'/>
</a></td></tr></table>
<div id="getComment" style="font-size:16px;position:absolute;
top:50%;right:0%;width:480px;padding:30px;height:250px;overflow:scroll;background-color:rgba(0,0,0,0.8);opacity:0.8;">
<!-- <a href="#" onclick="$('#getComment').hide('slow');")>X</a><br />-->
</div>
<a href="#" onclick="fbLogin();">fbLogin</a><p />
</body>
</html>kwin786http://www.blogger.com/profile/11636870499038520354noreply@blogger.com0tag:blogger.com,1999:blog-4631337081774196669.post-90173584826371926202012-12-30T21:30:00.001+09:002013-01-06T20:56:13.275+09:00Doria Pamphilij<!--<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">-->
<html lang="en">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0, user-scalable=YES" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<style type="text/css" media="screen">
body { background-color: black; color: white; font-family: 'Lucida Grande', Verdana, Arial; font-size: 12px;
background-image: -webkit-gradient(radial,50% 500,1,50% 500,400, from(rgba(255, 255, 255, 0.3)),to(rgba(255, 255, 255, 0)));
background-repeat: no-repeat;
}
#container { width: 100%; height: 850px;
-webkit-perspective: 800; /* For compatibility with iPhone 3.0, we leave off the units here */
-webkit-perspective-origin: 50% 225px;
}
/* 0 -> -120 -100 -> -50 2012/02/07 */
#floor { position:absolute;top:-10%; left:-50% ; margin-top:-120px; margin-left:-50px;
-webkit-mask-image:-webkit-gradient(radial, center center, 0, center center, 350,from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
-webkit-transform: rotateX(90deg) rotateY(0deg) rotateZ(90deg) translateZ(-210px) translateY(10px);
}
.mapCss { position:absolute;top:0%; left:0% ; margin-top:0px; margin-left:-0px; width:500px; height:500px;/* 2012/11/27 */
-webkit-mask-image:-webkit-gradient(radial, center center, 0, center center, 350,from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
-webkit-transform: rotateX(90deg) rotateY(0deg) rotateZ(90deg) translateZ(-210px) translateY(10px);
opacity:0.8; /* translateY などはきいていないが webkit-transform はきいている これをなくすと opacity の値を小さくする必要がある */
}
#floorBallLeft { position:absolute;top:-10%; left:10% ; margin-top:0px; margin-left:-90px; height:50px; opacity:0.5;
-webkit-transform: rotateX(15deg) rotateY(45deg) rotateZ(0deg) translateZ(0px) translateY(0px); }
#floorBallRight { position:absolute;top:-10%; right:15% ; margin-top:0px; margin-right:-90px; height:50px; width:45px;opacity:0.5;
-webkit-transform: rotateX(10deg) rotateY(-45deg) rotateZ(0deg) translateZ(0px) translateY(0px); }
#floorBallHome { position:absolute;top:20%; left:35% ; margin-top:60px; margin-left:0px; height:35px; width:75px; opacity:0.3;
-webkit-transform: rotateX(15deg) rotateY(0deg) rotateZ(0deg) translateZ(0px) translateY(0px); }
/* #floorC { position:absolute;top:95%; left:50% ;-webkit-transform:scale(3);}
#floorR { position:absolute;top:90%; right:15% ; margin-top:0px; margin-right:0px; -webkit-transform:scale(3);}
#floorL { position:absolute;top:90%; left: 15% ; margin-top:0px; margin-left:0px ; -webkit-transform:scale(3);}*/
a:link { text-decoration: none; color:#DF1FBB; }
a:active { text-decoration: none; color:#DF1FBB; }
a:visited { text-decoration: none; color:#DF1FBB; } /* #555555 */
a:hover { text-decoration: none; color:#DF1FBB; }
li { display:inline-block; }
#floor_text{ position: absolute;
top:80%; left:-80%; height: 800px; width: 420px;
border: 0px solid white;
-webkit-box-sizing: border-box; text-align: left; font-family: Times, serif;
font-size: 20pt; font-color: white; /*font-size: 24pt; color: white; */
}
#stage { width: 100%; height: 100%; -webkit-transition: -webkit-transform 2s; -webkit-transform-style: preserve-3d; }
#shape { position: relative; top: 50px; margin: 0 auto; height: 400px; width: 204px; -webkit-transform-style: preserve-3d; }
#shapeX { margin: 0 auto; height: 200px; width: 200px; -webkit-transform-style: preserve-3d; }
.plane { position: absolute; top:0%; /*top:-150%; */
height: 400px; width: 204px; border: 0px solid white;
text-align: center; font-family: Times, serif; font-size: 124pt; color: black;
background-image: -webkit-gradient(linear, left bottom, right top,from(rgba(0,0,0,0)), to(rgba(0,0,0,1.0)));
background-repeat: no-repeat;
background-color: rgba( 0, 0, 0, 0.4); /* 0.6 */
background-color: #330000;
-webkit-box-sizing: border-box;
-webkit-transition: -webkit-transform 2s, opacity 2s; -webkit-backface-visibility: hidden; /* hidden */
}
.subplane {position: absolute; width:204px;top:-335px; border: 0px; padding:0px; opacity:0.5;
-webkit-transition: -webkit-transform 2s,opacity 2s;-webkit-backface-visibility:visible;}
#shape.backfaces .plane { -webkit-backface-visibility: visible; }
@-webkit-keyframes spin { from { -webkit-transform: rotateY(0); } to { -webkit-transform: rotateY(-360deg); } }
@-webkit-keyframes spinR{ from { -webkit-transform: rotateY(0); } to { -webkit-transform: rotateY( 360deg); } }
@-webkit-keyframes spin0{ }
/* 上部の説明文の書式設定 背景は灰色で角を丸める .controls {width: 70%; height:10%; margin: 0 auto; padding: 5px 20px; */
.controls { opacity:0.6; /* width: 80%; height:40%; */
position:absolute;top:80%; left:34%; height:36px; /* bottom:1% */
margin: 0 auto; padding: 5px 10px; background-color: rgba(255, 255, 255, 0.15);
-webkit-border-radius: 48px;
/* -webkit-touch-callout: none;きかない */
}
.ctlBtn { font-size:10pt; opacity:0.8; margin-bottom:7px;}
.ctlBtn2 { font-size:10pt; opacity:0.8; margin-bottom:15px; font-family:Curier;}
.controls > div { margin: 10px; }
/* ---------- ring2 styles ------------- */
.ring2 > .s1 { -webkit-transform: rotateY( 0deg) translateY( 0px) translateZ(-380px); }
.ring2 > .s2 { -webkit-transform: rotateY( -30deg) translateY( 0px) translateZ(-380px); }
.ring2 > .s3 { -webkit-transform: rotateY( -60deg) translateY( 0px) translateZ(-380px); }
.ring2 > .s4 { -webkit-transform: rotateY( -90deg) translateZ(-380px); }
.ring2 > .s5 { -webkit-transform: rotateY( -120deg) translateZ(-380px); }
.ring2 > .s6 { -webkit-transform: rotateY( -150deg) translateZ(-380px); }
.ring2 > .s7 { -webkit-transform: rotateY( -180deg) translateZ(-380px); }
.ring2 > .s8 { -webkit-transform: rotateY( -210deg) translateZ(-380px); }
.ring2 > .s9 { -webkit-transform: rotateY( 120deg) translateZ(-380px); }
.ring2 > .s10 { -webkit-transform: rotateY( 90deg) translateZ(-380px); }
.ring2 > .s11 { -webkit-transform: rotateY( -300deg) translateZ(-380px); }
.ring2 > .s12 { -webkit-transform: rotateY( -330deg) translateZ(-380px); }
.ring2 > .s13 { -webkit-transform: translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s14 { -webkit-transform: rotateY( -20deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s15 { -webkit-transform: rotateY( -40deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s16 { -webkit-transform: rotateY( -60deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s17 { -webkit-transform: rotateY( -80deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s18 { -webkit-transform: rotateY( -100deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s19 { -webkit-transform: rotateY( -120deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s20 { -webkit-transform: rotateY( -140deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s21 { -webkit-transform: rotateY( -160deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s22 { -webkit-transform: rotateY( -180deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s23 { -webkit-transform: rotateY( -200deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s24 { -webkit-transform: rotateY( -220deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s25 { -webkit-transform: rotateY( -240deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s26 { -webkit-transform: rotateY( -260deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s27 { -webkit-transform: rotateY( -280deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s28 { -webkit-transform: rotateY( -300deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s29 { -webkit-transform: rotateY( -320deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s30 { -webkit-transform: rotateY( -340deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.slideIn {-webkit-animation-timing-function: ease ;-webkit-animation-duration: 1500ms;-webkit-animation-name: slidein; margin-right:0px;}
@-webkit-keyframes slidein {from { margin-top: 120px; opacity:0; } to { margin-top: 0px; opacity:1; } }
.slideFloor {-webkit-animation-timing-function: ease;-webkit-animation-duration: 1000ms;-webkit-animation-name: slidein; margin-left:0px;}
@-webkit-keyframes slideFloor {from { margin-top: 120px; opacity:0; } to { margin-top: 0px; opacity:1;} }
.blur, .blur > img {margin: 0; padding: 0; border: 0; }
.blur { position: relative;display: inline-block;font-size: 0; line-height: 0; }
.blur:after { position: absolute;left: 0; top: 0; right: 0; bottom: 0;
-webkit-box-shadow: inset 0px 0px 15px 15px #fff;
box-shadow: inset 0px 0px 15px 15px #fff;
content: " ";
}
<!--
#jquery-ui-slider-wrap {padding:0px;text-align: center; width: 38px;border: 0px;border-radius:20px; background-color: rgba(255, 255, 255, 0.15);opacity:0.4; }
#jquery-ui-slider-value {border:0; color: red !important; font-weight: bold; background-color: transparent;margin: 5px; width: 40px; text-align: center; }
#jquery-ui-slider {height: 150px; width:25px;background-color:rgba(255, 255, 255, 0.15); opacity:0.2;opacity:0.2;}
#jquery-ui-slider-wrap2 {padding:0px;text-align: center;width: 38px; border: 0px;border-radius:10px; background-color: rgba(255, 255, 255, 0.15); opacity:0.4; }
#jquery-ui-slider-value2{ border: 0; color: red !important; font-weight: bold; background-color: transparent;margin: 5px;width: 40px; text-align: center; }
#jquery-ui-slider2 { height: 150px; width:25px; background-color:rgba(255, 255, 255, 0.15); opacity:0.2;}
-->
</style>
<link rel="stylesheet" href="alexframework/src/javascript/jquery-ui-1.7.1.custom.css" type="text/css">
<script type="text/javascript" src="alexframework/src/javascript/gear5.js"></script>
<script type="text/javascript" src="alexframework/src/javascript/jquery.min.js"></script>
<script type="text/javascript" src="alexframework/src/javascript/alex.core.js"></script>
<script type="text/javascript" src="alexframework/src/javascript/alex.record.js"></script>
<script type="text/javascript" src="alexframework/src/javascript/albums.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript" ></script>
<script type="text/javascript" src="alexframework/src/javascript/googleMap.js"></script>
<!--<script src="http://code.jquery.com/jquery.min.js"></script>-->
<!--<script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script>-->
<script type="text/javascript" src="alexframework/src/javascript/facebook.js"></script>
<script type="text/javascript" src="alexframework/src/javascript/jquery.ui.min.js"></script>
<script type="text/javascript" src="alexframework/src/javascript/jquery.ui.touch-punch.min.js"></script>
<script type="text/javascript">
function setCss(currentWidth,startDeg, panoramaMode){ // 2012/11/26 add startDeg, panoramaMode
if ( navigator.userAgent.match( /iPhone/i ) || navigator.userAgent.match( /iPod/i ) ) {
alert(navigator.userAgent)
var el = document.getElementById("ctrl1");
el.style.position = 'absolute';
el.style.left = '60px';
el.style.width = '180px';
if(window.navigator.standalone){ el.style.top = '10px'; }
}
shape.style.top='25%';
floor.style.top='30%';
floor.style.left='-50%';
var tY = -1*(720-586)/2;
var tY = 0;
if (window.orientation == 90 || window.orientation == -90||currentWidth > 800){
ctrl2.style.top='60%';ctrl1.style.left='42%';
}
if ( panoramaMode === "3DWall"){ // 2012/11/26
showWall(-1200,startDeg -120); // 20 -> -110
}
$("#getComment").hide();
}
function showWall(x0,rY){ // 2012/11/26
for (var s = 1; s < 13 ; s++){
$("div#s"+ s ).css("top","20%");
tX = x0 + s*204;
$("div#s"+ s ).css("-webkit-transform","rotateY("+rY+"deg)"
+ "translateX("+tX+"px) "
);
}
//$("div#shape").css("-webkit-transform","translateX(500px)");
}
// $.browser.mobileSafari = /webkit.*mobile/i.test(navigator.userAgent)
// if ($.browser.mobileSafari) {
// $.getScript('/public/javascripts/jquery.ui.touch-punch.min.js');
// }
function ctrlToggle(){
$('#jquery-ui-slider-wrap').toggle();
$('#jquery-ui-slider-wrap2').toggle();
$('#ctrl2').toggle();
$('#ctrl1').toggle();
}
<!--
jQuery( function() {
jQuery( '#jquery-ui-slider' ) . slider( {
orientation: 'vertical', animate: 'slow', range: 'min', value: 70, min: -100, max: 300,
slide: function( event, ui ) {
jQuery( '#jquery-ui-slider-value' ) . val( ui.value );
var top = ui.value -100;
shape.style.top= top+ '%';
}
} );
jQuery( '#jquery-ui-slider-value' ) . val( jQuery( '#jquery-ui-slider' ) . slider( 'value' ) );
} );
jQuery( function() {
jQuery( '#jquery-ui-slider2' ) . slider( {
orientation: 'vertical', animate: 'slow', range: 'min', value: 70, min: -200, max: 300,
slide: function( event, ui ) {
jQuery( '#jquery-ui-slider-value2' ) . val( ui.value );
var top = ui.value -100; floor.style.top= top+ '%';
}
} );
jQuery( '#jquery-ui-slider-value2' ) . val( jQuery( '#jquery-ui-slider2' ) . slider( 'value' ) );
} );
jQuery( function() {
jQuery( '#jquery-ui-slider3' ).slider( {
animate:'slow', range: 'min', value: staticRotationY, min: -180, max: 360,
slide: function( event, ui ) {
staticRotationY = ui.value*Math.PI/180;
shape.style.webkitTransform = 'rotateY('+staticRotationY+'rad)';
}
});
} );
-->
</script>
</head>
<body onload="addAnimationHandlers('/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/6.0/Applications/265AB680-9D44-48B1-A4F3-D59E7649A88B/KwinTabBar2.app',60,'stop','41.897669,12.481145','768',15,'0')"><!-- 2012/11/26 add panorama 12/24 aZoom-->
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1&appId=231699360296504";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<br/ >
<br />
<div id="container">
<div id="stage">
<div id="shape" class="ring2 ">
<div id="shapeX" class="ring2 ">
<img class="subplane s1 slideIn" id="sub1" style="padding:0px;"/><img class="subplane s2 slideIn" id="sub2" style="padding:0px;"/>
<img class="subplane s3 slideIn" id="sub3" style="padding:0px;"/><img class="subplane s4 slideIn" id="sub4" style="padding:0px;"/>
<img class="subplane s5 slideIn" id="sub5" style="padding:0px;"/><img class="subplane s6 slideIn" id="sub6" style="padding:0px;"/>
<img class="subplane s7 slideIn" id="sub7" style="padding:0px;"/><img class="subplane s8 slideIn" id="sub8" style="padding:0px;"/>
<img class="subplane s9 slideIn" id="sub9" style="padding:0px;"/><img class="subplane s10 slideIn" id="sub10" style="padding:0px;"/>
<img class="subplane s11 slideIn" id="sub11" style="padding:0px;"/><img class="subplane s12 slideIn" id="sub12" style="padding:0px;"/>
<!-- function pop2(s,n,caption,aid,link,type, w, rowId,_isbn ) -->
<div class="plane s1 slideIn" id="s1" >
<a href='#' onclick="pop('1','https://lh6.googleusercontent.com/-uzM20hTxUA0/UOLGBH_H-yI/AAAAAAAAEvo/ivez2lRBeiE/s640/test%2520title.jpg','1/0','https://lh3.googleusercontent.com/-zdjOkaB1UFA/UOAd98J_JII/AAAAAAAAEso/p5kI-MdGyAs/test%252520title.jpg','https://picasaweb.google.com/102448397019191874652/TAina?authkey=Gv1sRgCNvMs7zujqWvkgE#5827690867774661762','p','160','173','https://lh6.googleusercontent.com/-uzM20hTxUA0/UOLGBH_H-yI/AAAAAAAAEvo/ivez2lRBeiE/s640/test%2520title.jpg','0','0','0')">
<img src="https://lh6.googleusercontent.com/-uzM20hTxUA0/UOLGBH_H-yI/AAAAAAAAEvo/ivez2lRBeiE/s640/test%2520title.jpg" width="160" style="margin-left:0px; margin-top:76px; padding:0px;" id="i1"></a>
</div>
<div class="plane s2 slideIn" id="s2" >
<a href='#' onclick="pop('2','https://lh3.googleusercontent.com/-zdjOkaB1UFA/UOAd98J_JII/AAAAAAAAEso/p5kI-MdGyAs/test%252520title.jpg','マグダラのマリア','https://lh3.googleusercontent.com/-zdjOkaB1UFA/UOAd98J_JII/AAAAAAAAEso/p5kI-MdGyAs/test%252520title.jpg','https://picasaweb.google.com/102448397019191874652/TAina#5827690867774661762','p','160','173','https://lh3.googleusercontent.com/-zdjOkaB1UFA/UOAd98J_JII/AAAAAAAAEso/p5kI-MdGyAs/test%252520title.jpg','0','0','469068009805436')">
<img src="https://lh3.googleusercontent.com/-zdjOkaB1UFA/UOAd98J_JII/AAAAAAAAEso/p5kI-MdGyAs/test%252520title.jpg" width="160" style="margin-left:0px; margin-top:76px; padding:0px;" id="i2"></a>
</div>
<div class="plane s3 slideIn" id="s3" style="margin-left:-66px; width:408px;">
<a href='#' onclick="pop('3','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYNb40W5nG-ltn8j03P8CiKrD5QDvhUClv4KT70hsiYg_BZ3boWOS-CqjQyphLQstGW6lGCE9i5L_45tVewmJT_fQwGW1QfUONSHHa4EtOAAzxvhWXXyYggN3fOFy-6O6aeXGlaLEi3EJf/', '3/0','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYNb40W5nG-ltn8j03P8CiKrD5QDvhUClv4KT70hsiYg_BZ3boWOS-CqjQyphLQstGW6lGCE9i5L_45tVewmJT_fQwGW1QfUONSHHa4EtOAAzxvhWXXyYggN3fOFy-6O6aeXGlaLEi3EJf/','https://picasaweb.google.com/102448397019191874652/TAina?authkey=Gv1sRgCNvMs7zujqWvkgE#5827690967218728642','p','336','174','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYNb40W5nG-ltn8j03P8CiKrD5QDvhUClv4KT70hsiYg_BZ3boWOS-CqjQyphLQstGW6lGCE9i5L_45tVewmJT_fQwGW1QfUONSHHa4EtOAAzxvhWXXyYggN3fOFy-6O6aeXGlaLEi3EJf/','0','0','0')">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYNb40W5nG-ltn8j03P8CiKrD5QDvhUClv4KT70hsiYg_BZ3boWOS-CqjQyphLQstGW6lGCE9i5L_45tVewmJT_fQwGW1QfUONSHHa4EtOAAzxvhWXXyYggN3fOFy-6O6aeXGlaLEi3EJf/" height="200" style="margin-left:100px; margin-top:83px; padding:0px;" id="i3"></a>
</div>
<div class="plane s5 slideIn" id="s5" >
<a href='#' onclick="pop('5','https://lh4.googleusercontent.com/-tVYoBnMuFyw/UN1WL7yPq5I/AAAAAAAAEos/QwRAJI_amA4/Doria-Pamphilj_John.jpg','5/0','https://lh4.googleusercontent.com/-tVYoBnMuFyw/UN1WL7yPq5I/AAAAAAAAEos/QwRAJI_amA4/Doria-Pamphilj_John.jpg','https://picasaweb.google.com/102448397019191874652/TAina?authkey=Gv1sRgCNvMs7zujqWvkgE#5826908255914273682','p','160','175','https://lh4.googleusercontent.com/-tVYoBnMuFyw/UN1WL7yPq5I/AAAAAAAAEos/QwRAJI_amA4/Doria-Pamphilj_John.jpg','0','0','0')">
<img src="https://lh4.googleusercontent.com/-tVYoBnMuFyw/UN1WL7yPq5I/AAAAAAAAEos/QwRAJI_amA4/Doria-Pamphilj_John.jpg" height="200" style="margin-left:0px; margin-top:80px; padding:0px;" id="i5"></a></div>
<div class="plane s6 slideIn" id="s6" style="width:50px">
<a href='#' onclick="pop('6',
'https://lh3.googleusercontent.com/-8XXOSy_6q1Q/UN_lyh01rUI/AAAAAAAAErg/d559OUzFcBM/s576/647px-San_Luigi_dei_Francesi_-_Facade.jpg',
'サン・ルイジ・デイ・フランチェージ教会',
'aid',
'http://snsimglink.blogspot.jp/2012/12/blog-post_24.html','p','160','169',
'https://lh3.googleusercontent.com/-8XXOSy_6q1Q/UN_lyh01rUI/AAAAAAAAErg/d559OUzFcBM/s576/647px-San_Luigi_dei_Francesi_-_Facade.jpg','41.899583, 12.474667','0','0')">
<img src="https://lh3.googleusercontent.com/-8XXOSy_6q1Q/UN_lyh01rUI/AAAAAAAAErg/d559OUzFcBM/s576/647px-San_Luigi_dei_Francesi_-_Facade.jpg" width="50" style="margin-left:0px; margin-top:100px; padding:0px;opacity:0.3;" id="i6"></a>
</div>
<div class="plane s7 slideIn" id="s7" style="width:50px">
<a href='#' onclick="pop('7',
'https://lh4.googleusercontent.com/-Q2PDEEQLUTs/UN0c-40jCXI/AAAAAAAAEoA/GXZa93Ids40/Entrance_Palazzo_Nuovo_2006.jpg',
'カピトリーノ美術館へ',
'aid',
'http://snsimglink.blogspot.jp/2012/12/capitoline.html','p','160','169',
'https://lh4.googleusercontent.com/-Q2PDEEQLUTs/UN0c-40jCXI/AAAAAAAAEoA/GXZa93Ids40/Entrance_Palazzo_Nuovo_2006.jpg','41.893056,12.4825','0','0')">
<img src="https://lh4.googleusercontent.com/-Q2PDEEQLUTs/UN0c-40jCXI/AAAAAAAAEoA/GXZa93Ids40/Entrance_Palazzo_Nuovo_2006.jpg" width="50" style="margin-left:0px; margin-top:100px; padding:0px;opacity:0.3;" id="i7"></a>
</div>
<div class="plane s10 slideIn" id="s10" style="margin-left:-111px; width:612px;">
<a href='#' onclick="pop('10','https://lh4.googleusercontent.com/-zI7MEtImgS0/UOAc-adeujI/AAAAAAAAEsM/aKKUyQhWGKM/DoriaPamphilj.jpg', '11/0','https://lh4.googleusercontent.com/-zI7MEtImgS0/UOAc-adeujI/AAAAAAAAEsM/aKKUyQhWGKM/DoriaPamphilj.jpg','https://picasaweb.google.com/102448397019191874652/TAina?authkey=Gv1sRgCNvMs7zujqWvkgE#5827689776397859378','p','426','172','https://lh4.googleusercontent.com/-zI7MEtImgS0/UOAc-adeujI/AAAAAAAAEsM/aKKUyQhWGKM/DoriaPamphilj.jpg','0','0','0')">
<img src="https://lh4.googleusercontent.com/-zI7MEtImgS0/UOAc-adeujI/AAAAAAAAEsM/aKKUyQhWGKM/DoriaPamphilj.jpg" width="426" style="margin-left:5px; margin-top:30px; padding:0px;" id="i10"></a></div>
<div id="floor" class="slideFloor" align="center">
<!--<img src='@@@' id="floorImg" width="500" height="500">-->
<img src='https://lh6.googleusercontent.com/-dQXMCPm3MCw/UN1ZVV43VXI/AAAAAAAAEps/bgfQDmPDn68/450px-Doria_Pamphilj1.JPG' id="floorImg" width="500" height="500" /><div id="map" class="mapCss"></div>
</div>
<span id="floor_text"></span>
</div>
</div>
<!-- <span id="floor_text"></span>-->
</div>
</div>
<div class="controls" id="ctrl1" style="position:absolute;top:2%; left:38%;width:180px; height:32px; ">
<button onmouseover="toggleShape1(100)" onclick="toggleShape1(200)" class="ctlBtn">-Zoom</button>
<button onmouseover="toggleShape1(-100)" onclick="toggleShape1(-200)" class="ctlBtn">Zoom+</button>
</div>
<div class="controls" id="ctrl2" style="position:absolute;width:282px;top:900px;"><!-- style="position:absolute; top:30px;"-->
<table><tr><td style="height:32px">
<!-- west 左画面--><a href="#" onclick="runAction('changeCurrentTitle','https://lh4.googleusercontent.com/-Q2PDEEQLUTs/UN0c-40jCXI/AAAAAAAAEoA/GXZa93Ids40/Entrance_Palazzo_Nuovo_2006.jpg');">
<img src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRUPoV8HgDosuP_l5BqIkXQNdoa7GYp27kpfCqh3NTcxvfh3yrF1AIfz5NUH7j_tv0UizLv1MJNDfkIXbV44181el-z_TW8oykABWSoUnw2S_aBylT1NZhtb57UCyNHy56b2vM8LImcGNT/s1600/gray_ball2.png style="position:absolute;top:-20%;margin-left:-100px; opacity:0.5; padding:0px;width:70px;height:40px;
-webkit-transform:rotateX(10deg) rotateY(50deg); background:none">
</a>
<a href="#" onclick="runAction('fbAlbum','https://picasaweb.google.com/data/entry/base/user/102448397019191874652/albumid/5825095267691992977/photoid/5826911716075066738?alt=rss&hl=ja,https://lh6.googleusercontent.com/-dQXMCPm3MCw/UN1ZVV43VXI/AAAAAAAAEps/bgfQDmPDn68/450px-Doria_Pamphilj1.JPG,prev,41.897669,12.481145');">
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSLuj4s0z2FJRXkAlK4ivFl9uDiVwCajiX4G6Uy2cvO2yB5B5kLIZlInUUQFBjkNYHfXGH4GDF6gP8RNZPFdKknQR-zZyF-Cb-oWkNqofsD8MJ6NnhXLO6tovfOdkFuT_WebwqHKFEcSUv/s1600/gray_ball.png'
style="-webkit-transform:rotateX(10deg) rotateY(45deg);height:40px; width:48px;opacity:0.5;margin-left:-15px;margin-bottom:3px;background:none"/></a>
</td><td>
<button onclick="autoRotate('left')" class="ctlBtn">
< </button> <button onclick="autoRotate('stop');" class="ctlBtn2">■</button>
<button onclick="autoRotate('right')" class="ctlBtn"> > </button>
</td><td>
<a href="#" onclick="runAction('fbAlbum','https://picasaweb.google.com/data/entry/base/user/102448397019191874652/albumid/5825095267691992977/photoid/5826911716075066738?alt=rss&hl=ja,https://lh6.googleusercontent.com/-dQXMCPm3MCw/UN1ZVV43VXI/AAAAAAAAEps/bgfQDmPDn68/450px-Doria_Pamphilj1.JPG,next,41.897669,12.481145');">
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSLuj4s0z2FJRXkAlK4ivFl9uDiVwCajiX4G6Uy2cvO2yB5B5kLIZlInUUQFBjkNYHfXGH4GDF6gP8RNZPFdKknQR-zZyF-Cb-oWkNqofsD8MJ6NnhXLO6tovfOdkFuT_WebwqHKFEcSUv/s1600/gray_ball.png'
style="-webkit-transform:rotateX(10deg) rotateY(-45deg);height:40px; width:48px;opacity:0.5;margin-right:-20px;margin-bottom:3px;background:none"/></a>
<!--<button onclick="toggleShape1(400)">-Zoom</button> <button onclick="toggleShape1(-400)">Zoom+</button>-->
</td></tr>
</table>
<!--east 右画面--><a href="#" onclick="runAction('changeCurrentTitle','0');">
<img src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRUPoV8HgDosuP_l5BqIkXQNdoa7GYp27kpfCqh3NTcxvfh3yrF1AIfz5NUH7j_tv0UizLv1MJNDfkIXbV44181el-z_TW8oykABWSoUnw2S_aBylT1NZhtb57UCyNHy56b2vM8LImcGNT/s1600/gray_ball2.png style="position:absolute;top:-20%; right:-28%;opacity:0.5; margin-bottom:3px; width:70px;height:40px;
-webkit-transform:rotateX(10deg) rotateY(-50deg);background:none " />
</a>
<!-- slider -->
<div id="jquery-ui-slider3"></div>
</div>
<!--
@movieUrl@
<div style="position:absolute; bottom:10px;">
<a href="#" onclick='runAction("fbtest","")'>fbtest</a><br />
<a href="#" onclick='runAction("changeCurrentTitle","0")'>Home</a><br />
<a href="#" onclick='runAction("changeCurrentTitle","https://lh4.googleusercontent.com/-Q2PDEEQLUTs/UN0c-40jCXI/AAAAAAAAEoA/GXZa93Ids40/Entrance_Palazzo_Nuovo_2006.jpg")'>parentTitle</a><br />
</div>-->
<input id="_type" type="hidden" value="000" />
<!-- map
<div id="map" style="position:absolute;left:15%; top:0%; margin-top:0px; opacity:0.5; width:600px; height:300px;"></div>
-->
<!-- slider -->
<div id="jquery-ui-slider-wrap" style="position:absolute; top:80px;left:-15px;">
<!--<p style="color:red">plane</p>-->
<input type="text" id="jquery-ui-slider-value" /><div id="jquery-ui-slider"></div>
</div>
<div id="jquery-ui-slider-wrap2" style="position:absolute; top:465px; left:-15px;">
<!--<pstyle="color:red">floor</p>-->
<input type="text" id="jquery-ui-slider-value2" /> <div id="jquery-ui-slider2"></div>
</div>
<!-- hideControl -->
<table><tr><td>
<a href="#" onClick="ctrlToggle();">
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRUPoV8HgDosuP_l5BqIkXQNdoa7GYp27kpfCqh3NTcxvfh3yrF1AIfz5NUH7j_tv0UizLv1MJNDfkIXbV44181el-z_TW8oykABWSoUnw2S_aBylT1NZhtb57UCyNHy56b2vM8LImcGNT/s1600/gray_ball2.png' style='opacity:0.3;width:40px;height:40px;background:none'/>
</a></td><td><br /><br />
<a href="#" onClick="ctrlToggle2();">
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRUPoV8HgDosuP_l5BqIkXQNdoa7GYp27kpfCqh3NTcxvfh3yrF1AIfz5NUH7j_tv0UizLv1MJNDfkIXbV44181el-z_TW8oykABWSoUnw2S_aBylT1NZhtb57UCyNHy56b2vM8LImcGNT/s1600/gray_ball2.png' style='opacity:0.3;width:40px;height:40px;background:none'/>
</a></td></tr></table>
<div id="getComment" style="font-size:16px;position:absolute;
top:50%;right:0%;width:480px;padding:30px;height:250px;overflow:scroll;background-color:rgba(0,0,0,0.8);opacity:0.8;">
<!-- <a href="#" onclick="$('#getComment').hide('slow');")>X</a><br />-->
</div>
<!-- <a href="#" onclick="fbLogin();">fbLogin</a><p />-->
<a href="http://snsimglink.blogspot.jp/2013/01/titians-venus-of-urbino.html" imageanchor="1" style=""><img border="0" height="400" width="335" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjafvrTxCOhAK1XzG6Z3ZlmjcNNz5wUBk2go3Uw59mJlXAdL5-vz2MDKJyxAOBQPknYO3HspVzs-wTn06jUIwnILXaCXloIc-Rf4QrYOeRWs2GO6InL3nTUu6mtsgeP6WTXbInDpi_VfOFx/s400/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2013-01-04+19.09.20.png" /></a>
</body>
</html>kwin786http://www.blogger.com/profile/11636870499038520354noreply@blogger.com0tag:blogger.com,1999:blog-4631337081774196669.post-19374557411136469742012-12-30T19:06:00.002+09:002013-01-04T18:05:17.142+09:00Capitoline<!--<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">-->
<html lang="en">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0, user-scalable=YES" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<style type="text/css" media="screen">
body { background-color: black; color: white; font-family: 'Lucida Grande', Verdana, Arial; font-size: 12px;
background-image: -webkit-gradient(radial,50% 500,1,50% 500,400, from(rgba(255, 255, 255, 0.3)),to(rgba(255, 255, 255, 0)));
background-repeat: no-repeat;
}
#container { width: 100%; height: 850px;
-webkit-perspective: 800; /* For compatibility with iPhone 3.0, we leave off the units here */
-webkit-perspective-origin: 50% 225px;
}
/* 0 -> -120 -100 -> -50 2012/02/07 */
#floor { position:absolute;top:-10%; left:-50% ; margin-top:-120px; margin-left:-50px;
-webkit-mask-image:-webkit-gradient(radial, center center, 0, center center, 350,from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
-webkit-transform: rotateX(90deg) rotateY(0deg) rotateZ(90deg) translateZ(-210px) translateY(10px);
}
.mapCss { position:absolute;top:0%; left:0% ; margin-top:0px; margin-left:-0px; width:500px; height:500px;/* 2012/11/27 */
-webkit-mask-image:-webkit-gradient(radial, center center, 0, center center, 350,from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
-webkit-transform: rotateX(90deg) rotateY(0deg) rotateZ(90deg) translateZ(-210px) translateY(10px);
opacity:0.8; /* translateY などはきいていないが webkit-transform はきいている これをなくすと opacity の値を小さくする必要がある */
}
#floorBallLeft { position:absolute;top:-10%; left:10% ; margin-top:0px; margin-left:-90px; height:50px; opacity:0.5;
-webkit-transform: rotateX(15deg) rotateY(45deg) rotateZ(0deg) translateZ(0px) translateY(0px); }
#floorBallRight { position:absolute;top:-10%; right:15% ; margin-top:0px; margin-right:-90px; height:50px; width:45px;opacity:0.5;
-webkit-transform: rotateX(10deg) rotateY(-45deg) rotateZ(0deg) translateZ(0px) translateY(0px); }
#floorBallHome { position:absolute;top:20%; left:35% ; margin-top:60px; margin-left:0px; height:35px; width:75px; opacity:0.3;
-webkit-transform: rotateX(15deg) rotateY(0deg) rotateZ(0deg) translateZ(0px) translateY(0px); }
/* #floorC { position:absolute;top:95%; left:50% ;-webkit-transform:scale(3);}
#floorR { position:absolute;top:90%; right:15% ; margin-top:0px; margin-right:0px; -webkit-transform:scale(3);}
#floorL { position:absolute;top:90%; left: 15% ; margin-top:0px; margin-left:0px ; -webkit-transform:scale(3);}*/
a:link { text-decoration: none; color:#DF1FBB; }
a:active { text-decoration: none; color:#DF1FBB; }
a:visited { text-decoration: none; color:#DF1FBB; } /* #555555 */
a:hover { text-decoration: none; color:#DF1FBB; }
li { display:inline-block; }
#floor_text{ position: absolute;
top:80%; left:-80%; height: 800px; width: 420px;
border: 0px solid white;
-webkit-box-sizing: border-box; text-align: left; font-family: Times, serif;
font-size: 20pt; font-color: white; /*font-size: 24pt; color: white; */
}
#stage { width: 100%; height: 100%; -webkit-transition: -webkit-transform 2s; -webkit-transform-style: preserve-3d; }
#shape { position: relative; top: 50px; margin: 0 auto; height: 400px; width: 204px; -webkit-transform-style: preserve-3d; }
#shapeX { margin: 0 auto; height: 200px; width: 200px; -webkit-transform-style: preserve-3d; }
.plane { position: absolute; top:0%; /*top:-150%; */
height: 400px; width: 204px; border: 0px solid white;
text-align: center; font-family: Times, serif; font-size: 124pt; color: black;
background-image: -webkit-gradient(linear, left bottom, right top,from(rgba(0,0,0,0)), to(rgba(0,0,0,1.0)));
background-repeat: no-repeat;
background-color: rgba( 0, 0, 0, 0.4); /* 0.6 */
background-color:#556B2F;
-webkit-box-sizing: border-box;
-webkit-transition: -webkit-transform 2s, opacity 2s; -webkit-backface-visibility: hidden; /* hidden */
}
.subplane {position: absolute; width:204px;top:-335px; border: 0px; padding:0px; opacity:0.5;
-webkit-transition: -webkit-transform 2s,opacity 2s;-webkit-backface-visibility:visible;}
#shape.backfaces .plane { -webkit-backface-visibility: visible; }
@-webkit-keyframes spin { from { -webkit-transform: rotateY(0); } to { -webkit-transform: rotateY(-360deg); } }
@-webkit-keyframes spinR{ from { -webkit-transform: rotateY(0); } to { -webkit-transform: rotateY( 360deg); } }
@-webkit-keyframes spin0{ }
/* 上部の説明文の書式設定 背景は灰色で角を丸める .controls {width: 70%; height:10%; margin: 0 auto; padding: 5px 20px; */
.controls { opacity:0.6; /* width: 80%; height:40%; */
position:absolute;top:80%; left:34%; height:36px; /* bottom:1% */
margin: 0 auto; padding: 5px 10px; background-color: rgba(255, 255, 255, 0.15);
-webkit-border-radius: 48px;
/* -webkit-touch-callout: none;きかない */
}
.ctlBtn { font-size:10pt; opacity:0.8; margin-bottom:7px;}
.ctlBtn2 { font-size:10pt; opacity:0.8; margin-bottom:15px; font-family:Curier;}
.controls > div { margin: 10px; }
/* ---------- ring2 styles ------------- */
.ring2 > .s1 { -webkit-transform: rotateY( 0deg) translateY( 0px) translateZ(-380px); }
.ring2 > .s2 { -webkit-transform: rotateY( -30deg) translateY( 0px) translateZ(-380px); }
.ring2 > .s3 { -webkit-transform: rotateY( -60deg) translateY( 0px) translateZ(-380px); }
.ring2 > .s4 { -webkit-transform: rotateY( -90deg) translateZ(-380px); }
.ring2 > .s5 { -webkit-transform: rotateY( -120deg) translateZ(-380px); }
.ring2 > .s6 { -webkit-transform: rotateY( -150deg) translateZ(-380px); }
.ring2 > .s7 { -webkit-transform: rotateY( -180deg) translateZ(-380px); }
.ring2 > .s8 { -webkit-transform: rotateY( -210deg) translateZ(-380px); }
.ring2 > .s9 { -webkit-transform: rotateY( 120deg) translateZ(-380px); }
.ring2 > .s10 { -webkit-transform: rotateY( 90deg) translateZ(-380px); }
.ring2 > .s11 { -webkit-transform: rotateY( -300deg) translateZ(-380px); }
.ring2 > .s12 { -webkit-transform: rotateY( -330deg) translateZ(-380px); }
.ring2 > .s13 { -webkit-transform: translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s14 { -webkit-transform: rotateY( -20deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s15 { -webkit-transform: rotateY( -40deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s16 { -webkit-transform: rotateY( -60deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s17 { -webkit-transform: rotateY( -80deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s18 { -webkit-transform: rotateY( -100deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s19 { -webkit-transform: rotateY( -120deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s20 { -webkit-transform: rotateY( -140deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s21 { -webkit-transform: rotateY( -160deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s22 { -webkit-transform: rotateY( -180deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s23 { -webkit-transform: rotateY( -200deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s24 { -webkit-transform: rotateY( -220deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s25 { -webkit-transform: rotateY( -240deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s26 { -webkit-transform: rotateY( -260deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s27 { -webkit-transform: rotateY( -280deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s28 { -webkit-transform: rotateY( -300deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s29 { -webkit-transform: rotateY( -320deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s30 { -webkit-transform: rotateY( -340deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.slideIn {-webkit-animation-timing-function: ease ;-webkit-animation-duration: 1500ms;-webkit-animation-name: slidein; margin-right:0px;}
@-webkit-keyframes slidein {from { margin-top: 120px; opacity:0; } to { margin-top: 0px; opacity:1; } }
.slideFloor {-webkit-animation-timing-function: ease;-webkit-animation-duration: 1000ms;-webkit-animation-name: slidein; margin-left:0px;}
@-webkit-keyframes slideFloor {from { margin-top: 120px; opacity:0; } to { margin-top: 0px; opacity:1;} }
.blur, .blur > img {margin: 0; padding: 0; border: 0; }
.blur { position: relative;display: inline-block;font-size: 0; line-height: 0; }
.blur:after { position: absolute;left: 0; top: 0; right: 0; bottom: 0;
-webkit-box-shadow: inset 0px 0px 15px 15px #fff;
box-shadow: inset 0px 0px 15px 15px #fff;
content: " ";
}
<!--
#jquery-ui-slider-wrap {padding:0px;text-align: center; width: 38px;border: 0px;border-radius:20px; background-color: rgba(255, 255, 255, 0.15);opacity:0.4; }
#jquery-ui-slider-value {border:0; color: red !important; font-weight: bold; background-color: transparent;margin: 5px; width: 40px; text-align: center; }
#jquery-ui-slider {height: 150px; width:25px;background-color:rgba(255, 255, 255, 0.15); opacity:0.2;opacity:0.2;}
#jquery-ui-slider-wrap2 {padding:0px;text-align: center;width: 38px; border: 0px;border-radius:10px; background-color: rgba(255, 255, 255, 0.15); opacity:0.4; }
#jquery-ui-slider-value2{ border: 0; color: red !important; font-weight: bold; background-color: transparent;margin: 5px;width: 40px; text-align: center; }
#jquery-ui-slider2 { height: 150px; width:25px; background-color:rgba(255, 255, 255, 0.15); opacity:0.2;}
-->
</style>
<link rel="stylesheet" href="alexframework/src/javascript/jquery-ui-1.7.1.custom.css" type="text/css">
<script type="text/javascript" src="alexframework/src/javascript/gear5.js"></script>
<script type="text/javascript" src="alexframework/src/javascript/jquery.min.js"></script>
<script type="text/javascript" src="alexframework/src/javascript/alex.core.js"></script>
<script type="text/javascript" src="alexframework/src/javascript/alex.record.js"></script>
<script type="text/javascript" src="alexframework/src/javascript/albums.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript" ></script>
<script type="text/javascript" src="alexframework/src/javascript/googleMap.js"></script>
<!--<script src="http://code.jquery.com/jquery.min.js"></script>-->
<!--<script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script>-->
<script type="text/javascript" src="alexframework/src/javascript/facebook.js"></script>
<script type="text/javascript" src="alexframework/src/javascript/jquery.ui.min.js"></script>
<script type="text/javascript" src="alexframework/src/javascript/jquery.ui.touch-punch.min.js"></script>
<script type="text/javascript">
function setCss(currentWidth,startDeg, panoramaMode){ // 2012/11/26 add startDeg, panoramaMode
if ( navigator.userAgent.match( /iPhone/i ) || navigator.userAgent.match( /iPod/i ) ) {
alert(navigator.userAgent)
var el = document.getElementById("ctrl1");
el.style.position = 'absolute';
el.style.left = '60px';
el.style.width = '180px';
if(window.navigator.standalone){ el.style.top = '10px'; }
}
shape.style.top='25%';
floor.style.top='30%';
floor.style.left='-50%';
var tY = -1*(720-586)/2;
var tY = 0;
if (window.orientation == 90 || window.orientation == -90||currentWidth > 800){
ctrl2.style.top='60%';ctrl1.style.left='42%';
}
if ( panoramaMode === "3DWall"){ // 2012/11/26
showWall(-1200,startDeg -120); // 20 -> -110
}
$("#getComment").hide();
}
function showWall(x0,rY){ // 2012/11/26
for (var s = 1; s < 13 ; s++){
$("div#s"+ s ).css("top","20%");
tX = x0 + s*204;
$("div#s"+ s ).css("-webkit-transform","rotateY("+rY+"deg)"
+ "translateX("+tX+"px) "
);
}
//$("div#shape").css("-webkit-transform","translateX(500px)");
}
// $.browser.mobileSafari = /webkit.*mobile/i.test(navigator.userAgent)
// if ($.browser.mobileSafari) {
// $.getScript('/public/javascripts/jquery.ui.touch-punch.min.js');
// }
function ctrlToggle(){
$('#jquery-ui-slider-wrap').toggle();
$('#jquery-ui-slider-wrap2').toggle();
$('#ctrl2').toggle();
$('#ctrl1').toggle();
}
<!--
jQuery( function() {
jQuery( '#jquery-ui-slider' ) . slider( {
orientation: 'vertical', animate: 'slow', range: 'min', value: 70, min: -100, max: 300,
slide: function( event, ui ) {
jQuery( '#jquery-ui-slider-value' ) . val( ui.value );
var top = ui.value -100;
shape.style.top= top+ '%';
}
} );
jQuery( '#jquery-ui-slider-value' ) . val( jQuery( '#jquery-ui-slider' ) . slider( 'value' ) );
} );
jQuery( function() {
jQuery( '#jquery-ui-slider2' ) . slider( {
orientation: 'vertical', animate: 'slow', range: 'min', value: 70, min: -200, max: 300,
slide: function( event, ui ) {
jQuery( '#jquery-ui-slider-value2' ) . val( ui.value );
var top = ui.value -100; floor.style.top= top+ '%';
}
} );
jQuery( '#jquery-ui-slider-value2' ) . val( jQuery( '#jquery-ui-slider2' ) . slider( 'value' ) );
} );
jQuery( function() {
jQuery( '#jquery-ui-slider3' ).slider( {
animate:'slow', range: 'min', value: staticRotationY, min: -180, max: 360,
slide: function( event, ui ) {
staticRotationY = ui.value*Math.PI/180;
shape.style.webkitTransform = 'rotateY('+staticRotationY+'rad)';
}
});
} );
-->
</script>
</head>
<body onload="addAnimationHandlers('/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/6.0/Applications/265AB680-9D44-48B1-A4F3-D59E7649A88B/KwinTabBar2.app',75,'stop','41.893056, 12.4825,14','768',14,'0')"><!-- 2012/11/26 add panorama 12/24 aZoom-->
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1&appId=231699360296504";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<br/ >
<br />
<div id="container">
<div id="stage">
<div id="shape" class="ring2 ">
<div id="shapeX" class="ring2 ">
<img class="subplane s1 slideIn" id="sub1" style="padding:0px;"/><img class="subplane s2 slideIn" id="sub2" style="padding:0px;"/>
<img class="subplane s3 slideIn" id="sub3" style="padding:0px;"/><img class="subplane s4 slideIn" id="sub4" style="padding:0px;"/>
<img class="subplane s5 slideIn" id="sub5" style="padding:0px;"/><img class="subplane s6 slideIn" id="sub6" style="padding:0px;"/>
<img class="subplane s7 slideIn" id="sub7" style="padding:0px;"/><img class="subplane s8 slideIn" id="sub8" style="padding:0px;"/>
<img class="subplane s9 slideIn" id="sub9" style="padding:0px;"/><img class="subplane s10 slideIn" id="sub10" style="padding:0px;"/>
<img class="subplane s11 slideIn" id="sub11" style="padding:0px;"/><img class="subplane s12 slideIn" id="sub12" style="padding:0px;"/>
<div class="plane s3 slideIn" id="s3" style="margin-left:-24px; width:408px;">
<a href='#' onclick="pop('3',
'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMopNweW50yG36wc1DCsYu5GisLnqEE9cjkvWOO8vQtHQsTytL1ctQWixEc4cIiAizb7OK-s398hOm000cpCnPqEapPVt_w9lQ9Atnx1uL9cBCyrhoNYNvxebjAwMqLii32CdX-NSEvWd3/',
'3/0','0',
'https://lh3.googleusercontent.com/-GrAqOvQMkOQ/UOVeyAo5M1I/AAAAAAAAEws/FxeMxgRmXm0/s576/%25E5%25A5%25B3%25E5%258D%25A0%25E3%2581%2584%25E5%25B8%25AB.png','p','252','167',
'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMopNweW50yG36wc1DCsYu5GisLnqEE9cjkvWOO8vQtHQsTytL1ctQWixEc4cIiAizb7OK-s398hOm000cpCnPqEapPVt_w9lQ9Atnx1uL9cBCyrhoNYNvxebjAwMqLii32CdX-NSEvWd3/','0','0','0')">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMopNweW50yG36wc1DCsYu5GisLnqEE9cjkvWOO8vQtHQsTytL1ctQWixEc4cIiAizb7OK-s398hOm000cpCnPqEapPVt_w9lQ9Atnx1uL9cBCyrhoNYNvxebjAwMqLii32CdX-NSEvWd3/" height="200" style="margin-left:5px; margin-top:30px; padding:0px;" id="i3"></a></div>
<!-- s,n,caption,aid,link, type,w,rowId, isbn, latlng,startRSS,fbid -->
<div class="plane s5 slideIn" id="s5" style="margin-left:-24px; width:408px;">
<a href='#' onclick="pop('5',
'https://lh3.googleusercontent.com/-GrAqOvQMkOQ/UOVeyAo5M1I/AAAAAAAAEws/FxeMxgRmXm0/s576/%25E5%25A5%25B3%25E5%258D%25A0%25E3%2581%2584%25E5%25B8%25AB.png','女占い師','0',
'https://lh3.googleusercontent.com/-GrAqOvQMkOQ/UOVeyAo5M1I/AAAAAAAAEws/FxeMxgRmXm0/s576/%25E5%25A5%25B3%25E5%258D%25A0%25E3%2581%2584%25E5%25B8%25AB.png','p','252','167',
'https://lh3.googleusercontent.com/-GrAqOvQMkOQ/UOVeyAo5M1I/AAAAAAAAEws/FxeMxgRmXm0/s576/%25E5%25A5%25B3%25E5%258D%25A0%25E3%2581%2584%25E5%25B8%25AB.png','0','0','0')">
<img src="https://lh3.googleusercontent.com/-GrAqOvQMkOQ/UOVeyAo5M1I/AAAAAAAAEws/FxeMxgRmXm0/s576/%25E5%25A5%25B3%25E5%258D%25A0%25E3%2581%2584%25E5%25B8%25AB.png" width="252" style="margin-left:5px; margin-top:30px; padding:0px;" id="i5"></a>
</div>
<div class="plane s15 slideIn" id="s15" style="margin-left:-24px; width:408px;">
<a href='#' onclick="pop('15','http://farm8.staticflickr.com/7163/6712821425_737edb65c5_z.jpg', '3/0','http://farm8.staticflickr.com/7163/6712821425_737edb65c5_z.jpg','http://farm8.staticflickr.com/7163/6712821425_737edb65c5_z.jpg','p','252','167','http://farm8.staticflickr.com/7163/6712821425_737edb65c5_z.jpg','0','0','0')">
<img src="http://farm8.staticflickr.com/7163/6712821425_737edb65c5_z.jpg" width="252" style="margin-left:5px; margin-top:30px; padding:0px;" id="i15"></a></div>
<div class="plane s9 slideIn" id="s9" style="width:50px">
<a href='#' onclick="pop('9',
'https://lh3.googleusercontent.com/-8XXOSy_6q1Q/UN_lyh01rUI/AAAAAAAAErg/d559OUzFcBM/s576/647px-San_Luigi_dei_Francesi_-_Facade.jpg',
'サン・ルイジ・デイ・フランチェージ教会',
'aid',
'http://snsimglink.blogspot.jp/2012/12/blog-post_24.html','p','160','169',
'https://lh3.googleusercontent.com/-8XXOSy_6q1Q/UN_lyh01rUI/AAAAAAAAErg/d559OUzFcBM/s576/647px-San_Luigi_dei_Francesi_-_Facade.jpg','41.899583, 12.474667','0','0')">
<img src="https://lh3.googleusercontent.com/-8XXOSy_6q1Q/UN_lyh01rUI/AAAAAAAAErg/d559OUzFcBM/s576/647px-San_Luigi_dei_Francesi_-_Facade.jpg" width="50" style="margin-left:0px; margin-top:100px; padding:0px;opacity:0.3;" id="i9"></a>
</div>
<div class="plane s10 slideIn" id="s10" style="width:50px">
<a href='#' onclick="pop('10','https://lh6.googleusercontent.com/-dQXMCPm3MCw/UN1ZVV43VXI/AAAAAAAAEps/bgfQDmPDn68/450px-Doria_Pamphilj1.JPG',
'ドーリア・パンフィーリ美術館へ Doria Pamphilj Gallery',
'https://picasaweb.google.com/102448397019191874652/TAina?authkey=Gv1sRgCNvMs7zujqWvkgE#5826911716075066738',
'http://snsimglink.blogspot.jp/2012/12/doria-pamphilij.html',
'p','160','168',
'https://lh4.googleusercontent.com/-tVYoBnMuFyw/UN1WL7yPq5I/AAAAAAAAEos/QwRAJI_amA4/s640/Doria-Pamphilj_John.jpg',
'41.897669,12.481145','0','0')">
<img src="https://lh6.googleusercontent.com/-dQXMCPm3MCw/UN1ZVV43VXI/AAAAAAAAEps/bgfQDmPDn68/450px-Doria_Pamphilj1.JPG" width="50" style="margin-left:0px; margin-top:129px; padding:0px;opacity:0.5" id="i10"></a></div>
<div id="floor" class="slideFloor" align="center">
<!--<img src='@@@' id="floorImg" width="500" height="500">-->
<img src='https://lh4.googleusercontent.com/-Q2PDEEQLUTs/UN0c-40jCXI/AAAAAAAAEoA/GXZa93Ids40/Entrance_Palazzo_Nuovo_2006.jpg' id="floorImg" width="500" height="500" /><div id="map" class="mapCss"></div>
</div>
<span id="floor_text"></span>
</div>
</div>
<!-- <span id="floor_text"></span>-->
</div>
</div>
<div class="controls" id="ctrl1" style="position:absolute;top:2%; left:38%;width:180px; height:32px; ">
<button onmouseover="toggleShape1(100)" onclick="toggleShape1(200)" class="ctlBtn">-Zoom</button>
<button onmouseover="toggleShape1(-100)" onclick="toggleShape1(-200)" class="ctlBtn">Zoom+</button>
</div>
<div class="controls" id="ctrl2" style="position:absolute;top:880px;width:282px">
<table><tr><td style="height:32px">
<!-- west 左画面--><a href="#" onclick="runAction('changeCurrentTitle','https://lh4.googleusercontent.com/-Y20eUABYcHw/UNbsdew0saI/AAAAAAAAEkc/Rd6yLHGUDX8/test%2520title.jpg');">
<img src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRUPoV8HgDosuP_l5BqIkXQNdoa7GYp27kpfCqh3NTcxvfh3yrF1AIfz5NUH7j_tv0UizLv1MJNDfkIXbV44181el-z_TW8oykABWSoUnw2S_aBylT1NZhtb57UCyNHy56b2vM8LImcGNT/s1600/gray_ball2.png style="position:absolute;top:-20%;margin-left:-100px; opacity:0.5; padding:0px;width:70px;height:40px;
-webkit-transform:rotateX(10deg) rotateY(50deg); background:none">
</a>
<a href="#" onclick="runAction('fbAlbum','https://picasaweb.google.com/data/entry/base/user/102448397019191874652/albumid/5825095267691992977/photoid/5826911716075066738?alt=rss&hl=ja,https://lh4.googleusercontent.com/-Q2PDEEQLUTs/UN0c-40jCXI/AAAAAAAAEoA/GXZa93Ids40/Entrance_Palazzo_Nuovo_2006.jpg,prev,41.893056, 12.4825,14');">
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSLuj4s0z2FJRXkAlK4ivFl9uDiVwCajiX4G6Uy2cvO2yB5B5kLIZlInUUQFBjkNYHfXGH4GDF6gP8RNZPFdKknQR-zZyF-Cb-oWkNqofsD8MJ6NnhXLO6tovfOdkFuT_WebwqHKFEcSUv/s1600/gray_ball.png'
style="-webkit-transform:rotateX(10deg) rotateY(45deg);height:40px; width:48px;opacity:0.5;margin-left:-15px;margin-bottom:3px;background:none"/></a>
</td><td>
<button onclick="autoRotate('left')" class="ctlBtn">
< </button> <button onclick="autoRotate('stop');" class="ctlBtn2">■</button>
<button onclick="autoRotate('right')" class="ctlBtn"> > </button>
</td><td>
<a href="#" onclick="runAction('fbAlbum','https://picasaweb.google.com/data/entry/base/user/102448397019191874652/albumid/5825095267691992977/photoid/5826911716075066738?alt=rss&hl=ja,https://lh4.googleusercontent.com/-Q2PDEEQLUTs/UN0c-40jCXI/AAAAAAAAEoA/GXZa93Ids40/Entrance_Palazzo_Nuovo_2006.jpg,next,41.893056, 12.4825,14');">
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSLuj4s0z2FJRXkAlK4ivFl9uDiVwCajiX4G6Uy2cvO2yB5B5kLIZlInUUQFBjkNYHfXGH4GDF6gP8RNZPFdKknQR-zZyF-Cb-oWkNqofsD8MJ6NnhXLO6tovfOdkFuT_WebwqHKFEcSUv/s1600/gray_ball.png'
style="-webkit-transform:rotateX(10deg) rotateY(-45deg);height:40px; width:48px;opacity:0.5;margin-right:-20px;margin-bottom:3px;background:none"/></a>
<!--<button onclick="toggleShape1(400)">-Zoom</button> <button onclick="toggleShape1(-400)">Zoom+</button>-->
</td></tr>
</table>
<!--east 右画面--><a href="#" onclick="runAction('changeCurrentTitle','https://lh6.googleusercontent.com/-dQXMCPm3MCw/UN1ZVV43VXI/AAAAAAAAEps/bgfQDmPDn68/450px-Doria_Pamphilj1.JPG');">
<img src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRUPoV8HgDosuP_l5BqIkXQNdoa7GYp27kpfCqh3NTcxvfh3yrF1AIfz5NUH7j_tv0UizLv1MJNDfkIXbV44181el-z_TW8oykABWSoUnw2S_aBylT1NZhtb57UCyNHy56b2vM8LImcGNT/s1600/gray_ball2.png style="position:absolute;top:-20%; right:-28%;opacity:0.5; margin-bottom:3px; width:70px;height:40px;
-webkit-transform:rotateX(10deg) rotateY(-50deg);background:none " />
</a>
<!-- slider -->
<div id="jquery-ui-slider3"></div>
</div>
<!--
@movieUrl@
<div style="position:absolute; bottom:10px;">
<a href="#" onclick='runAction("fbtest","")'>fbtest</a><br />
<a href="#" onclick='runAction("changeCurrentTitle","0")'>Home</a><br />
<a href="#" onclick='runAction("changeCurrentTitle","244")'>parentTitle</a><br />
</div>-->
<input id="_type" type="hidden" value="000" />
<!-- map
<div id="map" style="position:absolute;left:15%; top:0%; margin-top:0px; opacity:0.5; width:600px; height:300px;"></div>
-->
<!-- slider -->
<div id="jquery-ui-slider-wrap" style="position:absolute; top:80px;left:-15px;">
<!--<p style="color:red">plane</p>-->
<input type="text" id="jquery-ui-slider-value" /><div id="jquery-ui-slider"></div>
</div>
<div id="jquery-ui-slider-wrap2" style="position:absolute; top:465px; left:-15px;">
<!--<pstyle="color:red">floor</p>-->
<input type="text" id="jquery-ui-slider-value2" /> <div id="jquery-ui-slider2"></div>
</div>
<!-- hideControl -->
<table><tr><td>
<a href="#" onClick="ctrlToggle();">
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRUPoV8HgDosuP_l5BqIkXQNdoa7GYp27kpfCqh3NTcxvfh3yrF1AIfz5NUH7j_tv0UizLv1MJNDfkIXbV44181el-z_TW8oykABWSoUnw2S_aBylT1NZhtb57UCyNHy56b2vM8LImcGNT/s1600/gray_ball2.png' style='opacity:0.3;width:40px;height:40px;background:none'/>
</a></td><td><br /><br />
<a href="#" onClick="ctrlToggle2();">
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRUPoV8HgDosuP_l5BqIkXQNdoa7GYp27kpfCqh3NTcxvfh3yrF1AIfz5NUH7j_tv0UizLv1MJNDfkIXbV44181el-z_TW8oykABWSoUnw2S_aBylT1NZhtb57UCyNHy56b2vM8LImcGNT/s1600/gray_ball2.png' style='opacity:0.3;width:40px;height:40px;background:none'/>
</a></td></tr></table>
<div id="getComment" style="font-size:16px;position:absolute;
top:50%;right:0%;width:480px;padding:30px;height:250px;overflow:scroll;background-color:rgba(0,0,0,0.8);opacity:0.8;">
<!-- <a href="#" onclick="$('#getComment').hide('slow');")>X</a><br />-->
</div>
<!-- <a href="#" onclick="fbLogin();">fbLogin</a><p />-->
<p /> <p /> <p /> <p />
<div style="font-size:16px;background-color:rgba(0,0,0,0.8);opacity:0.8;">
<table><tr><td>
ローマの丘の上にあるこのカピトリーニ美術館はGoogle mapで内部まで公開されアクセスすることができる。
<a href="http://www.flickr.com/photos/werlew/3542208657/">http://www.flickr.com/photos/werlew/3542208657/</a> によるとこのあたりに展示されているようだが Google の撮影時には展示されていなかったようす。
<a href="https://maps.google.co.jp/maps?ll=41.894802,12.482057&spn=0.004792,0.010729&t=h&z=16&key=ABQIAAAA-ZhWPxUD2HBlDi98EIg6ChTLKAuOVMPWCjglNGPUTX0fw1y6ABQibEwIWd8ErjTpKamdsZpfu4BO4A&sensor=false&mapclient=jsapi&oi=map_misc">リンク</a>
</td><td>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmsLI2-K6ZBMnQIq2PTMFc9HJh1UAKT7hqRYXuKl-DnHLL28QBtA-lfPgx4WBnvT1TRgTB5ungkjpgiaDqKnDb8Znpuc_VZ-ceQMljwl7U95OFFXu7sdRfyHuIn9D9EmKwW_lBgihjn9Id/s1600/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2013-01-03+17.31.24.png" imageanchor="1" style=""><img border="0" height="307" width="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmsLI2-K6ZBMnQIq2PTMFc9HJh1UAKT7hqRYXuKl-DnHLL28QBtA-lfPgx4WBnvT1TRgTB5ungkjpgiaDqKnDb8Znpuc_VZ-ceQMljwl7U95OFFXu7sdRfyHuIn9D9EmKwW_lBgihjn9Id/s400/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2013-01-03+17.31.24.png" /></a>
</td></tr></table>
<table><tr><td>
<a href="http://www.amazon.co.jp/gp/product/4000225642/ref=as_li_ss_il?ie=UTF8&tag=kwin786-22&linkCode=as2&camp=247&creative=7399&creativeASIN=4000225642"><img border="0" src="http://ws.assoc-amazon.jp/widgets/q?_encoding=UTF8&Format=_SL160_&ASIN=4000225642&MarketPlace=JP&ID=AsinImage&WS=1&tag=kwin786-22&ServiceVersion=20070822" ></a><img src="http://www.assoc-amazon.jp/e/ir?t=kwin786-22&l=as2&o=9&a=4000225642" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />
</td><td>
イタリアが生みだした膨大な美術の精華をコンピューターで検索、活用できるようにデータベー
ス化しようというのである。彼がめざしているのは、古代ローマの遺物から現代イタリア芸術に
いたるあらゆる美の所産を一堂に網羅し、その科学面から技術面、文献上の資料までをくまなく
記載した彼の好む言葉でいうなら完璧な”医学診断書” のようなものだった。コッレアーレは
早くもイタルシエールというテクノロジー企業を抱きこみ、このアイディアを商業的に実現する
ためのテスト版づくりの資金を捻出していた。目下のところはカピトリーニ美術館が収蔵する絵画
約二百点の知りうる事実をことごとく記録し、それをカタログ化するという段階だった。館蔵
品のほんの一部にすぎないが、コッレアーレがいうように、何事も一歩からはじまるのだ。
P16
</td></tr></table>
</div>
</body>
</html>kwin786http://www.blogger.com/profile/11636870499038520354noreply@blogger.com0tag:blogger.com,1999:blog-4631337081774196669.post-91826268224147102652012-12-24T23:15:00.002+09:002013-01-04T14:15:53.311+09:00カラヴァッジョ<!--<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">-->
<html lang="en">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0, user-scalable=YES" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<style type="text/css" media="screen">
body { background-color: black; color: white; font-family: 'Lucida Grande', Verdana, Arial; font-size: 12px;
background-image: -webkit-gradient(radial,50% 500,1,50% 500,400, from(rgba(255, 255, 255, 0.3)),to(rgba(255, 255, 255, 0)));
background-repeat: no-repeat;
}
#container { width: 100%; height: 850px;
-webkit-perspective: 800; /* For compatibility with iPhone 3.0, we leave off the units here */
-webkit-perspective-origin: 50% 225px;
}
/* 0 -> -120 -100 -> -50 2012/02/07 */
#floor { position:absolute;top:-10%; left:-50% ; margin-top:-120px; margin-left:-50px;
-webkit-mask-image:-webkit-gradient(radial, center center, 0, center center, 350,from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
-webkit-transform: rotateX(90deg) rotateY(0deg) rotateZ(90deg) translateZ(-210px) translateY(10px);
}
.mapCss { position:absolute;top:0%; left:0% ; margin-top:0px; margin-left:-0px; width:500px; height:500px;/* 2012/11/27 */
-webkit-mask-image:-webkit-gradient(radial, center center, 0, center center, 350,from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
-webkit-transform: rotateX(90deg) rotateY(0deg) rotateZ(90deg) translateZ(-210px) translateY(10px);
opacity:0.8; /* translateY などはきいていないが webkit-transform はきいている これをなくすと opacity の値を小さくする必要がある */
}
#floorBallLeft { position:absolute;top:-10%; left:10% ; margin-top:0px; margin-left:-90px; height:50px; opacity:0.5;
-webkit-transform: rotateX(15deg) rotateY(45deg) rotateZ(0deg) translateZ(0px) translateY(0px); }
#floorBallRight { position:absolute;top:-10%; right:15% ; margin-top:0px; margin-right:-90px; height:50px; width:45px;opacity:0.5;
-webkit-transform: rotateX(10deg) rotateY(-45deg) rotateZ(0deg) translateZ(0px) translateY(0px); }
#floorBallHome { position:absolute;top:20%; left:35% ; margin-top:60px; margin-left:0px; height:35px; width:75px; opacity:0.3;
-webkit-transform: rotateX(15deg) rotateY(0deg) rotateZ(0deg) translateZ(0px) translateY(0px); }
/* #floorC { position:absolute;top:95%; left:50% ;-webkit-transform:scale(3);}
#floorR { position:absolute;top:90%; right:15% ; margin-top:0px; margin-right:0px; -webkit-transform:scale(3);}
#floorL { position:absolute;top:90%; left: 15% ; margin-top:0px; margin-left:0px ; -webkit-transform:scale(3);}*/
a:link { text-decoration: none; color:#DF1FBB; }
a:active { text-decoration: none; color:#DF1FBB; }
a:visited { text-decoration: none; color:#DF1FBB; } /* #555555 */
a:hover { text-decoration: none; color:#DF1FBB; }
li { display:inline-block; }
#floor_text{ position: absolute;
top:80%; left:-80%; height: 800px; width: 420px;
border: 0px solid white;
-webkit-box-sizing: border-box; text-align: left; font-family: Times, serif;
font-size: 20pt; font-color: white; /*font-size: 24pt; color: white; */
}
#stage { width: 100%; height: 100%; -webkit-transition: -webkit-transform 2s; -webkit-transform-style: preserve-3d; }
#shape { position: relative; top: 50px; margin: 0 auto; height: 400px; width: 204px; -webkit-transform-style: preserve-3d; }
#shapeX { margin: 0 auto; height: 200px; width: 200px; -webkit-transform-style: preserve-3d; }
.plane { position: absolute; top:0%; /*top:-150%; */
height: 400px; width: 204px; border: 0px solid white;
text-align: center; font-family: Times, serif; font-size: 124pt; color: black;
background-image: -webkit-gradient(linear, left bottom, right top,from(rgba(0,0,0,0)), to(rgba(0,0,0,1.0)));
background-repeat: no-repeat;
background-color: rgba( 0, 0, 0, 0.4); /* 0.6 */
-webkit-box-sizing: border-box;
-webkit-transition: -webkit-transform 2s, opacity 2s; -webkit-backface-visibility: hidden; /* hidden */
}
.subplane {position: absolute; width:204px;top:-335px; border: 0px; padding:0px; opacity:0.5;
-webkit-transition: -webkit-transform 2s,opacity 2s;-webkit-backface-visibility:visible;}
#shape.backfaces .plane { -webkit-backface-visibility: visible; }
@-webkit-keyframes spin { from { -webkit-transform: rotateY(0); } to { -webkit-transform: rotateY(-360deg); } }
@-webkit-keyframes spinR{ from { -webkit-transform: rotateY(0); } to { -webkit-transform: rotateY( 360deg); } }
@-webkit-keyframes spin0{ }
/* 上部の説明文の書式設定 背景は灰色で角を丸める .controls {width: 70%; height:10%; margin: 0 auto; padding: 5px 20px; */
.controls { opacity:0.6; /* width: 80%; height:40%; */
position:absolute;top:80%; left:34%; height:36px; /* bottom:1% */
margin: 0 auto; padding: 5px 10px; background-color: rgba(255, 255, 255, 0.15);
-webkit-border-radius: 48px;
/* -webkit-touch-callout: none;きかない */
}
.ctlBtn { font-size:10pt; opacity:0.8; margin-bottom:7px;}
.ctlBtn2 { font-size:10pt; opacity:0.8; margin-bottom:15px; font-family:Curier;}
.controls > div { margin: 10px; }
/* ---------- ring2 styles ------------- */
.ring2 > .s1 { -webkit-transform: rotateY( 0deg) translateY( 0px) translateZ(-380px); }
.ring2 > .s2 { -webkit-transform: rotateY( -30deg) translateY( 0px) translateZ(-380px); }
.ring2 > .s3 { -webkit-transform: rotateY( -60deg) translateY( 0px) translateZ(-380px); }
.ring2 > .s4 { -webkit-transform: rotateY( -90deg) translateZ(-380px); }
.ring2 > .s5 { -webkit-transform: rotateY( -120deg) translateZ(-380px); }
.ring2 > .s6 { -webkit-transform: rotateY( -150deg) translateZ(-380px); }
.ring2 > .s7 { -webkit-transform: rotateY( -180deg) translateZ(-380px); }
.ring2 > .s8 { -webkit-transform: rotateY( -210deg) translateZ(-380px); }
.ring2 > .s9 { -webkit-transform: rotateY( 120deg) translateZ(-380px); }
.ring2 > .s10 { -webkit-transform: rotateY( 90deg) translateZ(-380px); }
.ring2 > .s11 { -webkit-transform: rotateY( -300deg) translateZ(-380px); }
.ring2 > .s12 { -webkit-transform: rotateY( -330deg) translateZ(-380px); }
.ring2 > .s13 { -webkit-transform: translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s14 { -webkit-transform: rotateY( -20deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s15 { -webkit-transform: rotateY( -40deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s16 { -webkit-transform: rotateY( -60deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s17 { -webkit-transform: rotateY( -80deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s18 { -webkit-transform: rotateY( -100deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s19 { -webkit-transform: rotateY( -120deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s20 { -webkit-transform: rotateY( -140deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s21 { -webkit-transform: rotateY( -160deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s22 { -webkit-transform: rotateY( -180deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s23 { -webkit-transform: rotateY( -200deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s24 { -webkit-transform: rotateY( -220deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s25 { -webkit-transform: rotateY( -240deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s26 { -webkit-transform: rotateY( -260deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s27 { -webkit-transform: rotateY( -280deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s28 { -webkit-transform: rotateY( -300deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s29 { -webkit-transform: rotateY( -320deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s30 { -webkit-transform: rotateY( -340deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.slideIn {-webkit-animation-timing-function: ease ;-webkit-animation-duration: 1500ms;-webkit-animation-name: slidein; margin-right:0px;}
@-webkit-keyframes slidein {from { margin-top: 120px; opacity:0; } to { margin-top: 0px; opacity:1; } }
.slideFloor {-webkit-animation-timing-function: ease;-webkit-animation-duration: 1000ms;-webkit-animation-name: slidein; margin-left:0px;}
@-webkit-keyframes slideFloor {from { margin-top: 120px; opacity:0; } to { margin-top: 0px; opacity:1;} }
.blur, .blur > img {margin: 0; padding: 0; border: 0; }
.blur { position: relative;display: inline-block;font-size: 0; line-height: 0; }
.blur:after { position: absolute;left: 0; top: 0; right: 0; bottom: 0;
-webkit-box-shadow: inset 0px 0px 15px 15px #fff;
box-shadow: inset 0px 0px 15px 15px #fff;
content: " ";
}
<!--
#jquery-ui-slider-wrap {padding:0px;text-align: center; width: 38px;border: 0px;border-radius:20px; background-color: rgba(255, 255, 255, 0.15);opacity:0.4; }
#jquery-ui-slider-value {border:0; color: red !important; font-weight: bold; background-color: transparent;margin: 5px; width: 40px; text-align: center; }
#jquery-ui-slider {height: 150px; width:25px;background-color:rgba(255, 255, 255, 0.15); opacity:0.2;opacity:0.2;}
#jquery-ui-slider-wrap2 {padding:0px;text-align: center;width: 38px; border: 0px;border-radius:10px; background-color: rgba(255, 255, 255, 0.15); opacity:0.4; }
#jquery-ui-slider-value2{ border: 0; color: red !important; font-weight: bold; background-color: transparent;margin: 5px;width: 40px; text-align: center; }
#jquery-ui-slider2 { height: 150px; width:25px; background-color:rgba(255, 255, 255, 0.15); opacity:0.2;}
-->
</style>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript" ></script>
<script type="text/javascript" src="alexframework/src/javascript/googleMap.js"></script>
<script type="text/javascript">
function setCss(currentWidth,startDeg, panoramaMode){ // 2012/11/26 add startDeg, panoramaMode
if ( navigator.userAgent.match( /iPhone/i ) || navigator.userAgent.match( /iPod/i ) ) {
alert(navigator.userAgent)
var el = document.getElementById("ctrl1");
el.style.position = 'absolute';
el.style.left = '60px';
el.style.width = '180px';
if(window.navigator.standalone){ el.style.top = '10px'; }
}
shape.style.top='25%';
floor.style.top='30%';
floor.style.left='-50%';
var tY = -1*(720-586)/2;
var tY = 0;
if (window.orientation == 90 || window.orientation == -90||currentWidth > 800){
ctrl2.style.top='60%';ctrl1.style.left='42%';
}
if ( panoramaMode === "3DWall"){ // 2012/11/26
showWall(-1200,startDeg -120); // 20 -> -110
}
$("#getComment").hide();
}
function showWall(x0,rY){ // 2012/11/26
for (var s = 1; s < 13 ; s++){
$("div#s"+ s ).css("top","20%");
tX = x0 + s*204;
$("div#s"+ s ).css("-webkit-transform","rotateY("+rY+"deg)"
+ "translateX("+tX+"px) "
);
}
//$("div#shape").css("-webkit-transform","translateX(500px)");
}
// $.browser.mobileSafari = /webkit.*mobile/i.test(navigator.userAgent)
// if ($.browser.mobileSafari) {
// $.getScript('/public/javascripts/jquery.ui.touch-punch.min.js');
// }
function ctrlToggle(){
$('#jquery-ui-slider-wrap').toggle();
$('#jquery-ui-slider-wrap2').toggle();
$('#ctrl2').toggle();
$('#ctrl1').toggle();
$('html, body').animate({ scrollTop: $("#shape").offset().top }, 500);
}
<!--
jQuery( function() {
jQuery( '#jquery-ui-slider' ) . slider( {
orientation: 'vertical', animate: 'slow', range: 'min', value: 70, min: -100, max: 300,
slide: function( event, ui ) {
jQuery( '#jquery-ui-slider-value' ) . val( ui.value );
var top = ui.value -100;
shape.style.top= top+ '%';
}
} );
jQuery( '#jquery-ui-slider-value' ) . val( jQuery( '#jquery-ui-slider' ) . slider( 'value' ) );
} );
jQuery( function() {
jQuery( '#jquery-ui-slider2' ) . slider( {
orientation: 'vertical', animate: 'slow', range: 'min', value: 70, min: -200, max: 300,
slide: function( event, ui ) {
jQuery( '#jquery-ui-slider-value2' ) . val( ui.value );
var top = ui.value -100; floor.style.top= top+ '%';
}
} );
jQuery( '#jquery-ui-slider-value2' ) . val( jQuery( '#jquery-ui-slider2' ) . slider( 'value' ) );
} );
jQuery( function() {
jQuery( '#jquery-ui-slider3' ).slider( {
animate:'slow', range: 'min', value: staticRotationY, min: -180, max: 360,
slide: function( event, ui ) {
staticRotationY = ui.value*Math.PI/180;
shape.style.webkitTransform = 'rotateY('+staticRotationY+'rad)';
}
});
} );
-->
</script>
</head>
<body onload="addAnimationHandlers('/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/6.0/Applications/265AB680-9D44-48B1-A4F3-D59E7649A88B/KwinTabBar2.app',80,'stop','41.899583, 12.474667,13','768',14,'12')"><!-- 2012/11/26 add panorama 12/24 aZoom-->
<br/ >
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1&appId=231699360296504";
fjs.parentNode.insertBefore(js, fjs);
}(document, "script", "facebook-jssdk"));</script>
<br />
<div id="container">
<div id="stage">
<div id="shape" class="ring2 ">
<div id="shapeX" class="ring2 ">
<img class="subplane s1 slideIn" id="sub1" style="padding:0px;"/><img class="subplane s2 slideIn" id="sub2" style="padding:0px;"/>
<img class="subplane s3 slideIn" id="sub3" style="padding:0px;"/><img class="subplane s4 slideIn" id="sub4" style="padding:0px;"/>
<img class="subplane s5 slideIn" id="sub5" style="padding:0px;"/><img class="subplane s6 slideIn" id="sub6" style="padding:0px;"/>
<img class="subplane s7 slideIn" id="sub7" style="padding:0px;"/><img class="subplane s8 slideIn" id="sub8" style="padding:0px;"/>
<img class="subplane s9 slideIn" id="sub9" style="padding:0px;"/><img class="subplane s10 slideIn" id="sub10" style="padding:0px;"/>
<img class="subplane s11 slideIn" id="sub11" style="padding:0px;"/><img class="subplane s12 slideIn" id="sub12" style="padding:0px;"/>
<div class="plane s2 slideIn" id="s2" style="margin-left:-69px; width:408px;">
<a href='#' onclick="pop('2','https://lh4.googleusercontent.com/-PX9OZAoYYec/UNbsfGI1u8I/AAAAAAAAEkk/iqWr_BONaNA/test%252520title.jpg', '2/','https://lh4.googleusercontent.com/-PX9OZAoYYec/UNbsfGI1u8I/AAAAAAAAEkk/iqWr_BONaNA/test%252520title.jpg','https://picasaweb.google.com/102448397019191874652/TAina?authkey=Gv1sRgCNvMs7zujqWvkgE#5825103187018103746','p','342','157','https://lh4.googleusercontent.com/-PX9OZAoYYec/UNbsfGI1u8I/AAAAAAAAEkk/iqWr_BONaNA/test%252520title.jpg','0','0','467094193336151')">
<img src="https://lh4.googleusercontent.com/-PX9OZAoYYec/UNbsfGI1u8I/AAAAAAAAEkk/iqWr_BONaNA/test%252520title.jpg" width="342" style="margin-left:5px; margin-top:30px; padding:0px;" id="i2"></a></div>
<div class="plane s4 slideIn" id="s4" style="margin-left:0px; width:408px;">
<a href='#' onclick="pop('4','https://lh3.googleusercontent.com/-LYpGOSq2TXo/UNbshMx4FcI/AAAAAAAAEks/CfC1LDHVQgg/test%252520title.jpg', '4/','https://lh3.googleusercontent.com/-LYpGOSq2TXo/UNbshMx4FcI/AAAAAAAAEks/CfC1LDHVQgg/test%252520title.jpg','https://picasaweb.google.com/102448397019191874652/TAina?authkey=Gv1sRgCNvMs7zujqWvkgE#5825103223160575426&fbid=467094196669484','p','203','164','https://lh3.googleusercontent.com/-LYpGOSq2TXo/UNbshMx4FcI/AAAAAAAAEks/CfC1LDHVQgg/test%252520title.jpg','0','0','467094196669484')">
<img src="https://lh3.googleusercontent.com/-LYpGOSq2TXo/UNbshMx4FcI/AAAAAAAAEks/CfC1LDHVQgg/test%252520title.jpg" width="203" style="margin-left:5px; margin-top:30px; padding:0px;" id="i4"></a></div>
<div class="plane s6 slideIn" id="s6" style="margin-left:-65px; width:408px;">
<a href='#' onclick="pop('6','https://lh4.googleusercontent.com/-Y20eUABYcHw/UNbsdew0saI/AAAAAAAAEkc/Rd6yLHGUDX8/test%2520title.jpg', '6/','https://lh4.googleusercontent.com/-Y20eUABYcHw/UNbsdew0saI/AAAAAAAAEkc/Rd6yLHGUDX8/test%2520title.jpg','0','p','335','165','https://lh4.googleusercontent.com/-Y20eUABYcHw/UNbsdew0saI/AAAAAAAAEkc/Rd6yLHGUDX8/test%2520title.jpg','0','0','467094190002818')">
<img src="https://lh4.googleusercontent.com/-Y20eUABYcHw/UNbsdew0saI/AAAAAAAAEkc/Rd6yLHGUDX8/test%2520title.jpg" width="335" style="margin-left:5px; margin-top:30px; padding:0px;" id="i6"></a></div>
<!--function pop(s,n,caption,aid,link,type, w, rowId,isbn,latlng,startRSS,fbid -->
<div class="plane s9 slideIn" id="s9" style="margin-left:-65px; width:50px;">
<a href='#' onclick="pop('9',
'https://lh4.googleusercontent.com/-Q2PDEEQLUTs/UN0c-40jCXI/AAAAAAAAEoA/GXZa93Ids40/s640/Entrance_Palazzo_Nuovo_2006.jpg',
'カピトリーノ美術館へ 南東方向の丘の上『洗礼者聖ヨハネ』',
'0',
'http://snsimglink.blogspot.jp/2012/12/capitoline.html','p','135','165',
'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMopNweW50yG36wc1DCsYu5GisLnqEE9cjkvWOO8vQtHQsTytL1ctQWixEc4cIiAizb7OK-s398hOm000cpCnPqEapPVt_w9lQ9Atnx1uL9cBCyrhoNYNvxebjAwMqLii32CdX-NSEvWd3/s640/caravaggio%2520_st.john_capitoline.png','41.893056, 12.4825','467094190002818')">
<img src="https://lh4.googleusercontent.com/-Q2PDEEQLUTs/UN0c-40jCXI/AAAAAAAAEoA/GXZa93Ids40/s640/Entrance_Palazzo_Nuovo_2006.jpg" width="50" style="margin-left:5px; margin-top:50px; opacity:0.3; padding:0px;background:none" id="i9">
</a></div>
<div class="plane s10 slideIn" id="s10" style="width:50px">
<a href='#' onclick="pop('10','https://lh6.googleusercontent.com/-dQXMCPm3MCw/UN1ZVV43VXI/AAAAAAAAEps/bgfQDmPDn68/450px-Doria_Pamphilj1.JPG',
'ドーリア・パンフィーリ美術館へ Doria Pamphilj Gallery',
'https://picasaweb.google.com/102448397019191874652/TAina?authkey=Gv1sRgCNvMs7zujqWvkgE#5826911716075066738',
'http://snsimglink.blogspot.jp/2012/12/doria-pamphilij.html',
'p','160','168',
'https://lh4.googleusercontent.com/-tVYoBnMuFyw/UN1WL7yPq5I/AAAAAAAAEos/QwRAJI_amA4/s640/Doria-Pamphilj_John.jpg',
'41.897669,12.481145','0','0')">
<img src="https://lh6.googleusercontent.com/-dQXMCPm3MCw/UN1ZVV43VXI/AAAAAAAAEps/bgfQDmPDn68/450px-Doria_Pamphilj1.JPG" width="50" style="margin-left:0px; margin-top:129px; padding:0px;opacity:0.5" id="i10"></a></div>
<div class="plane s29 slideIn" id="s29" style="margin-left:-65px; width:124px; height:220px">
<a href='#' onclick="pop('29',
'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzFI6I1Jj-rmOa8IVFgR9Lc2vx55OkMF8R5EIwSOsGME0YDrYQ5t_XeYhccFio_zf17mzlLjIAASnIYxcC1TfMFEp-FbF1rbNRLhZXQozG2wCkgDRp11TKhpPWf2LyTTr4pC5x9qVaLtBB/s600/NocturnalandTidePredictor.png',
'museum home',
'0',
'http://snsimglink.blogspot.jp/2012/12/capitoline.html','p','135','165',
'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzFI6I1Jj-rmOa8IVFgR9Lc2vx55OkMF8R5EIwSOsGME0YDrYQ5t_XeYhccFio_zf17mzlLjIAASnIYxcC1TfMFEp-FbF1rbNRLhZXQozG2wCkgDRp11TKhpPWf2LyTTr4pC5x9qVaLtBB/s600/NocturnalandTidePredictor.png','41.893056, 12.4825','467094190002818')">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzFI6I1Jj-rmOa8IVFgR9Lc2vx55OkMF8R5EIwSOsGME0YDrYQ5t_XeYhccFio_zf17mzlLjIAASnIYxcC1TfMFEp-FbF1rbNRLhZXQozG2wCkgDRp11TKhpPWf2LyTTr4pC5x9qVaLtBB/s600/NocturnalandTidePredictor.png" width="120" style="margin-left:5px; margin-top:50px; opacity:0.3; padding:0px;background:none" id="i29">
</a></div>
<div id="floor" class="slideFloor" align="center">
<!--<img src='@@@' id="floorImg" width="500" height="500">https://picasaweb.google.com/data/feed/base/user/102448397019191874652/albumid/5825095267691992977?alt=rss&kind=photo&start-index=5&authkey=Gv1sRgCNvMs7zujqWvkgE&hl=ja-->
<img src='https://lh3.googleusercontent.com/-q1yf1KWpfnU/UNbjw_rx_kI/AAAAAAAAEig/x3AmXKJ22f4/s640/test%2520title.jpg' id="floorImg" width="500" height="500"><div id="map" class="mapCss"></div>
</div>
<span id="floor_text"></span>
</div>
</div>
<!-- <span id="floor_text"></span>-->
</div>
</div>
<div class="controls" id="ctrl1" style="position:absolute;top:2%; left:38%;width:180px; height:32px; ">
<button onmouseover="toggleShape1(100)" onclick="toggleShape1(200)" class="ctlBtn">-Zoom</button>
<button onmouseover="toggleShape1(-100)" onclick="toggleShape1(-200)" class="ctlBtn">Zoom+</button>
</div>
<div class="controls" id="ctrl2" style="position:absolute;top:880px;;width:282px"><!-- style="position:absolute; top:30px;"-->
<table><tr><td style="height:32px">
<!-- west 左画面--><a href="#" onclick="runAction('changeCurrentTitle','https://lh4.googleusercontent.com/-PX9OZAoYYec/UNbsfGI1u8I/AAAAAAAAEkk/iqWr_BONaNA/test%252520title.jpg');">
<img src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRUPoV8HgDosuP_l5BqIkXQNdoa7GYp27kpfCqh3NTcxvfh3yrF1AIfz5NUH7j_tv0UizLv1MJNDfkIXbV44181el-z_TW8oykABWSoUnw2S_aBylT1NZhtb57UCyNHy56b2vM8LImcGNT/s1600/gray_ball2.png style="position:absolute;top:-20%;margin-left:-100px; opacity:0.5; padding:0px;width:70px;height:40px;
-webkit-transform:rotateX(10deg) rotateY(50deg); background:none">
</a>
<a href="#" onclick="runAction('fbAlbum','3124038432335505519,https://picasaweb.google.com/data/feed/base/user/102448397019191874652/albumid/5825095267691992977?alt=rss&kind=photo&start-index=5&authkey=Gv1sRgCNvMs7zujqWvkgE&hl=ja,prev,41.899583, 12.474667,16');">
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSLuj4s0z2FJRXkAlK4ivFl9uDiVwCajiX4G6Uy2cvO2yB5B5kLIZlInUUQFBjkNYHfXGH4GDF6gP8RNZPFdKknQR-zZyF-Cb-oWkNqofsD8MJ6NnhXLO6tovfOdkFuT_WebwqHKFEcSUv/s1600/gray_ball.png'
style="-webkit-transform:rotateX(10deg) rotateY(45deg);height:40px; width:48px;opacity:0.5;margin-left:-15px;margin-bottom:3px;background:none"/></a>
</td><td>
<button onclick="autoRotate('left')" class="ctlBtn">
< </button> <button onclick="autoRotate('stop');" class="ctlBtn2">■</button>
<button onclick="autoRotate('right')" class="ctlBtn"> > </button>
</td><td>
<a href="#" onclick="runAction('fbAlbum','3124038432335505519,https://picasaweb.google.com/data/feed/base/user/102448397019191874652/albumid/5825095267691992977?alt=rss&kind=photo&start-index=5&authkey=Gv1sRgCNvMs7zujqWvkgE&hl=ja,next,41.899583, 12.474667,16');">
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSLuj4s0z2FJRXkAlK4ivFl9uDiVwCajiX4G6Uy2cvO2yB5B5kLIZlInUUQFBjkNYHfXGH4GDF6gP8RNZPFdKknQR-zZyF-Cb-oWkNqofsD8MJ6NnhXLO6tovfOdkFuT_WebwqHKFEcSUv/s1600/gray_ball.png'
style="-webkit-transform:rotateX(10deg) rotateY(-45deg);height:40px; width:48px;opacity:0.5;margin-right:-20px;margin-bottom:3px;background:none"/></a>
<!--<button onclick="toggleShape1(400)">-Zoom</button> <button onclick="toggleShape1(-400)">Zoom+</button>-->
</td></tr>
</table>
<!--east 右画面--><a href="#" onclick="runAction('changeCurrentTitle','https://lh4.googleusercontent.com/-Y20eUABYcHw/UNbsdew0saI/AAAAAAAAEkc/Rd6yLHGUDX8/test%2520title.jpg');">
<img src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRUPoV8HgDosuP_l5BqIkXQNdoa7GYp27kpfCqh3NTcxvfh3yrF1AIfz5NUH7j_tv0UizLv1MJNDfkIXbV44181el-z_TW8oykABWSoUnw2S_aBylT1NZhtb57UCyNHy56b2vM8LImcGNT/s1600/gray_ball2.png style="position:absolute;top:-20%; right:-28%;opacity:0.5; margin-bottom:3px; width:70px;height:40px;
-webkit-transform:rotateX(10deg) rotateY(-50deg);background:none " />
</a>
<!-- slider -->
<div id="jquery-ui-slider3"></div>
</div>
<!--
@movieUrl@
<div style="position:absolute; bottom:10px;">
<a href="#" onclick='runAction("fbtest","")'>fbtest</a><br />
<a href="#" onclick='runAction("changeCurrentTitle","0")'>Home</a><br />
<a href="#" onclick='runAction("changeCurrentTitle","0")'>parentTitle</a><br />
</div>-->
<input id="_type" type="hidden" value="000" />
<!-- map
<div id="map" style="position:absolute;left:15%; top:0%; margin-top:0px; opacity:0.5; width:600px; height:300px;"></div>
-->
<!-- slider -->
<div id="jquery-ui-slider-wrap" style="position:absolute; top:80px;left:-15px;">
<!--<p style="color:red">plane</p>-->
<input type="text" id="jquery-ui-slider-value" /><div id="jquery-ui-slider"></div>
</div>
<div id="jquery-ui-slider-wrap2" style="position:absolute; top:465px; left:-15px;">
<!--<pstyle="color:red">floor</p>-->
<input type="text" id="jquery-ui-slider-value2" /> <div id="jquery-ui-slider2"></div>
</div>
<!-- hideControl -->
<table><tr><td>
<a href="#" onClick="ctrlToggle();">
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRUPoV8HgDosuP_l5BqIkXQNdoa7GYp27kpfCqh3NTcxvfh3yrF1AIfz5NUH7j_tv0UizLv1MJNDfkIXbV44181el-z_TW8oykABWSoUnw2S_aBylT1NZhtb57UCyNHy56b2vM8LImcGNT/s1600/gray_ball2.png' style='opacity:0.3;width:40px;height:40px;background:none'/>
</a></td><td><br /><br />
<a href="#" onClick="ctrlToggle2();">
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRUPoV8HgDosuP_l5BqIkXQNdoa7GYp27kpfCqh3NTcxvfh3yrF1AIfz5NUH7j_tv0UizLv1MJNDfkIXbV44181el-z_TW8oykABWSoUnw2S_aBylT1NZhtb57UCyNHy56b2vM8LImcGNT/s1600/gray_ball2.png' style='opacity:0.3;width:40px;height:40px;background:none'/>
</a></td></tr></table>
<div id="getComment" style="font-size:16px;position:absolute;
top:550px;right:0%;width:480px;padding:30px;height:250px;overflow:scroll;background-color:rgba(0,0,0,0.8);opacity:0.8;">
<!-- <a href="#" onclick="$('#getComment').hide('slow');")>X</a><br />-->
</div>
<!-- <a href="#" onclick="fbLogin();">fbLogin</a><p />-->
<a href="#" onclick="fbLogin();">fbLogin</a><p />
<div style="font-size:16px;background-color:rgba(0,0,0,0.8);opacity:0.8;">
サン・ルイジ・デイ・フランチェージ教会で最も有名な絵はコンタレッリ礼拝堂にある一連の絵であり、バロック絵画の先駆者カラヴァッジオが1599年から1600年に聖マタイの生涯を描いた絵である。「聖マタイの召命」、「聖マタイと天使」、「聖マタイの殉教」の3枚がある。
<p />
<a href="http://www.amazon.co.jp/gp/product/4000225642/ref=as_li_ss_il?ie=UTF8&tag=kwin786-22&linkCode=as2&camp=247&creative=7399&creativeASIN=4000225642"><img border="0" src="http://ws.assoc-amazon.jp/widgets/q?_encoding=UTF8&Format=_SL160_&ASIN=4000225642&MarketPlace=JP&ID=AsinImage&WS=1&tag=kwin786-22&ServiceVersion=20070822" ></a><img src="http://www.assoc-amazon.jp/e/ir?t=kwin786-22&l=as2&o=9&a=4000225642" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />
ユダは主に接吻したのち、その御肩に手をあてがい その背後では使徒ヨハネが両手をあげて逃げ惑う。
<p />
キリストの捕縛 (The Taking of Christ)』(アイルランド国立美術館、1602年ごろ)は200年以上にわたって失われた絵画だとされていたが、1990年になってダブリンのイエズス会教会で再発見された。アイルランドまで足取りを「消えたカラヴァジョ」<a href="http://eurasia-blog.cocolog-nifty.com/eurasia/2010/05/post-f8e6.html">*1</a> <a href="http://loungecafe2004.com/novels/2008/03/15-224429.php">*2</a>では追跡している。
<p />
<a href="http://www.amazon.co.jp/gp/product/4796644733/ref=as_li_ss_il?ie=UTF8&tag=kwin786-22&linkCode=as2&camp=247&creative=7399&creativeASIN=4796644733"><img border="0" src="http://ws.assoc-amazon.jp/widgets/q?_encoding=UTF8&Format=_SL160_&ASIN=4796644733&MarketPlace=JP&ID=AsinImage&WS=1&tag=kwin786-22&ServiceVersion=20070822" ></a><img src="http://www.assoc-amazon.jp/e/ir?t=kwin786-22&l=as2&o=9&a=4796644733" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />
復活のためには磔刑になる必要があったが、間違いなく捕まえてもらうためには信頼ある誰かに明示してもらう必要があった。
<p />
<a href="http://www.amazon.co.jp/gp/product/4791758757/ref=as_li_ss_il?ie=UTF8&tag=kwin786-22&linkCode=as2&camp=247&creative=7399&creativeASIN=4791758757"><img border="0" src="http://ws.assoc-amazon.jp/widgets/q?_encoding=UTF8&Format=_SL160_&ASIN=4791758757&MarketPlace=JP&ID=AsinImage&WS=1&tag=kwin786-22&ServiceVersion=20070822" ></a><img src="http://www.assoc-amazon.jp/e/ir?t=kwin786-22&l=as2&o=9&a=4791758757" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />
福音書(特にルカ)はイエス処刑の責任をユダヤ人に押し付け、ローマ当局の責任を免れさせようとする傾向にあるのだが...
<hr />関連
<a href="http://ja.wikipedia.org/wiki/ナザレのイエス">http://ja.wikipedia.org/wiki/ナザレのイエス</a>
</div>
</body>
</html>kwin786http://www.blogger.com/profile/11636870499038520354noreply@blogger.com0tag:blogger.com,1999:blog-4631337081774196669.post-34590794797761243772012-12-04T15:41:00.000+09:002012-12-27T21:03:44.140+09:00法隆寺金堂<html >
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0, user-scalable=YES" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<style type="text/css" media="screen">
body { background-color: black; color: white; font-family: 'Lucida Grande', Verdana, Arial; font-size: 12px;
background-image: -webkit-gradient(radial,50% 500,1,50% 500,400, from(rgba(255, 255, 255, 0.3)),to(rgba(255, 255, 255, 0)));
background-repeat: no-repeat;
}
#container { width: 100%; height: 850px;
-webkit-perspective: 800; /* For compatibility with iPhone 3.0, we leave off the units here */
-webkit-perspective-origin: 50% 225px;
}
#floor { position:absolute; left:-50% ; margin-left:-50px;
top:105%; /* top:-10%;margin-top:-120px; */
-webkit-mask-image:-webkit-gradient(radial, center center, 0, center center, 350,from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
-webkit-transform: rotateX(90deg) rotateY(0deg) rotateZ(-90deg) translateZ(-230px) translateY(10px);
}
#floorBallLeft { position:absolute;top:-10%; left:10% ; margin-top:0px; margin-left:-90px; height:50px; opacity:0.5;
-webkit-transform: rotateX(15deg) rotateY(45deg) rotateZ(0deg) translateZ(0px) translateY(0px); }
#floorBallRight { position:absolute;top:-10%; right:15% ; margin-top:0px; margin-right:-90px; height:50px; width:45px;opacity:0.5;
-webkit-transform: rotateX(10deg) rotateY(-45deg) rotateZ(0deg) translateZ(0px) translateY(0px); }
#floorBallHome { position:absolute;top:20%; left:35% ; margin-top:60px; margin-left:0px; height:35px; width:75px; opacity:0.3;
-webkit-transform: rotateX(15deg) rotateY(0deg) rotateZ(0deg) translateZ(0px) translateY(0px); }
a:link { text-decoration: none; color:#DF1FBB; }
a:active { text-decoration: none; color:#DF1FBB; }
a:visited { text-decoration: none; color:#DF1FBB; } /* #555555 */
a:hover { text-decoration: none; color:#DF1FBB; }
li { display:inline-block; }
#floor_text{ position: absolute;
top:80%; left:-80%; height: 800px; width: 420px;
border: 0px solid white;
-webkit-box-sizing: border-box; text-align: left; font-family: Times, serif;
font-size: 20pt; font-color: white; /*font-size: 24pt; color: white; */
}
#stage { width: 100%; height: 100%; -webkit-transition: -webkit-transform 2s; -webkit-transform-style: preserve-3d; }
#shape { position: relative; top: 50px; margin: 0 auto; height: 400px; width: 204px; -webkit-transform-style: preserve-3d; }
#shapeX { margin: 0 auto; height: 200px; width: 200px; -webkit-transform-style: preserve-3d; }
.plane { position: absolute; top:0%; /*top:-150%; */
height: 400px; width: 204px; border: 0px solid white;
text-align: center; font-family: Times, serif; font-size: 124pt; color: black;
background-image: -webkit-gradient(linear, left bottom, right top,from(rgba(0,0,0,0)), to(rgba(0,0,0,1.0)));
background-repeat: no-repeat;
background-color: rgba( 0, 0, 0, 0.4); /* 0.6 */
-webkit-box-sizing: border-box;
-webkit-transition: -webkit-transform 2s, opacity 2s; -webkit-backface-visibility: hidden; /* hidden */
}
.subplane {position: absolute; width:204px;top:-335px; border: 0px; padding:0px; opacity:0.5;
-webkit-transition: -webkit-transform 2s,opacity 2s;-webkit-backface-visibility:visible;}
#shape.backfaces .plane { -webkit-backface-visibility: visible; }
@-webkit-keyframes spin { from { -webkit-transform: rotateY(0); } to { -webkit-transform: rotateY(-360deg); } }
@-webkit-keyframes spinR{ from { -webkit-transform: rotateY(0); } to { -webkit-transform: rotateY( 360deg); } }
@-webkit-keyframes spin0{ }
/* 上部の説明文の書式設定 背景は灰色で角を丸める .controls {width: 70%; height:10%; margin: 0 auto; padding: 5px 20px; */
.controls { opacity:0.6; /* width: 80%; height:40%; */
position:absolute;top:80%; left:34%; height:36px; /* bottom:1% */
margin: 0 auto; padding: 5px 10px; background-color: rgba(255, 255, 255, 0.15);
-webkit-border-radius: 48px;
/* -webkit-touch-callout: none;きかない */
}
.ctlBtn { font-size:10pt; opacity:0.8; margin-bottom:15px; }
.ctlBtn2 { font-size:10pt; opacity:0.8; margin-bottom:15px; font-family:Curier;}
.controls > div { margin: 10px; }
/* ---------- ring2 styles ------------- */
.ring2 > .s1 { -webkit-transform: rotateY( 0deg) translateY( 0px) translateZ(-380px); }
.ring2 > .s2 { -webkit-transform: rotateY( -30deg) translateY( 0px) translateZ(-380px); }
.ring2 > .s3 { -webkit-transform: rotateY( -60deg) translateY( 0px) translateZ(-380px); }
.ring2 > .s4 { -webkit-transform: rotateY( -90deg) translateZ(-380px); }
.ring2 > .s5 { -webkit-transform: rotateY( -120deg) translateZ(-380px); }
.ring2 > .s6 { -webkit-transform: rotateY( -150deg) translateZ(-380px); }
.ring2 > .s7 { -webkit-transform: rotateY( -180deg) translateZ(-380px); }
.ring2 > .s8 { -webkit-transform: rotateY( -210deg) translateZ(-380px); }
.ring2 > .s9 { -webkit-transform: rotateY( 120deg) translateZ(-380px); }
.ring2 > .s10 { -webkit-transform: rotateY( 90deg) translateZ(-380px); }
.ring2 > .s11 { -webkit-transform: rotateY( -300deg) translateZ(-380px); }
.ring2 > .s12 { -webkit-transform: rotateY( -330deg) translateZ(-380px); }
.ring2 > .s13 { -webkit-transform: translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s14 { -webkit-transform: rotateY( -20deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s15 { -webkit-transform: rotateY( -40deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s16 { -webkit-transform: rotateY( -60deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s17 { -webkit-transform: rotateY( -90deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); } /* -80 -> -90 */
.ring2 > .s18 { -webkit-transform: rotateY( -100deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s19 { -webkit-transform: rotateY( -120deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s20 { -webkit-transform: rotateY( -140deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s21 { -webkit-transform: rotateY( -160deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s22 { -webkit-transform: rotateY( -180deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s23 { -webkit-transform: rotateY( -200deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s24 { -webkit-transform: rotateY( -220deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s25 { -webkit-transform: rotateY( -240deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s26 { -webkit-transform: rotateY( -270deg) translateZ(-420px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s27 { -webkit-transform: rotateY( -280deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s28 { -webkit-transform: rotateY( -300deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s29 { -webkit-transform: rotateY( -320deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s30 { -webkit-transform: rotateY( -340deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.slideIn {-webkit-animation-timing-function: ease ;-webkit-animation-duration: 1500ms;-webkit-animation-name: slidein; margin-right:0px;}
@-webkit-keyframes slidein {from { margin-top: 120px; opacity:0; } to { margin-top: 0px; opacity:1; } }
.slideFloor {-webkit-animation-timing-function: ease;-webkit-animation-duration: 1000ms;-webkit-animation-name: slidein; margin-left:0px;}
@-webkit-keyframes slideFloor {from { margin-top: 120px; opacity:0; } to { margin-top: 0px; opacity:1;} }
.blur, .blur > img {margin: 0; padding: 0; border: 0; }
.blur { position: relative;display: inline-block;font-size: 0; line-height: 0; }
.blur:after { position: absolute;left: 0; top: 0; right: 0; bottom: 0;
-webkit-box-shadow: inset 0px 0px 15px 15px #fff;
box-shadow: inset 0px 0px 15px 15px #fff;
content: " ";
}
<!--
#jquery-ui-slider-wrap {padding:0px;text-align: center; width: 38px;border: 0px;border-radius:20px; background-color: rgba(255, 255, 255, 0.15);opacity:0.4; }
#jquery-ui-slider-value {border:0; color: red !important; font-weight: bold; background-color: transparent;margin: 5px; width: 40px; text-align: center; }
#jquery-ui-slider {height: 150px; width:25px;background-color:rgba(255, 255, 255, 0.15); opacity:0.2;opacity:0.2;}
#jquery-ui-slider-wrap2 {padding:0px;text-align: center;width: 38px; border: 0px;border-radius:10px; background-color: rgba(255, 255, 255, 0.15); opacity:0.4; }
#jquery-ui-slider-value2{ border: 0; color: red !important; font-weight: bold; background-color: transparent;margin: 5px;width: 40px; text-align: center; }
#jquery-ui-slider2 { height: 150px; width:25px; background-color:rgba(255, 255, 255, 0.15); opacity:0.2;}
-->
img { background:none; }
</style>
<script type="text/javascript">
function setCss(currentWidth,startDeg, panoramaMode){ // 2012/11/26 add startDeg, panoramaMode
if ( navigator.userAgent.match( /iPhone/i ) || navigator.userAgent.match( /iPod/i ) ) {
alert(navigator.userAgent)
var el = document.getElementById("ctrl1");
el.style.position = 'absolute';
el.style.left = '60px';
el.style.width = '180px';
if(window.navigator.standalone){ el.style.top = '10px'; }
}
shape.style.top='25%';
floor.style.top='30%';
floor.style.left='-50%';
var tY = -1*(720-586)/2;
var tY = 0;
if (window.orientation == 90 || window.orientation == -90||currentWidth > 800){
ctrl2.style.top='60%';ctrl1.style.left='42%';
}
if ( panoramaMode === "3DWall"){ // 2012/11/26
showWall(-1200,startDeg -120); // 20 -> -110
}
$("#getComment").hide();
}
function showWall(x0,rY){ // 2012/11/26
for (var s = 1; s < 13 ; s++){
$("div#s"+ s ).css("top","20%");
tX = x0 + s*204;
$("div#s"+ s ).css("-webkit-transform","rotateY("+rY+"deg)"
+ "translateX("+tX+"px) "
);
}
//$("div#shape").css("-webkit-transform","translateX(500px)");
}
// $.browser.mobileSafari = /webkit.*mobile/i.test(navigator.userAgent)
// if ($.browser.mobileSafari) {
// $.getScript('/public/javascripts/jquery.ui.touch-punch.min.js');
// }
function ctrlToggle(){
$('#jquery-ui-slider-wrap').toggle();
$('#jquery-ui-slider-wrap2').toggle();
$('#ctrl2').toggle();
$('#ctrl1').toggle();
}
function ctrlToggle2(){
$('#map').toggle();
}
<!--
jQuery( function() {
jQuery( '#jquery-ui-slider' ) . slider( {
orientation: 'vertical', animate: 'slow', range: 'min', value: 70, min: -100, max: 300,
slide: function( event, ui ) {
jQuery( '#jquery-ui-slider-value' ) . val( ui.value );
var top = ui.value -100;
shape.style.top= top+ '%';
}
} );
jQuery( '#jquery-ui-slider-value' ) . val( jQuery( '#jquery-ui-slider' ) . slider( 'value' ) );
} );
jQuery( function() {
jQuery( '#jquery-ui-slider2' ) . slider( {
orientation: 'vertical', animate: 'slow', range: 'min', value: 70, min: -200, max: 300,
slide: function( event, ui ) {
jQuery( '#jquery-ui-slider-value2' ) . val( ui.value );
var top = ui.value -100; floor.style.top= top+ '%';
}
} );
jQuery( '#jquery-ui-slider-value2' ) . val( jQuery( '#jquery-ui-slider2' ) . slider( 'value' ) );
} );
jQuery( function() {
jQuery( '#jquery-ui-slider3' ).slider( {
animate:'slow', range: 'min', value: staticRotationY, min: -180, max: 360,
slide: function( event, ui ) {
staticRotationY = ui.value*Math.PI/180;
shape.style.webkitTransform = 'rotateY('+staticRotationY+'rad)';
}
});
} );
-->
function pop2(s,n,caption,aid,link,type,rotateY,translateZ,translateX){
// alert("curPop:"+ curPop+", staticRotationY"+ staticRotationY);
console.log("curPop2:"+ curPop+", staticRotationY"+ staticRotationY);
var x = translateX; var rotX = 0;
var y = staticRotationY + 100 ; var z = translateZ; // 55;
var el = document.getElementById(s);
d = rotateY;
if( curPop == s){
curPop = 0; c = 1.0;
document.all["floor_text"].innerHTML = "";
document.all["getComment"].innerHTML = "";
$("#getComment").hide("slow");
el.removeEventListener("gesturestart", gestureStart, false);
el.removeEventListener("gesturechange",gestureChange,false);
}else{
c= 1.5; curPop = s; z = z + 100
var zz = z + 100;
getComments(aid);
$("#getComment").show("slow");
document.all["floor_text"].innerHTML = '<a href="'+link+'">○</a>'+caption ;
document.getElementById(s).src=n;
el.addEventListener("gesturestart", gestureStart, false);
el.addEventListener("gesturechange",gestureChange,false);
}
el.style.webkitTransitionDuration = '800ms';
floor_text.style.webkitTransform ='rotateY('+ d +'deg) translateY(0px) translateZ('+zz+'px) ' ;
el.style.webkitTransform ='rotateY('+ d +'deg) translateX('+x+'px) translateZ('+z+'px) scale('+c+') ';
}
window.getComments = function(object_id) {
//10150370394856880
console.log("L882 facebook.js getComments object_id:" + object_id );
FB.api({
method: 'fql.query',
query: 'SELECT object_id, text FROM comment WHERE object_id="' + object_id +'"'
},
function(response){
var cTexts = "<a href=\"#\" onclick=\"$('#getComment').hide('slow');\")>X</a><br />";
for (var i=0, l=response.length; i<l; i++) {
var ul = document.getElementById('likes');
object_id = response[i].object_id ;
cTxt = response[i].text;
console.log("comment text:" + cTxt);
cTexts = cTexts + cTxt + "<hr />";
}
cTexts = cTexts + "<a href='https://www.facebook.com/photo.php?fbid="+object_id+"' target='_fb'>f</a>";
document.getElementById("getComment").innerHTML = cTexts;
var agent = navigator.userAgent;
if( agent.search(/iPad/) != -1 ){
}else{
// alert(cTexts);
}
});
};
function fbLogin(){
FB.login(function(response) {
if (response.authResponse) {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Good to see you, ' + response.name + '.');
});
} else {
console.log('User cancelled login or did not fully authorize.');
}
}, {scope: 'user_photos, friends_photos' });
}
</script>
</head>
<body onload="addAnimationHandlers('0',280,'stop','34.614275,135.734456','768',18)">
<!-- 151254974933608 231699360296504-->
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1&appId=231699360296504";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<br/ >
<br />
<div id="container">
<div id="stage">
<div id="shape" class="ring2 ">
<div id="shapeX" class="ring2 ">
<img class="subplane s1 slideIn" id="sub1" style="padding:0px;"/><img class="subplane s2 slideIn" id="sub2" style="padding:0px;"/>
<img class="subplane s3 slideIn" id="sub3" style="padding:0px;"/><img class="subplane s4 slideIn" id="sub4" style="padding:0px;"/>
<img class="subplane s5 slideIn" id="sub5" style="padding:0px;"/><img class="subplane s6 slideIn" id="sub6" style="padding:0px;"/>
<img class="subplane s7 slideIn" id="sub7" style="padding:0px;"/><img class="subplane s8 slideIn" id="sub8" style="padding:0px;"/>
<img class="subplane s9 slideIn" id="sub9" style="padding:0px;"/><img class="subplane s10 slideIn" id="sub10" style="padding:0px;"/>
<img class="subplane s11 slideIn" id="sub11" style="padding:0px;"/><img class="subplane s12 slideIn" id="sub12" style="padding:0px;"/>
<div class="plane s1 slideIn" id="s1" style="margin-left:-63px; width:408px;">
<a href='#' onclick="pop('1','https://lh5.googleusercontent.com/-EV_kOXJkQPM/ULyHmJNMBaI/AAAAAAAAEGY/nnSdFbXKDuc/s576/001East.png', '1/0','227','0','p','331','104','227','0','0')">
<img src="https://lh5.googleusercontent.com/-EV_kOXJkQPM/ULyHmJNMBaI/AAAAAAAAEGY/nnSdFbXKDuc/s576/001East.png" width="331" style="margin-left:5px; margin-top:78px; padding:0px;" id="i1"></a></div>
<div class="plane s4 slideIn" id="s4" style="margin-left:-203px; width:612px;">
<a href='#' onclick="pop('4','https://lh4.googleusercontent.com/-R95mT1X67Y8/ULyHlzdsqBI/AAAAAAAAEGQ/tULoUcyj3LA/s576/002South.png', '4/0','228','0','p','610','105','228','0','0')">
<img src="https://lh4.googleusercontent.com/-R95mT1X67Y8/ULyHlzdsqBI/AAAAAAAAEGQ/tULoUcyj3LA/s576/002South.png" width="610" style="margin-left:5px; margin-top:51px; padding:0px;" id="i4"></a>
</div>
<div class="plane s13 slideIn" id="s13" style="margin-left:-70px; width:432px;">
<a href='#' onclick="pop('13','https://lh3.googleusercontent.com/-RuCiwNDYKwI/UMA_BOCmsBI/AAAAAAAAEJU/xsPYV6sSx2s/s800/hiten16-20.png', '4/0','228','0','p','610','105','228','0','0')">
<img src="https://lh3.googleusercontent.com/-RuCiwNDYKwI/UMA_BOCmsBI/AAAAAAAAEJU/xsPYV6sSx2s/s800/hiten16-20.png" width="430" style="margin-left:-5px; margin-top:51px; padding:0px;" id="i13"></a>
</div>
<div class="plane s17 slideIn" id="s17" style="margin-left:-200px; width:732px;">
<a href='#' onclick="pop('17','https://lh3.googleusercontent.com/-xVL8T7l58hY/UMA--LP-UvI/AAAAAAAAEI4/u3LdoGJhDKg/s576/hiten1-6.png', '4/0','228','0','p','610','105','228','0','0')">
<img src="https://lh3.googleusercontent.com/-xVL8T7l58hY/UMA--LP-UvI/AAAAAAAAEI4/u3LdoGJhDKg/s576/hiten1-6.png" width="730" style="margin-left:-5px; margin-top:51px; padding:0px;" id="i17"></a>
</div>
<div class="plane s22 slideIn" id="s22" style="margin-left:-70px; width:432px;">
<a href='#' onclick="pop('22','https://lh4.googleusercontent.com/-_rbDT2UlOvk/UMA-_C8f42I/AAAAAAAAEJE/aFOgYC8KsYI/s800/hiten7-10.png', '4/0','228','0','p','610','105','228','0','0')">
<img src="https://lh4.googleusercontent.com/-_rbDT2UlOvk/UMA-_C8f42I/AAAAAAAAEJE/aFOgYC8KsYI/s800/hiten7-10.png" width="430" style="margin-left:-5px; margin-top:51px; padding:0px;" id="i22"></a>
</div>
<div class="plane s26 slideIn" id="s26" style="margin-left:-200px; width:732px;">
<a href='#' onclick="pop('26','https://lh6.googleusercontent.com/-xTohj7LG3tw/UMA_AIyVxZI/AAAAAAAAEJI/gHr60dMR064/s800/hiten10-15.png', '4/0','228','0','p','610','105','228','0','0')">
<img src="https://lh6.googleusercontent.com/-xTohj7LG3tw/UMA_AIyVxZI/AAAAAAAAEJI/gHr60dMR064/s800/hiten10-15.png" width="730" style="margin-left:-5px; margin-top:51px; padding:0px;" id="i26"></a>
</div>
<!-- s,n,caption,aid,link,type ,rotateY,translateZ,translateX-->
<a href"#" onclick="pop2('yakushinyorai','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWJhdv98opkzTwaiEJ2PQx1-6UTEsiOlE2fCQHNX6WGHPBIF99WTO4zmyaL__iB4KFJgS6BCX02bUO-AUiDl-kAvPn4wRdRHvwIiz7v0Qwt8ELlTFeAzoG9iGs21kkY95E8OUyHSYiYDHJ/s200/%25E6%25B3%2595%25E9%259A%2586%25E5%25AF%25BA%25E9%2587%2591%25E5%25A0%2582%25E8%2596%25AC%25E5%25B8%25AB%25E5%25A6%2582%25E6%259D%25A5%25E5%259D%2590%25E5%2583%258F.png',
'薬師如来',10151282369331880,'0','link',-270,55,160)">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWJhdv98opkzTwaiEJ2PQx1-6UTEsiOlE2fCQHNX6WGHPBIF99WTO4zmyaL__iB4KFJgS6BCX02bUO-AUiDl-kAvPn4wRdRHvwIiz7v0Qwt8ELlTFeAzoG9iGs21kkY95E8OUyHSYiYDHJ/s200/%25E6%25B3%2595%25E9%259A%2586%25E5%25AF%25BA%25E9%2587%2591%25E5%25A0%2582%25E8%2596%25AC%25E5%25B8%25AB%25E5%25A6%2582%25E6%259D%25A5%25E5%259D%2590%25E5%2583%258F.png" width="130"
style="position:absolute;margin-right:50px; margin-top:155px; padding:0px;
-webkit-transform: rotateY( -270deg) translateZ(55px) translateX(160px); opacity:0.8; background:none;
" id="yakushinyorai"></a>
<a href"#" onclick="pop2('amidanyorai','https://fbcdn-sphotos-a-a.akamaihd.net/hphotos-ak-ash4/228380_10151282365946880_565161174_n.jpg',
'阿弥陀如来',10151282365946880,'0','link',-270,65,-160)">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8xwEz9gH3ne-_hf1_ZlEwixIREOndQbk5SPWtbUf2E414YKn_3e3GRnxzR9nBCL35UVdkb7M51yOnlG4Ai-z35ILJHpWRG_AINr6gtvx6r3sjepBRQc1B4QrTG8aWMRB2SreTEGdCoFkt/s217/%25E6%25B3%2595%25E9%259A%2586%25E5%25AF%25BA%25E9%2587%2591%25E5%25A0%2582%25E9%2598%25BF%25E5%25BC%25A5%25E9%2599%2580%25E5%25A6%2582%25E6%259D%25A5%25E5%259D%2590%25E5%2583%258F.png" width="120"
style="position:absolute;margin-right:50px; margin-top:155px; padding:0px;
-webkit-transform: rotateY( -270deg) translateZ(65px) translateX(-160px); opacity:0.8;background:none;
" id="amidanyorai"></a>
<!-- 南 増長天 左前-->
<a href"#" onclick="alert('増長天');"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglNqxc0UlRLdoyiwz8MkU_G5fSvHH0h-hF5RnIj9zucheP5UgONlrE8AAaAc46DIwnVJY3UYneY1WhkLMi-7dqMVjnxxxbiphUce37fGag-Co15zCkQ6Ud3o_bq-XMh7ltPHPlqyMqb1su/s500/bukkyo-114-1-zouchou.png" width="110"
style="position:absolute;margin-right:50px; margin-top:200px; padding:0px;
-webkit-transform: rotateY( -270deg) translateZ(300px) translateX(-200px); opacity:0.8;background:none;
" alt="増長天"></a>
<!--西 広目天 左後-->
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglrhnot6KpikDtMJmq8oDqFTbhkkI2HgCheJV5WLL5Rp62p6Pe82e5fRe6KOgc1AGQEvJnkQmc5qNuDRFjS2nBu3yWwC9zKKuhrZj9vJnGZUwtZaJLdqh9mJH6AIMN7bwl1zzOr2VcBwYj/s500/bukkyo-114-1-koumoku.png" width="110"
style="position:absolute;margin-right:50px; margin-top:200px; padding:0px;
-webkit-transform: rotateY( -180deg) translateZ(-250px) translateX(170px); opacity:0.8;background:none;
" >
<!-- 東 持国天 右前-->
<img src="https://lh3.googleusercontent.com/-MLwNA6uRVh8/UL7EWPr4I3I/AAAAAAAAEII/HWLk665cNaU/s500/bukkyo-114-1-zikoku.png" width="110"
style="position:absolute;margin-right:50px; margin-top:200px; padding:0px;
-webkit-transform: rotateY( -270deg) translateZ(270px) translateX(195px); opacity:0.8;background:none;
" >
<!--多聞天像 北 右後-->
<a href"#" onclick="alert('多聞天像 北 ');">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU1IFFBfjvcmuLNPOUjJfHsQmvo5uMfZj2Mcv1KE7T6eWjTScczFIwGlZa4vyQ5gfUiuljuu8yZkdVjZJkn0Pm3cqXLtdxNWgptymZXLFPHCbg3xGOJ8vyJKWmLeX0BVUfPzHtsWKHgzY_/s500/bukkyo-114-1-tamon.png" width="110"
style="position:absolute;margin-right:50px; margin-top:200px; padding:0px;
-webkit-transform: rotateY( -180deg) translateZ(215px) translateX(180px) ;
opacity:0.8;background:none;" ></a>
<!-- 三尊像 -->
<img src="https://lh6.googleusercontent.com/-tltsLKnLsrE/UL2qcIBMoJI/AAAAAAAAEHM/xeomOuwH0Hw/s330/%25E6%25B3%2595%25E9%259A%2586%25E5%25AF%25BA%25E9%2587%2591%25E5%25A0%2582%25E9%2587%2588%25E8%25BF%25A6%25E4%25B8%2589%25E5%25B0%258A%25E5%2583%258F.png" width="210"
style="margin-left:5px; margin-top:100px; -webkit-transform: rotateY( -270deg) translateZ(0px); opacity:0.8;border:none; padding:none;background:rgba(0, 0, 0, 0.2);" >
<div class="plane s7 slideIn" id="s7" style="margin-left:-60px; width:408px;">
<a href='#' onclick="pop('7','https://lh5.googleusercontent.com/-oa39Bh3i67w/ULyHmAVE5sI/AAAAAAAAEGU/rWCjZDHNgj0/s576/003West.png', '7/0','229','0','p','325','106','229','0','0')">
<img src="https://lh5.googleusercontent.com/-oa39Bh3i67w/ULyHmAVE5sI/AAAAAAAAEGU/rWCjZDHNgj0/s576/003West.png" width="325" style="margin-left:5px; margin-top:78px; padding:0px;" id="i7"></a></div>
<div class="plane s10 slideIn" id="s10" style="margin-left:-153px; width:612px;">
<a href='#' onclick="pop('10','https://lh3.googleusercontent.com/-0A935rwAkBs/ULyOgIbGtqI/AAAAAAAAEG4/nxk0wMMdeow/s640/6wright.jpg', '10/0','230','0','p','511','107','230','0','0')">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZLSs2JkIcj_BMrcE12wCb-sdvyzZVo175wBn0LldmBuLlWBcRnk068I3oUjAcpC75d8sLttUZ7Cb2PSJ-XJTxwayMt6qEAPWSOYRcadTHh7IXVOke0dK8R4rT-9-UVjQTpCKQtGtbfGDi/s576/004North.png" width="511" style="margin-left:5px; margin-top:68px; padding:0px;" id="i10"></a></div>
<div id="floor" class="slideFloor" align="center">
<!-- map -->
<div id="map" style="width:500px; height:500px ;"></div>
</div>
<span id="floor_text"></span>
</div>
</div>
<!-- <span id="floor_text"></span>-->
</div>
</div>
<div class="controls" id="ctrl1" style="position:absolute;top:2%; left:38%;width:180px; height:32px; ">
<button onmouseover="toggleShape1(100)" onclick="toggleShape1(200)" class="ctlBtn">-Zoom</button>
<button onmouseover="toggleShape1(-100)" onclick="toggleShape1(-200)" class="ctlBtn">Zoom+</button>
</div>
<div class="controls" id="ctrl2" style="position:absolute;width:282px;">
<table><tr><td style="height:2px">
<!-- west 左画面--><a href="#" onclick="runAction('changeCurrentTitle','0');">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSLuj4s0z2FJRXkAlK4ivFl9uDiVwCajiX4G6Uy2cvO2yB5B5kLIZlInUUQFBjkNYHfXGH4GDF6gP8RNZPFdKknQR-zZyF-Cb-oWkNqofsD8MJ6NnhXLO6tovfOdkFuT_WebwqHKFEcSUv/s1600/gray_ball.png" style="position:absolute;top:-20%;margin-left:-100px; opacity:0.5; padding:0px;width:70px;height:40px;
-webkit-transform:rotateX(10deg) rotateY(50deg);background:none">
</a>
<a href="#" onclick="runAction('fbAlbum','3124038432335505519,https://picasaweb.google.com/data/feed/base/user/102448397019191874652/albumid/5817631081094332753?alt=rss&kind=photo&authkey=Gv1sRgCISs9MLY7OzZHQ&hl=ja,prev,0');">
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSLuj4s0z2FJRXkAlK4ivFl9uDiVwCajiX4G6Uy2cvO2yB5B5kLIZlInUUQFBjkNYHfXGH4GDF6gP8RNZPFdKknQR-zZyF-Cb-oWkNqofsD8MJ6NnhXLO6tovfOdkFuT_WebwqHKFEcSUv/s1600/gray_ball.png'
style="-webkit-transform:rotateX(10deg) rotateY(45deg);height:40px; width:48px;opacity:0.5;margin-left:-15px;margin-top:-8px;background:none"/></a>
</td><td>
<button onclick="autoRotate('right')" class="ctlBtn">
< </button> <button onclick="autoRotate('stop');" class="ctlBtn2">■</button>
<button onclick="autoRotate('left')" class="ctlBtn"> > </button>
</td><td>
<a href="#" onclick="runAction('fbAlbum','3124038432335505519,https://picasaweb.google.com/data/feed/base/user/102448397019191874652/albumid/5817631081094332753?alt=rss&kind=photo&authkey=Gv1sRgCISs9MLY7OzZHQ&hl=ja,next,0');">
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSLuj4s0z2FJRXkAlK4ivFl9uDiVwCajiX4G6Uy2cvO2yB5B5kLIZlInUUQFBjkNYHfXGH4GDF6gP8RNZPFdKknQR-zZyF-Cb-oWkNqofsD8MJ6NnhXLO6tovfOdkFuT_WebwqHKFEcSUv/s1600/gray_ball.png'
style="-webkit-transform:rotateX(10deg) rotateY(-45deg);height:40px; width:48px;opacity:0.5;margin-right:-20px;margin-top:-8px;background:none"/></a>
<!--<button onclick="toggleShape1(400)">-Zoom</button> <button onclick="toggleShape1(-400)">Zoom+</button>-->
</td></tr>
</table>
<!--east 右画面--><a href="#" onclick="runAction('changeCurrentTitle','0');">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRUPoV8HgDosuP_l5BqIkXQNdoa7GYp27kpfCqh3NTcxvfh3yrF1AIfz5NUH7j_tv0UizLv1MJNDfkIXbV44181el-z_TW8oykABWSoUnw2S_aBylT1NZhtb57UCyNHy56b2vM8LImcGNT/s1600/gray_ball2.png" style="position:absolute;top:-20%; right:-28%;opacity:0.5; margin-bottom:3px; width:70px;height:40px;
-webkit-transform:rotateX(10deg) rotateY(-50deg); background:none" />
</a>
<!-- slider -->
<div id="jquery-ui-slider3"></div>
</div>
<input id="_type" type="hidden" value="000" />
<!-- slider -->
<div id="jquery-ui-slider-wrap" style="position:absolute; top:80px;left:-15px;">
<!--<p style="color:red">plane</p>-->
<input type="text" id="jquery-ui-slider-value" /><div id="jquery-ui-slider"></div>
</div>
<div id="jquery-ui-slider-wrap2" style="position:absolute; top:465px; left:-15px;">
<!--<pstyle="color:red">floor</p>-->
<input type="text" id="jquery-ui-slider-value2" /> <div id="jquery-ui-slider2"></div>
</div>
<!-- hideControl -->
<table><tr><td>
<a href="#" onClick="ctrlToggle();">
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRUPoV8HgDosuP_l5BqIkXQNdoa7GYp27kpfCqh3NTcxvfh3yrF1AIfz5NUH7j_tv0UizLv1MJNDfkIXbV44181el-z_TW8oykABWSoUnw2S_aBylT1NZhtb57UCyNHy56b2vM8LImcGNT/s1600/gray_ball2.png' style='opacity:0.3;width:40px;height:40px;background:none'/>
</a></td><td><br /><br />
<a href="#" onClick="ctrlToggle2();">
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRUPoV8HgDosuP_l5BqIkXQNdoa7GYp27kpfCqh3NTcxvfh3yrF1AIfz5NUH7j_tv0UizLv1MJNDfkIXbV44181el-z_TW8oykABWSoUnw2S_aBylT1NZhtb57UCyNHy56b2vM8LImcGNT/s1600/gray_ball2.png' style='opacity:0.3;width:40px;height:40px;background:none'/>
</a></td></tr></table>
<div id="floorMovie" style="position:absolute; bottom:-3%;right:0%;">
(<a href="#" onClick="closeMovie()";>X</a>)<br />
<iframe width="180" height="120" src="http://www.youtube.com/embed/bnRkjBhJ0lg?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
<div style="font-size:15px">
<p />
<a href="#" onclick="fbLogin();">fbLogin</a><p />
謎の多い法隆寺<p />
「隠された十字架 法隆寺編」の梅原猛氏は法隆寺の「資財帳」を<br />
読んでいて不自然は寄付をみつけたのがかの怨霊説のきっかけだった。<p />
アルカポネが脱税で逮捕されたように、お金のやりとりから隠し事が<br />
露見する。財務省が税務署を手放さないわけでもある。<p />
<p />
</div>
<div id="getComment"
style="font-size:16px;position:absolute; top:50%; width:480px; padding:30px;height:480px;overflow:scroll;
/* color: #fff; background-color:black; */ background-color:rgba(0,0,0,0.8);
">
</div>
</body>
</html>kwin786http://www.blogger.com/profile/11636870499038520354noreply@blogger.com0tag:blogger.com,1999:blog-4631337081774196669.post-23808066811010978412012-10-21T21:47:00.004+09:002012-10-21T22:09:57.354+09:00ロートレック<!--<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">-->
<html lang="en">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0, user-scalable=YES" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<style type="text/css" media="screen">
body { background-color: black; color: white; font-family: 'Lucida Grande', Verdana, Arial; font-size: 12px;
background-image: -webkit-gradient(radial,50% 500,1,50% 500,400, from(rgba(255, 255, 255, 0.3)),to(rgba(255, 255, 255, 0)));
background-repeat: no-repeat; }
#container { width: 100%; height: 850px;
-webkit-perspective: 800; /* For compatibility with iPhone 3.0, we leave off the units here */
-webkit-perspective-origin: 50% 225px;
}
/* 0 -> -120 -100 -> -50 2012/02/07 */
#floor { position:absolute;top:-10%; left:-50% ; margin-top:-120px; margin-left:-50px;
-webkit-mask-image:-webkit-gradient(radial, center center, 0, center center, 350,from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
-webkit-transform: rotateX(90deg) rotateY(0deg) rotateZ(90deg) translateZ(-210px) translateY(10px);
}
#floorBallLeft { position:absolute;top:-10%; left:10% ; margin-top:0px; margin-left:-90px; height:50px; opacity:0.5;
-webkit-transform: rotateX(15deg) rotateY(45deg) rotateZ(0deg) translateZ(0px) translateY(0px); }
#floorBallRight { position:absolute;top:-10%; right:15% ; margin-top:0px; margin-right:-90px; height:50px; width:45px;opacity:0.5;
-webkit-transform: rotateX(10deg) rotateY(-45deg) rotateZ(0deg) translateZ(0px) translateY(0px); }
#floorBallHome { position:absolute;top:20%; left:35% ; margin-top:60px; margin-left:0px; height:35px; width:75px; opacity:0.3;
-webkit-transform: rotateX(15deg) rotateY(0deg) rotateZ(0deg) translateZ(0px) translateY(0px); }
/* #floorC { position:absolute;top:95%; left:50% ;-webkit-transform:scale(3);}
#floorR { position:absolute;top:90%; right:15% ; margin-top:0px; margin-right:0px; -webkit-transform:scale(3);}
#floorL { position:absolute;top:90%; left: 15% ; margin-top:0px; margin-left:0px ; -webkit-transform:scale(3);}*/
a:link { text-decoration: none; color:#DF1FBB; }
a:active { text-decoration: none; color:#DF1FBB; }
a:visited { text-decoration: none; color:#DF1FBB; } /* #555555 */
a:hover { text-decoration: none; color:#DF1FBB; }
li { display:inline-block; }
#floor_text{ position: absolute;
top:80%; left:-80%; height: 800px; width: 420px;
border: 0px solid white;
-webkit-box-sizing: border-box; text-align: left; font-family: Times, serif;
font-size: 20pt; font-color: white; /*font-size: 24pt; color: white; */
}
#stage { width: 100%; height: 100%; -webkit-transition: -webkit-transform 2s; -webkit-transform-style: preserve-3d; }
#shape { position: relative; top: 50px; margin: 0 auto; height: 400px; width: 204px; -webkit-transform-style: preserve-3d; }
#shapeX { margin: 0 auto; height: 200px; width: 200px; -webkit-transform-style: preserve-3d; }
.plane { position: absolute; top:0%; /*top:-150%; */
height: 400px; width: 204px; border: 0px solid white;
text-align: center; font-family: Times, serif; font-size: 124pt; color: black;
background-image: -webkit-gradient(linear, left bottom, right top,from(rgba(0,0,0,0)), to(rgba(0,0,0,1.0)));
background-repeat: no-repeat;
background-color: rgba( 0, 0, 0, 0.4); /* 0.6 */
-webkit-box-sizing: border-box;
-webkit-transition: -webkit-transform 2s, opacity 2s; -webkit-backface-visibility: hidden; /* hidden */
}
.subplane {position: absolute; width:204px;top:-335px; border: 0px; padding:0px; opacity:0.5;
-webkit-transition: -webkit-transform 2s,opacity 2s;-webkit-backface-visibility:visible;}
#shape.backfaces .plane { -webkit-backface-visibility: visible; }
@-webkit-keyframes spin { from { -webkit-transform: rotateY(0); } to { -webkit-transform: rotateY(-360deg); } }
@-webkit-keyframes spinR{ from { -webkit-transform: rotateY(0); } to { -webkit-transform: rotateY( 360deg); } }
@-webkit-keyframes spin0{ }
/* 上部の説明文の書式設定 背景は灰色で角を丸める .controls {width: 70%; height:10%; margin: 0 auto; padding: 5px 20px; */
.controls { opacity:0.6; /* width: 80%; height:40%; */
position:absolute;top:80%; left:34%; height:36px; /* bottom:1% */
margin: 0 auto; padding: 5px 10px; background-color: rgba(255, 255, 255, 0.15);
-webkit-border-radius: 48px; }
.ctlBtn { font-size:10pt; opacity:0.8; margin-bottom:7px;}
.controls > div { margin: 10px; }
/* ---------- ring2 styles ------------- */
.ring2 > .s1 { -webkit-transform: rotateY( 0deg) translateY( 0px) translateZ(-380px); }
.ring2 > .s2 { -webkit-transform: rotateY( -30deg) translateY( 0px) translateZ(-380px); }
.ring2 > .s3 { -webkit-transform: rotateY( -60deg) translateY( 0px) translateZ(-380px); }
.ring2 > .s4 { -webkit-transform: rotateY( -90deg) translateZ(-380px); }
.ring2 > .s5 { -webkit-transform: rotateY( -120deg) translateZ(-380px); }
.ring2 > .s6 { -webkit-transform: rotateY( -150deg) translateZ(-380px); }
.ring2 > .s7 { -webkit-transform: rotateY( -180deg) translateZ(-380px); }
.ring2 > .s8 { -webkit-transform: rotateY( -210deg) translateZ(-380px); }
.ring2 > .s9 { -webkit-transform: rotateY( 120deg) translateZ(-380px); }
.ring2 > .s10 { -webkit-transform: rotateY( 90deg) translateZ(-380px); }
.ring2 > .s11 { -webkit-transform: rotateY( -300deg) translateZ(-380px); }
.ring2 > .s12 { -webkit-transform: rotateY( -330deg) translateZ(-380px); }
.ring2 > .s13 { -webkit-transform: translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s14 { -webkit-transform: rotateY( -20deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s15 { -webkit-transform: rotateY( -40deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s16 { -webkit-transform: rotateY( -60deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s17 { -webkit-transform: rotateY( -80deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s18 { -webkit-transform: rotateY( -100deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s19 { -webkit-transform: rotateY( -120deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s20 { -webkit-transform: rotateY( -140deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s21 { -webkit-transform: rotateY( -160deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s22 { -webkit-transform: rotateY( -180deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s23 { -webkit-transform: rotateY( -200deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s24 { -webkit-transform: rotateY( -220deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s25 { -webkit-transform: rotateY( -240deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s26 { -webkit-transform: rotateY( -260deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s27 { -webkit-transform: rotateY( -280deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s28 { -webkit-transform: rotateY( -300deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s29 { -webkit-transform: rotateY( -320deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s30 { -webkit-transform: rotateY( -340deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.slideIn {-webkit-animation-timing-function: ease ;-webkit-animation-duration: 1500ms;-webkit-animation-name: slidein; margin-right:0px;}
@-webkit-keyframes slidein {from { margin-top: 120px; opacity:0; } to { margin-top: 0px; opacity:1; } }
.slideFloor {-webkit-animation-timing-function: ease;-webkit-animation-duration: 1000ms;-webkit-animation-name: slidein; margin-left:0px;}
@-webkit-keyframes slideFloor {from { margin-top: 120px; opacity:0; } to { margin-top: 0px; opacity:1;} }
.blur, .blur > img {margin: 0; padding: 0; border: 0; }
.blur { position: relative;display: inline-block;font-size: 0; line-height: 0; }
.blur:after { position: absolute;left: 0; top: 0; right: 0; bottom: 0;
-webkit-box-shadow: inset 0px 0px 15px 15px #fff;
box-shadow: inset 0px 0px 15px 15px #fff;
content: " ";
}
<!--
#jquery-ui-slider-wrap {padding:0px;text-align: center; width: 38px;border: 0px;border-radius:20px; background-color: rgba(255, 255, 255, 0.15);opacity:0.4; }
#jquery-ui-slider-value {border:0; color: red !important; font-weight: bold; background-color: transparent;margin: 5px; width: 40px; text-align: center; }
#jquery-ui-slider {height: 150px; width:25px;background-color:rgba(255, 255, 255, 0.15); opacity:0.2;opacity:0.2;}
#jquery-ui-slider-wrap2 {padding:0px;text-align: center;width: 38px; border: 0px;border-radius:10px; background-color: rgba(255, 255, 255, 0.15); opacity:0.4; }
#jquery-ui-slider-value2{ border: 0; color: red !important; font-weight: bold; background-color: transparent;margin: 5px;width: 40px; text-align: center; }
#jquery-ui-slider2 { height: 150px; width:25px; background-color:rgba(255, 255, 255, 0.15); opacity:0.2;}
-->
</style>
<link rel="stylesheet" href="file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/6.0/Applications/265AB680-9D44-48B1-A4F3-D59E7649A88B/KwinTabBar2.app/alexframework/src/javascript/jquery-ui-1.7.1.custom.css" type="text/css">
<script type="text/javascript" src="file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/6.0/Applications/265AB680-9D44-48B1-A4F3-D59E7649A88B/KwinTabBar2.app/alexframework/src/javascript/gear5.js"></script>
<script type="text/javascript" src="file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/6.0/Applications/265AB680-9D44-48B1-A4F3-D59E7649A88B/KwinTabBar2.app/alexframework/src/javascript/jquery.min.js"></script>
<script type="text/javascript" src="file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/6.0/Applications/265AB680-9D44-48B1-A4F3-D59E7649A88B/KwinTabBar2.app/alexframework/src/javascript/alex.core.js"></script>
<script type="text/javascript" src="file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/6.0/Applications/265AB680-9D44-48B1-A4F3-D59E7649A88B/KwinTabBar2.app/alexframework/src/javascript/alex.record.js"></script>
<script type="text/javascript" src="file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/6.0/Applications/265AB680-9D44-48B1-A4F3-D59E7649A88B/KwinTabBar2.app/alexframework/src/javascript/albums.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript" ></script>
<!--<script src="http://code.jquery.com/jquery.min.js"></script>-->
<!--<script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script>-->
<!--<script type="text/javascript" src="file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/6.0/Applications/265AB680-9D44-48B1-A4F3-D59E7649A88B/KwinTabBar2.app/alexframework/src/javascript/facebook.js"></script>-->
<script type="text/javascript" src="file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/6.0/Applications/265AB680-9D44-48B1-A4F3-D59E7649A88B/KwinTabBar2.app/alexframework/src/javascript/jquery.ui.min.js"></script>
<script type="text/javascript" src="file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/6.0/Applications/265AB680-9D44-48B1-A4F3-D59E7649A88B/KwinTabBar2.app/alexframework/src/javascript/jquery.ui.touch-punch.min.js"></script>
<script type="text/javascript">
function setCss(currentWidth){
if ( navigator.userAgent.match( /iPhone/i ) || navigator.userAgent.match( /iPod/i ) ) {
alert(navigator.userAgent)
var el = document.getElementById("ctrl1");
el.style.position = 'absolute';
el.style.left = '60px';
el.style.width = '180px';
if(window.navigator.standalone){ el.style.top = '10px'; }
}
shape.style.top='25%';
floor.style.top='30%';
floor.style.left='-50%';
var tY = -1*(720-586)/2;
var tY = 0;
if (window.orientation == 90 || window.orientation == -90||currentWidth > 800){
ctrl2.style.top='60%';ctrl1.style.left='42%';
}
}
// $.browser.mobileSafari = /webkit.*mobile/i.test(navigator.userAgent)
// if ($.browser.mobileSafari) {
// $.getScript('/public/javascripts/jquery.ui.touch-punch.min.js');
// }
function ctrlToggle(){
$('#jquery-ui-slider-wrap').toggle();$('#jquery-ui-slider-wrap2').toggle();$('#ctrl2').toggle();$('#ctrl1').toggle();
}
<!--
jQuery( function() {
jQuery( '#jquery-ui-slider' ) . slider( {
orientation: 'vertical', animate: 'slow', range: 'min', value: 70, min: -100, max: 300,
slide: function( event, ui ) {
jQuery( '#jquery-ui-slider-value' ) . val( ui.value );
var top = ui.value -100;
shape.style.top= top+ '%';
}
} );
jQuery( '#jquery-ui-slider-value' ) . val( jQuery( '#jquery-ui-slider' ) . slider( 'value' ) );
} );
jQuery( function() {
jQuery( '#jquery-ui-slider2' ) . slider( {
orientation: 'vertical', animate: 'slow', range: 'min', value: 70, min: -200, max: 300,
slide: function( event, ui ) {
jQuery( '#jquery-ui-slider-value2' ) . val( ui.value );
var top = ui.value -100; floor.style.top= top+ '%';
}
} );
jQuery( '#jquery-ui-slider-value2' ) . val( jQuery( '#jquery-ui-slider2' ) . slider( 'value' ) );
} );
jQuery( function() {
jQuery( '#jquery-ui-slider3' ).slider( {
animate:'slow', range: 'min', value: staticRotationY, min: -180, max: 360,
slide: function( event, ui ) {
staticRotationY = ui.value*Math.PI/180;
shape.style.webkitTransform = 'rotateY('+staticRotationY+'rad)';
}
});
} );
-->
</script>
</head>
<body onload="addAnimationHandlers('/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/6.0/Applications/265AB680-9D44-48B1-A4F3-D59E7649A88B/KwinTabBar2.app',90,'stop','0','768')">
<br/ >
<br />
<div id="getComment"></div>
<div id="container">
<div id="stage">
<div id="shape" class="ring2 ">
<div id="shapeX" class="ring2 ">
<img class="subplane s1 slideIn" id="sub1" style="padding:0px;"/><img class="subplane s2 slideIn" id="sub2" style="padding:0px;"/>
<img class="subplane s3 slideIn" id="sub3" style="padding:0px;"/><img class="subplane s4 slideIn" id="sub4" style="padding:0px;"/>
<img class="subplane s5 slideIn" id="sub5" style="padding:0px;"/><img class="subplane s6 slideIn" id="sub6" style="padding:0px;"/>
<img class="subplane s7 slideIn" id="sub7" style="padding:0px;"/><img class="subplane s8 slideIn" id="sub8" style="padding:0px;"/>
<img class="subplane s9 slideIn" id="sub9" style="padding:0px;"/><img class="subplane s10 slideIn" id="sub10" style="padding:0px;"/>
<img class="subplane s11 slideIn" id="sub11" style="padding:0px;"/><img class="subplane s12 slideIn" id="sub12" style="padding:0px;"/>
<div class="plane s1 slideIn" id="s1" style="margin-left:-72px; width:408px;">
<a href='#' onclick="pop('1','https://lh3.googleusercontent.com/-yNiJQ7jFcbM/STt2I9lYEwI/AAAAAAAADdw/J_hvRIE6mp8/IMG_2614.jpg', '1/(null)','https://lh3.googleusercontent.com/-yNiJQ7jFcbM/STt2I9lYEwI/AAAAAAAADdw/J_hvRIE6mp8/IMG_2614.jpg','https://picasaweb.google.com/102448397019191874652/MuseeOrsay_2?authkey=Gv1sRgCInpyff9wv2XugE#5276941284737028866','p','349','39','https://lh3.googleusercontent.com/-yNiJQ7jFcbM/STt2I9lYEwI/AAAAAAAADdw/J_hvRIE6mp8/IMG_2614.jpg','0','0')">
<img src="https://lh3.googleusercontent.com/-yNiJQ7jFcbM/STt2I9lYEwI/AAAAAAAADdw/J_hvRIE6mp8/IMG_2614.jpg" width="349" style="margin-left:5px; margin-top:43px; padding:0px;" id="i1"></a></div>
<div class="plane s3 slideIn" id="s3" >
<a href='#' onclick="pop('3','https://lh3.googleusercontent.com/-jp3dNse0yjA/STt2G4As9UI/AAAAAAAADdY/h_YwPxsO8x4/IMG_2623.jpg','3/(null)','https://lh3.googleusercontent.com/-jp3dNse0yjA/STt2G4As9UI/AAAAAAAADdY/h_YwPxsO8x4/IMG_2623.jpg','https://picasaweb.google.com/102448397019191874652/MuseeOrsay_2?authkey=Gv1sRgCInpyff9wv2XugE#5276941248881292610','p','160','35','https://lh3.googleusercontent.com/-jp3dNse0yjA/STt2G4As9UI/AAAAAAAADdY/h_YwPxsO8x4/IMG_2623.jpg','0','0')">
<img src="https://lh3.googleusercontent.com/-jp3dNse0yjA/STt2G4As9UI/AAAAAAAADdY/h_YwPxsO8x4/IMG_2623.jpg" width="160" style="margin-left:0px; margin-top:100px; padding:0px;" id="i3"></a></div>
<div class="plane s4 slideIn" id="s4" >
<a href='#' onclick="pop('4','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDw6WgS8u7H3y-LP04w2E_u8nL0BtrPPFI0ReSqyFGGS_awsngbzAM79HyLE4zCyKpzLjkosdM7rHFBsYTFvEXLPTO2_w9gBkKvPDgkSEgoZpCyhbO83bYA5Q3gevRQ6P14K3EBtQKXtQN/','4/(null)','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDw6WgS8u7H3y-LP04w2E_u8nL0BtrPPFI0ReSqyFGGS_awsngbzAM79HyLE4zCyKpzLjkosdM7rHFBsYTFvEXLPTO2_w9gBkKvPDgkSEgoZpCyhbO83bYA5Q3gevRQ6P14K3EBtQKXtQN/','https://picasaweb.google.com/102448397019191874652/MuseeOrsay_2?authkey=Gv1sRgCInpyff9wv2XugE#5276941412750864610','p','160','36','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDw6WgS8u7H3y-LP04w2E_u8nL0BtrPPFI0ReSqyFGGS_awsngbzAM79HyLE4zCyKpzLjkosdM7rHFBsYTFvEXLPTO2_w9gBkKvPDgkSEgoZpCyhbO83bYA5Q3gevRQ6P14K3EBtQKXtQN/','0','0')">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDw6WgS8u7H3y-LP04w2E_u8nL0BtrPPFI0ReSqyFGGS_awsngbzAM79HyLE4zCyKpzLjkosdM7rHFBsYTFvEXLPTO2_w9gBkKvPDgkSEgoZpCyhbO83bYA5Q3gevRQ6P14K3EBtQKXtQN/" width="160" style="margin-left:0px; margin-top:100px; padding:0px;" id="i4"></a></div>
<div class="plane s5 slideIn" id="s5" >
<a href='#' onclick="pop('5','https://lh4.googleusercontent.com/-DhXx4xqITb4/STt2RdPzROI/AAAAAAAADdg/z70jVDzU8XQ/IMG_2612.JPG','5/(null)','https://lh4.googleusercontent.com/-DhXx4xqITb4/STt2RdPzROI/AAAAAAAADdg/z70jVDzU8XQ/IMG_2612.JPG','https://picasaweb.google.com/102448397019191874652/MuseeOrsay_2?authkey=Gv1sRgCInpyff9wv2XugE#5276941430675424482','p','160','37','https://lh4.googleusercontent.com/-DhXx4xqITb4/STt2RdPzROI/AAAAAAAADdg/z70jVDzU8XQ/IMG_2612.JPG','0','0')">
<img src="https://lh4.googleusercontent.com/-DhXx4xqITb4/STt2RdPzROI/AAAAAAAADdg/z70jVDzU8XQ/IMG_2612.JPG" width="160" style="margin-left:0px; margin-top:100px; padding:0px;" id="i5"></a></div>
<div class="plane s6 slideIn" id="s6" >
<a href='#' onclick="pop('6','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihXslWF1nZfkjV4vR39lmmKpgvYAzHG7uPnhlrgxJB_-NA3bKsI-hZ9T5k-5U7LlPuOZm-_usq_1287onrwlC46k77pJ4jMzb_SO0978bFUC3GhQrXdWpX01JBz45qP6MTE0vMjxSaTjNM/','6/(null)','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihXslWF1nZfkjV4vR39lmmKpgvYAzHG7uPnhlrgxJB_-NA3bKsI-hZ9T5k-5U7LlPuOZm-_usq_1287onrwlC46k77pJ4jMzb_SO0978bFUC3GhQrXdWpX01JBz45qP6MTE0vMjxSaTjNM/','https://picasaweb.google.com/102448397019191874652/MuseeOrsay_2?authkey=Gv1sRgCInpyff9wv2XugE#5276941420105487058','p','160','38','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihXslWF1nZfkjV4vR39lmmKpgvYAzHG7uPnhlrgxJB_-NA3bKsI-hZ9T5k-5U7LlPuOZm-_usq_1287onrwlC46k77pJ4jMzb_SO0978bFUC3GhQrXdWpX01JBz45qP6MTE0vMjxSaTjNM/','0','0')">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihXslWF1nZfkjV4vR39lmmKpgvYAzHG7uPnhlrgxJB_-NA3bKsI-hZ9T5k-5U7LlPuOZm-_usq_1287onrwlC46k77pJ4jMzb_SO0978bFUC3GhQrXdWpX01JBz45qP6MTE0vMjxSaTjNM/" width="160" style="margin-left:0px; margin-top:100px; padding:0px;" id="i6"></a></div>
<div class="plane s7 slideIn" id="s7" >
<a href='#' onclick="pop('7','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhimCxm8iZH4ee0zE_HAZmmXQLTzj8uUTArnyh-e8FyLMkcxi0HdbHr4Mm6qUuC7Tp8K-rAF4vt_n3BcsSc_GHi_wq8lWRKAS1X9h-z4DblBBNAVeauXPHzXrCy4BfxFzdwQ_odiKXcuDzK/','7/(null)','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhimCxm8iZH4ee0zE_HAZmmXQLTzj8uUTArnyh-e8FyLMkcxi0HdbHr4Mm6qUuC7Tp8K-rAF4vt_n3BcsSc_GHi_wq8lWRKAS1X9h-z4DblBBNAVeauXPHzXrCy4BfxFzdwQ_odiKXcuDzK/','https://picasaweb.google.com/102448397019191874652/MuseeOrsay_2?authkey=Gv1sRgCInpyff9wv2XugE#5276941271292264354','p','160','40','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhimCxm8iZH4ee0zE_HAZmmXQLTzj8uUTArnyh-e8FyLMkcxi0HdbHr4Mm6qUuC7Tp8K-rAF4vt_n3BcsSc_GHi_wq8lWRKAS1X9h-z4DblBBNAVeauXPHzXrCy4BfxFzdwQ_odiKXcuDzK/','0','0')">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhimCxm8iZH4ee0zE_HAZmmXQLTzj8uUTArnyh-e8FyLMkcxi0HdbHr4Mm6qUuC7Tp8K-rAF4vt_n3BcsSc_GHi_wq8lWRKAS1X9h-z4DblBBNAVeauXPHzXrCy4BfxFzdwQ_odiKXcuDzK/" width="160" style="margin-left:0px; margin-top:127px; padding:0px;" id="i7"></a></div>
<div id="floor" class="slideFloor" align="center">
<!--<img src='@@@' id="floorImg" width="500" height="500">-->
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhM6ZluxxYpFSMKKgnZtZCsiwOrqyd2qh0CMC0a1i6jQcor1T_ZjZ6aSlYW9ytWQupxeyeiVIKfGrZ9us88SZpCIEG8XnDr1bBmmodaHzTVK188uX5qM195AtWv6cNZ8KlCD6RdJp9pw1gH/' id="floorImg" width="500" height="500">
</div>
<span id="floor_text"></span>
</div>
</div>
<!-- <span id="floor_text"></span>-->
</div>
</div>
<div class="controls" id="ctrl1" style="position:absolute;top:2%; left:38%;width:180px; height:32px; ">
<button onmouseover="toggleShape1(100)" onclick="toggleShape1(200)" class="ctlBtn">-Zoom</button>
<button onmouseover="toggleShape1(-100)" onclick="toggleShape1(-200)" class="ctlBtn">Zoom+</button>
</div>
<div class="controls" id="ctrl2" style="position:absolute;width:282px"><!-- style="position:absolute; top:30px;"-->
<table><tr><td style="height:32px">
<!-- west 左画面--><a href="#" onclick="runAction('changeCurrentTitle','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrY5PJDA-pVXDAjVfkT-4vufV-OqK6wFjIuPeZ64DDZ-MyPgJNe4l9olPpX4HulWz9XtVjIw-5n42AKoa49QVuw-QL_GWggFVbSLsWzr__dyK1Q71cq7-LNfNYl09VbHXNKT1FhAIR68l1/');">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrY5PJDA-pVXDAjVfkT-4vufV-OqK6wFjIuPeZ64DDZ-MyPgJNe4l9olPpX4HulWz9XtVjIw-5n42AKoa49QVuw-QL_GWggFVbSLsWzr__dyK1Q71cq7-LNfNYl09VbHXNKT1FhAIR68l1/" style="position:absolute;top:-20%;margin-left:-100px; opacity:0.5; padding:0px;width:70px;height:40px;
-webkit-transform:rotateX(10deg) rotateY(50deg);">
</a>
<a href="#" onclick="runAction('fbAlbum','3124038432335525997,https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhM6ZluxxYpFSMKKgnZtZCsiwOrqyd2qh0CMC0a1i6jQcor1T_ZjZ6aSlYW9ytWQupxeyeiVIKfGrZ9us88SZpCIEG8XnDr1bBmmodaHzTVK188uX5qM195AtWv6cNZ8KlCD6RdJp9pw1gH/,prev,0');">
<img src='file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/6.0/Applications/265AB680-9D44-48B1-A4F3-D59E7649A88B/KwinTabBar2.app/gray_ball.png'
style="-webkit-transform:rotateX(10deg) rotateY(45deg);height:40px; width:48px;opacity:0.5;margin-left:-15px;margin-bottom:3px"/></a>
</td><td>
<button onclick="autoRotate('left')" class="ctlBtn">
< </button> <button onclick="autoRotate('stop');" class="ctlBtn">■</button>
<button onclick="autoRotate('right')" class="ctlBtn"> > </button>
</td><td>
<a href="#" onclick="runAction('fbAlbum','3124038432335525997,https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhM6ZluxxYpFSMKKgnZtZCsiwOrqyd2qh0CMC0a1i6jQcor1T_ZjZ6aSlYW9ytWQupxeyeiVIKfGrZ9us88SZpCIEG8XnDr1bBmmodaHzTVK188uX5qM195AtWv6cNZ8KlCD6RdJp9pw1gH/,next,0');">
<img src='file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/6.0/Applications/265AB680-9D44-48B1-A4F3-D59E7649A88B/KwinTabBar2.app/gray_ball.png'
style="-webkit-transform:rotateX(10deg) rotateY(-45deg);height:40px; width:48px;opacity:0.5;margin-right:-20px;margin-bottom:3px"/></a>
<!--<button onclick="toggleShape1(400)">-Zoom</button> <button onclick="toggleShape1(-400)">Zoom+</button>-->
</td></tr>
</table>
<!--east 右画面--><a href="#" onclick="runAction('changeCurrentTitle','https://lh6.googleusercontent.com/-DQ6Diwj0p_g/STt2JnwkqRI/AAAAAAAABVw/rOnl_rqsls0/IMG_2582.JPG');">
<img src="https://lh6.googleusercontent.com/-DQ6Diwj0p_g/STt2JnwkqRI/AAAAAAAABVw/rOnl_rqsls0/IMG_2582.JPG" style="position:absolute;top:-20%; right:-28%;opacity:0.5; margin-bottom:3px; width:70px;height:40px;
-webkit-transform:rotateX(10deg) rotateY(-50deg); " />
</a>
<!-- slider -->
<div id="jquery-ui-slider3"></div>
</div>
<!--
@movieUrl@
<div style="position:absolute; bottom:10px;">
<a href="#" onclick='runAction("fbtest","")'>fbtest</a><br />
<a href="#" onclick='runAction("changeCurrentTitle","0")'>Home</a><br />
<a href="#" onclick='runAction("changeCurrentTitle","https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrY5PJDA-pVXDAjVfkT-4vufV-OqK6wFjIuPeZ64DDZ-MyPgJNe4l9olPpX4HulWz9XtVjIw-5n42AKoa49QVuw-QL_GWggFVbSLsWzr__dyK1Q71cq7-LNfNYl09VbHXNKT1FhAIR68l1/")'>parentTitle</a><br />
</div>-->
<input id="_type" type="hidden" value="000" />
<!-- map -->
<div id="map" style="position:absolute;left:15%; width:600px; height:300px;"></div>
<script type="text/javascript" src="file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/6.0/Applications/265AB680-9D44-48B1-A4F3-D59E7649A88B/KwinTabBar2.app/alexframework/src/javascript/googleMap.js"></script>
<!-- slider -->
<div id="jquery-ui-slider-wrap" style="position:absolute; top:80px;left:-15px;">
<!--<p style="color:red">plane</p>-->
<input type="text" id="jquery-ui-slider-value" /><div id="jquery-ui-slider"></div>
</div>
<div id="jquery-ui-slider-wrap2" style="position:absolute; top:465px; left:-15px;">
<!--<pstyle="color:red">floor</p>-->
<input type="text" id="jquery-ui-slider-value2" /> <div id="jquery-ui-slider2"></div>
</div>
<!-- hideControl -->
<a href="#" onClick="ctrlToggle();">
<img src='file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/6.0/Applications/265AB680-9D44-48B1-A4F3-D59E7649A88B/KwinTabBar2.app/gray_ball2.png' style='opacity:0.3;width:40px;height:40px;'/>
</a>
<!--<div id="fb-root"></div>-->
<!--<script>
window.fbAsyncInit = function() {
FB.init({
appId : '142574589139226', // App ID
channelUrl : '//snsimglink.appspot.com/channel.html', // Channel File
status : false, // check login status true
cookie : false, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>-->
</body>
</html>
kwin786http://www.blogger.com/profile/11636870499038520354noreply@blogger.com0tag:blogger.com,1999:blog-4631337081774196669.post-32124937275789760002012-09-05T00:14:00.003+09:002012-09-05T11:15:28.977+09:00contact<!--<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">-->
<html lang="en">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0, user-scalable=YES" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<style type="text/css" media="screen">
body { background-color: black; color: white; font-family: 'Lucida Grande', Verdana, Arial; font-size: 12px;
background-image: -webkit-gradient(radial,50% 500,1,50% 500,400, from(rgba(255, 255, 255, 0.3)),to(rgba(255, 255, 255, 0)));
background-repeat: no-repeat; }
#container { width: 100%; height: 850px;
-webkit-perspective: 800; /* For compatibility with iPhone 3.0, we leave off the units here */
-webkit-perspective-origin: 50% 225px;
}
/* 0 -> -120 -100 -> -50 2012/02/07 */
#floor { position:absolute;top:-10%; left:-50% ; margin-top:-120px; margin-left:-50px;
-webkit-mask-image:-webkit-gradient(radial, center center, 0, center center, 350,from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
-webkit-transform: rotateX(90deg) rotateY(0deg) rotateZ(90deg) translateZ(-210px) translateY(10px);
}
#floorBallLeft { position:absolute;top:-10%; left:10% ; margin-top:0px; margin-left:-90px; height:50px; opacity:0.5;
-webkit-transform: rotateX(15deg) rotateY(45deg) rotateZ(0deg) translateZ(0px) translateY(0px); }
#floorBallRight { position:absolute;top:-10%; right:15% ; margin-top:0px; margin-right:-90px; height:50px; width:45px;opacity:0.5;
-webkit-transform: rotateX(10deg) rotateY(-45deg) rotateZ(0deg) translateZ(0px) translateY(0px); }
#floorBallHome { position:absolute;top:20%; left:35% ; margin-top:60px; margin-left:0px; height:35px; width:75px; opacity:0.3;
-webkit-transform: rotateX(15deg) rotateY(0deg) rotateZ(0deg) translateZ(0px) translateY(0px); }
a:link { text-decoration: none; color:#DF1FBB; }
a:active { text-decoration: none; color:#DF1FBB; }
a:visited { text-decoration: none; color:#DF1FBB; } /* #555555 */
a:hover { text-decoration: none; color:#DF1FBB; }
li { display:inline-block; }
#floor_text{ position: absolute;
top:80%; left:-80%; height: 800px; width: 420px;
border: 0px solid white;
-webkit-box-sizing: border-box; text-align: left; font-family: Times, serif;
font-size: 20pt; font-color: white; /*font-size: 24pt; color: white; */
}
#stage { width: 100%; height: 100%; -webkit-transition: -webkit-transform 2s; -webkit-transform-style: preserve-3d; }
#shape { position: relative; top: 50px; margin: 0 auto; height: 400px; width: 204px; -webkit-transform-style: preserve-3d; }
#shapeX { margin: 0 auto; height: 200px; width: 200px; -webkit-transform-style: preserve-3d; }
.plane { position: absolute; top:0%; /*top:-150%; */
height: 400px; width: 204px; border: 0px solid white;
text-align: center; font-family: Times, serif; font-size: 124pt; color: black;
background-image: -webkit-gradient(linear, left bottom, right top,from(rgba(0,0,0,0)), to(rgba(0,0,0,1.0)));
background-repeat: no-repeat;
background-color: rgba( 0, 0, 0, 0.4); /* 0.6 */
-webkit-box-sizing: border-box;
-webkit-transition: -webkit-transform 2s, opacity 2s; -webkit-backface-visibility: hidden; /* hidden */
}
.subplane {position: absolute; width:204px;top:-335px; border: 0px; padding:0px; opacity:0.5;
-webkit-transition: -webkit-transform 2s,opacity 2s;-webkit-backface-visibility:visible;}
#shape.backfaces .plane { -webkit-backface-visibility: visible; }
@-webkit-keyframes spin { from { -webkit-transform: rotateY(0); } to { -webkit-transform: rotateY(-360deg); } }
@-webkit-keyframes spinR{ from { -webkit-transform: rotateY(0); } to { -webkit-transform: rotateY( 360deg); } }
@-webkit-keyframes spin0{ }
/* 上部の説明文の書式設定 背景は灰色で角を丸める .controls {width: 70%; height:10%; margin: 0 auto; padding: 5px 20px; */
.controls { opacity:0.6; /* width: 80%; height:40%; */
position:absolute;top:80%; left:34%; height:36px; /* bottom:1% */
margin: 0 auto; padding: 5px 10px; background-color: rgba(255, 255, 255, 0.15);
-webkit-border-radius: 48px; }
.ctlBtn { font-size:10pt; opacity:0.8; margin-bottom:7px;}
.controls > div { margin: 10px; }
/* ---------- ring2 styles ------------- */
.ring2 > .s1 { -webkit-transform: rotateY( 0deg) translateY( 0px) translateZ(-380px); }
.ring2 > .s2 { -webkit-transform: rotateY( -30deg) translateY( 0px) translateZ(-380px); }
.ring2 > .s3 { -webkit-transform: rotateY( -60deg) translateY( 0px) translateZ(-380px); }
.ring2 > .s4 { -webkit-transform: rotateY( -90deg) translateZ(-380px); }
.ring2 > .s5 { -webkit-transform: rotateY( -120deg) translateZ(-380px); }
.ring2 > .s6 { -webkit-transform: rotateY( -150deg) translateZ(-380px); }
.ring2 > .s7 { -webkit-transform: rotateY( -180deg) translateZ(-380px); }
.ring2 > .s8 { -webkit-transform: rotateY( -210deg) translateZ(-380px); }
.ring2 > .s9 { -webkit-transform: rotateY( 120deg) translateZ(-380px); }
.ring2 > .s10 { -webkit-transform: rotateY( 90deg) translateZ(-380px); }
.ring2 > .s11 { -webkit-transform: rotateY( -300deg) translateZ(-380px); }
.ring2 > .s12 { -webkit-transform: rotateY( -330deg) translateZ(-380px); }
.ring2 > .s13 { -webkit-transform: translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s14 { -webkit-transform: rotateY( -20deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s15 { -webkit-transform: rotateY( -40deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s16 { -webkit-transform: rotateY( -60deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s17 { -webkit-transform: rotateY( -80deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s18 { -webkit-transform: rotateY( -100deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s19 { -webkit-transform: rotateY( -120deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s20 { -webkit-transform: rotateY( -140deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s21 { -webkit-transform: rotateY( -160deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s22 { -webkit-transform: rotateY( -180deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s23 { -webkit-transform: rotateY( -200deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s24 { -webkit-transform: rotateY( -220deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s25 { -webkit-transform: rotateY( -240deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s26 { -webkit-transform: rotateY( -260deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s27 { -webkit-transform: rotateY( -280deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s28 { -webkit-transform: rotateY( -300deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s29 { -webkit-transform: rotateY( -320deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s30 { -webkit-transform: rotateY( -340deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.slideIn {-webkit-animation-timing-function: ease ;-webkit-animation-duration: 1500ms;-webkit-animation-name: slidein; margin-right:0px;}
@-webkit-keyframes slidein {from { margin-top: 120px; opacity:0; } to { margin-top: 0px; opacity:1; } }
.slideFloor {-webkit-animation-timing-function: ease;-webkit-animation-duration: 1000ms;-webkit-animation-name: slidein; margin-left:0px;}
@-webkit-keyframes slideFloor {from { margin-top: 120px; opacity:0; } to { margin-top: 0px; opacity:1;} }
.blur, .blur > img {margin: 0; padding: 0; border: 0; }
.blur { position: relative;display: inline-block;font-size: 0; line-height: 0; }
.blur:after { position: absolute;left: 0; top: 0; right: 0; bottom: 0;
-webkit-box-shadow: inset 0px 0px 15px 15px #fff;
box-shadow: inset 0px 0px 15px 15px #fff;
content: " ";
}
<!--
#jquery-ui-slider-wrap {padding:0px;text-align: center; width: 38px;border: 0px;border-radius:20px; background-color: rgba(255, 255, 255, 0.15);opacity:0.4; }
#jquery-ui-slider-value {border:0; color: red !important; font-weight: bold; background-color: transparent;margin: 5px; width: 40px; text-align: center; }
#jquery-ui-slider {height: 150px; width:25px;background-color:rgba(255, 255, 255, 0.15); opacity:0.2;opacity:0.2;}
#jquery-ui-slider-wrap2 {padding:0px;text-align: center;width: 38px; border: 0px;border-radius:10px; background-color: rgba(255, 255, 255, 0.15); opacity:0.4; }
#jquery-ui-slider-value2{ border: 0; color: red !important; font-weight: bold; background-color: transparent;margin: 5px;width: 40px; text-align: center; }
#jquery-ui-slider2 { height: 150px; width:25px; background-color:rgba(255, 255, 255, 0.15); opacity:0.2;}
-->
</style>
<script type="text/javascript">
function setCss(currentWidth){
if ( navigator.userAgent.match( /iPhone/i ) || navigator.userAgent.match( /iPod/i ) ) {
alert(navigator.userAgent)
var el = document.getElementById("ctrl1");
el.style.position = 'absolute';
el.style.left = '60px';
el.style.width = '180px';
if(window.navigator.standalone){ el.style.top = '10px'; }
}
shape.style.top='25%';
floor.style.top='30%';
floor.style.left='-50%';
var tY = -1*(720-586)/2;
var tY = 0;
if (window.orientation == 90 || window.orientation == -90||currentWidth > 800){
ctrl2.style.top='60%';ctrl1.style.left='42%';
}
}
// $.browser.mobileSafari = /webkit.*mobile/i.test(navigator.userAgent)
// if ($.browser.mobileSafari) {
// $.getScript('/public/javascripts/jquery.ui.touch-punch.min.js');
// }
function ctrlToggle(){
$('#jquery-ui-slider-wrap').toggle();$('#jquery-ui-slider-wrap2').toggle();$('#ctrl2').toggle();$('#ctrl1').toggle();
}
<!--
jQuery( function() {
jQuery( '#jquery-ui-slider' ) . slider( {
orientation: 'vertical', animate: 'slow', range: 'min', value: 70, min: -100, max: 300,
slide: function( event, ui ) {
jQuery( '#jquery-ui-slider-value' ) . val( ui.value );
var top = ui.value -100;
shape.style.top= top+ '%';
}
} );
jQuery( '#jquery-ui-slider-value' ) . val( jQuery( '#jquery-ui-slider' ) . slider( 'value' ) );
} );
jQuery( function() {
jQuery( '#jquery-ui-slider2' ) . slider( {
orientation: 'vertical', animate: 'slow', range: 'min', value: 70, min: -200, max: 300,
slide: function( event, ui ) {
jQuery( '#jquery-ui-slider-value2' ) . val( ui.value );
var top = ui.value -100; floor.style.top= top+ '%';
}
} );
jQuery( '#jquery-ui-slider-value2' ) . val( jQuery( '#jquery-ui-slider2' ) . slider( 'value' ) );
} );
jQuery( function() {
jQuery( '#jquery-ui-slider3' ).slider( {
animate:'slow', range: 'min', value: staticRotationY, min: -180, max: 360,
slide: function( event, ui ) {
staticRotationY = ui.value*Math.PI/180;
shape.style.webkitTransform = 'rotateY('+staticRotationY+'rad)';
}
});
} );
-->
</script>
</head>
<body onload="addAnimationHandlers('/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.1/Applications/B8A1BBCE-D69A-4AAC-BD16-F7236C7C33A6/KwinTabBar2.app',90,'stop','0','768')">
<br/ >
<br />
<div id="getComment"></div>
<div id="container">
<div id="stage">
<div id="shape" class="ring2 ">
<div id="shapeX" class="ring2 ">
<img class="subplane s1 slideIn" id="sub1" style="padding:0px;"/><img class="subplane s2 slideIn" id="sub2" style="padding:0px;"/>
<img class="subplane s3 slideIn" id="sub3" style="padding:0px;"/><img class="subplane s4 slideIn" id="sub4" style="padding:0px;"/>
<img class="subplane s5 slideIn" id="sub5" style="padding:0px;"/><img class="subplane s6 slideIn" id="sub6" style="padding:0px;"/>
<img class="subplane s7 slideIn" id="sub7" style="padding:0px;"/><img class="subplane s8 slideIn" id="sub8" style="padding:0px;"/>
<img class="subplane s9 slideIn" id="sub9" style="padding:0px;"/><img class="subplane s10 slideIn" id="sub10" style="padding:0px;"/>
<img class="subplane s11 slideIn" id="sub11" style="padding:0px;"/><img class="subplane s12 slideIn" id="sub12" style="padding:0px;"/>
<div class="plane s1 slideIn" id="s1" >
<a href='#' onclick="pop('1','https://lh6.googleusercontent.com/-CCk-SRW1pzI/UD94oVLlQ7I/AAAAAAAADxI/WcFjxJwUpms/img0001.png','1/img0001.png','https://lh6.googleusercontent.com/-CCk-SRW1pzI/UD94oVLlQ7I/AAAAAAAADxI/WcFjxJwUpms/img0001.png','https://picasaweb.google.com/102448397019191874652/ContactImg#5782473080842830770','p','160','0','https://lh6.googleusercontent.com/-CCk-SRW1pzI/UD94oVLlQ7I/AAAAAAAADxI/WcFjxJwUpms/img0001.png','0','1')">
<img src="https://lh6.googleusercontent.com/-CCk-SRW1pzI/UD94oVLlQ7I/AAAAAAAADxI/WcFjxJwUpms/s288/img0001.png" width="160" style="margin-left:0px; margin-top:100px; padding:0px;" id="i1"></a></div>
<div class="plane s2 slideIn" id="s2" >
<a href='#' onclick="pop('2','https://lh6.googleusercontent.com/-xn52A_0MPFM/UD94odIxeBI/AAAAAAAADxQ/7iBlxg9iPbg/img0002.png','2/img0002.png','https://lh6.googleusercontent.com/-xn52A_0MPFM/UD94odIxeBI/AAAAAAAADxQ/7iBlxg9iPbg/img0002.png','https://picasaweb.google.com/102448397019191874652/ContactImg#5782473082978531346','p','160','0','https://lh6.googleusercontent.com/-xn52A_0MPFM/UD94odIxeBI/AAAAAAAADxQ/7iBlxg9iPbg/img0002.png','0','1')">
<img src="https://lh6.googleusercontent.com/-xn52A_0MPFM/UD94odIxeBI/AAAAAAAADxQ/7iBlxg9iPbg/s288/img0002.png" width="160" style="margin-left:0px; margin-top:100px; padding:0px;" id="i2"></a></div>
<div class="plane s3 slideIn" id="s3" >
<a href='#' onclick="pop('3','https://lh3.googleusercontent.com/-WEC_EiEMDlo/UD94oWqinMI/AAAAAAAADxM/BYVf9RbgjY8/img0003.png','3/img0003.png','https://lh3.googleusercontent.com/-WEC_EiEMDlo/UD94oWqinMI/AAAAAAAADxM/BYVf9RbgjY8/img0003.png','https://picasaweb.google.com/102448397019191874652/ContactImg#5782473081241115842','p','160','0','https://lh3.googleusercontent.com/-WEC_EiEMDlo/UD94oWqinMI/AAAAAAAADxM/BYVf9RbgjY8/img0003.png','0','1')">
<img src="https://lh3.googleusercontent.com/-WEC_EiEMDlo/UD94oWqinMI/AAAAAAAADxM/BYVf9RbgjY8/s288/img0003.png" width="160" style="margin-left:0px; margin-top:100px; padding:0px;" id="i3"></a></div>
<div class="plane s4 slideIn" id="s4" >
<a href='#' onclick="pop('4','https://lh4.googleusercontent.com/-aApDOTS1YDU/UD94o0jF9zI/AAAAAAAADxY/w_2DXPutZg0/img0004.png','4/img0004.png','https://lh4.googleusercontent.com/-aApDOTS1YDU/UD94o0jF9zI/AAAAAAAADxY/w_2DXPutZg0/img0004.png','https://picasaweb.google.com/102448397019191874652/ContactImg#5782473089262942002','p','160','0','https://lh4.googleusercontent.com/-aApDOTS1YDU/UD94o0jF9zI/AAAAAAAADxY/w_2DXPutZg0/img0004.png','0','1')">
<img src="https://lh4.googleusercontent.com/-aApDOTS1YDU/UD94o0jF9zI/AAAAAAAADxY/w_2DXPutZg0/s288/img0004.png" width="160" style="margin-left:0px; margin-top:100px; padding:0px;" id="i4"></a></div>
<div class="plane s5 slideIn" id="s5" >
<a href='#' onclick="pop('5','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLth0d8cWS6UONyzKXnWwHFn4ihU8oUbTypVHJ6dkyMx8dalX7aVHmQWRFPEL71Zh5V_2991-jTfeWZInwlsLW4u7PAqQIcR8a_7TGI9kDnicMFu7HXqZuwyw2KAgtg5h5q3vNA3cAZoLW/','5/img0005.png','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLth0d8cWS6UONyzKXnWwHFn4ihU8oUbTypVHJ6dkyMx8dalX7aVHmQWRFPEL71Zh5V_2991-jTfeWZInwlsLW4u7PAqQIcR8a_7TGI9kDnicMFu7HXqZuwyw2KAgtg5h5q3vNA3cAZoLW/','https://picasaweb.google.com/102448397019191874652/ContactImg#5782473091608323554','p','160','0','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLth0d8cWS6UONyzKXnWwHFn4ihU8oUbTypVHJ6dkyMx8dalX7aVHmQWRFPEL71Zh5V_2991-jTfeWZInwlsLW4u7PAqQIcR8a_7TGI9kDnicMFu7HXqZuwyw2KAgtg5h5q3vNA3cAZoLW/','0','1')">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLth0d8cWS6UONyzKXnWwHFn4ihU8oUbTypVHJ6dkyMx8dalX7aVHmQWRFPEL71Zh5V_2991-jTfeWZInwlsLW4u7PAqQIcR8a_7TGI9kDnicMFu7HXqZuwyw2KAgtg5h5q3vNA3cAZoLW/s288/img0005.png" width="160" style="margin-left:0px; margin-top:100px; padding:0px;" id="i5"></a></div>
<div class="plane s6 slideIn" id="s6" >
<a href='#' onclick="pop('6','https://lh3.googleusercontent.com/-1oH3esDH9jk/UD94qQBmlhI/AAAAAAAADx0/CIWWKKeWrTc/img0006.png','6/img0006.png','https://lh3.googleusercontent.com/-1oH3esDH9jk/UD94qQBmlhI/AAAAAAAADx0/CIWWKKeWrTc/img0006.png','https://picasaweb.google.com/102448397019191874652/ContactImg#5782473113818535442','p','160','0','https://lh3.googleusercontent.com/-1oH3esDH9jk/UD94qQBmlhI/AAAAAAAADx0/CIWWKKeWrTc/img0006.png','0','1')">
<img src="https://lh3.googleusercontent.com/-1oH3esDH9jk/UD94qQBmlhI/AAAAAAAADx0/CIWWKKeWrTc/s288/img0006.png" width="160" style="margin-left:0px; margin-top:100px; padding:0px;" id="i6"></a></div>
<div class="plane s7 slideIn" id="s7" >
<a href='#' onclick="pop('7','https://lh4.googleusercontent.com/-4-8AwL26gn4/UD94p5_Nq7I/AAAAAAAADxo/Vc3r_itv9B0/img0007.png','7/img0007.png','https://lh4.googleusercontent.com/-4-8AwL26gn4/UD94p5_Nq7I/AAAAAAAADxo/Vc3r_itv9B0/img0007.png','https://picasaweb.google.com/102448397019191874652/ContactImg#5782473107902933938','p','160','0','https://lh4.googleusercontent.com/-4-8AwL26gn4/UD94p5_Nq7I/AAAAAAAADxo/Vc3r_itv9B0/img0007.png','0','1')">
<img src="https://lh4.googleusercontent.com/-4-8AwL26gn4/UD94p5_Nq7I/AAAAAAAADxo/Vc3r_itv9B0/s288/img0007.png" width="160" style="margin-left:0px; margin-top:100px; padding:0px;" id="i7"></a></div>
<div class="plane s8 slideIn" id="s8" >
<a href='#' onclick="pop('8','https://lh5.googleusercontent.com/-dfdopBJDjh4/UD94qPsJLuI/AAAAAAAADxw/qtq54CoP5Zo/img0008.png','8/img0008.png','https://lh5.googleusercontent.com/-dfdopBJDjh4/UD94qPsJLuI/AAAAAAAADxw/qtq54CoP5Zo/img0008.png','https://picasaweb.google.com/102448397019191874652/ContactImg#5782473113728528098','p','160','0','https://lh5.googleusercontent.com/-dfdopBJDjh4/UD94qPsJLuI/AAAAAAAADxw/qtq54CoP5Zo/img0008.png','0','1')">
<img src="https://lh5.googleusercontent.com/-dfdopBJDjh4/UD94qPsJLuI/AAAAAAAADxw/qtq54CoP5Zo/s288/img0008.png" width="160" style="margin-left:0px; margin-top:100px; padding:0px;" id="i8"></a></div>
<div class="plane s9 slideIn" id="s9" >
<a href='#' onclick="pop('9','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwLd-JKGx1q1YNm8jzxf7t31j19cWs1WpacusVvkSjaWV9IMWp6I838pyDlbsDPTMrXFbiXZP7-S6l62S73Nk1oBk_QFrg_V2ZH8BO3JWuHCUzuAGWm61Fkq738eACgg6x3DcLo3fmz37W/','9/img0009.png','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwLd-JKGx1q1YNm8jzxf7t31j19cWs1WpacusVvkSjaWV9IMWp6I838pyDlbsDPTMrXFbiXZP7-S6l62S73Nk1oBk_QFrg_V2ZH8BO3JWuHCUzuAGWm61Fkq738eACgg6x3DcLo3fmz37W/','https://picasaweb.google.com/102448397019191874652/ContactImg#5782473130539641154','p','160','0','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwLd-JKGx1q1YNm8jzxf7t31j19cWs1WpacusVvkSjaWV9IMWp6I838pyDlbsDPTMrXFbiXZP7-S6l62S73Nk1oBk_QFrg_V2ZH8BO3JWuHCUzuAGWm61Fkq738eACgg6x3DcLo3fmz37W/','0','1')">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwLd-JKGx1q1YNm8jzxf7t31j19cWs1WpacusVvkSjaWV9IMWp6I838pyDlbsDPTMrXFbiXZP7-S6l62S73Nk1oBk_QFrg_V2ZH8BO3JWuHCUzuAGWm61Fkq738eACgg6x3DcLo3fmz37W/s288/img0009.png" width="160" style="margin-left:0px; margin-top:100px; padding:0px;" id="i9"></a></div>
<div class="plane s10 slideIn" id="s10" >
<a href='#' onclick="pop('10','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2pB75RYRhnJmA2DhnIO5VsHpqUfOJB2RQ2JGkiZLtGEt2HJb-dgQ-KAUNg7ai-IBfc3eJVa9yLgiDssbLDAnzuU43iNuIKjIsBsXkbbZGtaP-aFjkGYh2HLWoofSozh6bQp9rhgQAZZwb/','10/img0010.png','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2pB75RYRhnJmA2DhnIO5VsHpqUfOJB2RQ2JGkiZLtGEt2HJb-dgQ-KAUNg7ai-IBfc3eJVa9yLgiDssbLDAnzuU43iNuIKjIsBsXkbbZGtaP-aFjkGYh2HLWoofSozh6bQp9rhgQAZZwb/','https://picasaweb.google.com/102448397019191874652/ContactImg#5782473127491527906','p','160','0','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2pB75RYRhnJmA2DhnIO5VsHpqUfOJB2RQ2JGkiZLtGEt2HJb-dgQ-KAUNg7ai-IBfc3eJVa9yLgiDssbLDAnzuU43iNuIKjIsBsXkbbZGtaP-aFjkGYh2HLWoofSozh6bQp9rhgQAZZwb/','0','1')">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2pB75RYRhnJmA2DhnIO5VsHpqUfOJB2RQ2JGkiZLtGEt2HJb-dgQ-KAUNg7ai-IBfc3eJVa9yLgiDssbLDAnzuU43iNuIKjIsBsXkbbZGtaP-aFjkGYh2HLWoofSozh6bQp9rhgQAZZwb/s288/img0010.png" width="160" style="margin-left:0px; margin-top:100px; padding:0px;" id="i10"></a></div>
<div class="plane s11 slideIn" id="s11" >
<a href='#' onclick="pop('11','https://lh4.googleusercontent.com/-n2GG2y72V9w/UD94rItYUuI/AAAAAAAADyU/dwpTvICG9C0/img0011.png','11/img0011.png','https://lh4.googleusercontent.com/-n2GG2y72V9w/UD94rItYUuI/AAAAAAAADyU/dwpTvICG9C0/img0011.png','https://picasaweb.google.com/102448397019191874652/ContactImg#5782473129034535650','p','160','0','https://lh4.googleusercontent.com/-n2GG2y72V9w/UD94rItYUuI/AAAAAAAADyU/dwpTvICG9C0/img0011.png','0','1')">
<img src="https://lh4.googleusercontent.com/-n2GG2y72V9w/UD94rItYUuI/AAAAAAAADyU/dwpTvICG9C0/s288/img0011.png" width="160" style="margin-left:0px; margin-top:100px; padding:0px;" id="i11"></a></div>
<div class="plane s12 slideIn" id="s12" >
<a href='#' onclick="pop('12','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVmtQDDL0rSZPPWe7rxthOFspNEslKBv1GEcgv7Usnz5XW0WPv27WUBwqS3_o6DBcQXfGn-jKL1MJbScTRPUn9tSNSDbtCrlno0W5dGQJ89_7-n7zB-AvUrvrYdG6Fmks6oPJCdewZ7Zd5/','12/img0012.png','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVmtQDDL0rSZPPWe7rxthOFspNEslKBv1GEcgv7Usnz5XW0WPv27WUBwqS3_o6DBcQXfGn-jKL1MJbScTRPUn9tSNSDbtCrlno0W5dGQJ89_7-n7zB-AvUrvrYdG6Fmks6oPJCdewZ7Zd5/','https://picasaweb.google.com/102448397019191874652/ContactImg#5782473141940738146','p','160','0','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVmtQDDL0rSZPPWe7rxthOFspNEslKBv1GEcgv7Usnz5XW0WPv27WUBwqS3_o6DBcQXfGn-jKL1MJbScTRPUn9tSNSDbtCrlno0W5dGQJ89_7-n7zB-AvUrvrYdG6Fmks6oPJCdewZ7Zd5/','0','1')">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVmtQDDL0rSZPPWe7rxthOFspNEslKBv1GEcgv7Usnz5XW0WPv27WUBwqS3_o6DBcQXfGn-jKL1MJbScTRPUn9tSNSDbtCrlno0W5dGQJ89_7-n7zB-AvUrvrYdG6Fmks6oPJCdewZ7Zd5/s288/img0012.png" width="160" style="margin-left:0px; margin-top:100px; padding:0px;" id="i12"></a></div>
<div class="plane s13 slideIn" id="s13" style="height:204px; width:133px;">
<a href='#' onclick="pop('13','https://lh3.googleusercontent.com/-waW29TPQrm4/UD94sQouWcI/AAAAAAAADyc/9pHwijR2nWE/img0013.png','Caption','https://lh3.googleusercontent.com/-waW29TPQrm4/UD94sQouWcI/AAAAAAAADyc/9pHwijR2nWE/img0013.png','https://picasaweb.google.com/102448397019191874652/ContactImg#5782473148342360514','p','103','0','https://lh3.googleusercontent.com/-waW29TPQrm4/UD94sQouWcI/AAAAAAAADyc/9pHwijR2nWE/img0013.png','0', '1')">
<img src="https://lh3.googleusercontent.com/-waW29TPQrm4/UD94sQouWcI/AAAAAAAADyc/9pHwijR2nWE/s288/img0013.png" width="103" style="padding:0px;" id="i13"></a></div><div class="plane s14 slideIn" id="s14" style="height:204px; width:133px;">
<a href='#' onclick="pop('14','https://lh3.googleusercontent.com/-XAnty2Squ7w/UD94s4Z8y_I/AAAAAAAADy0/n0DUI2ZYYlM/img0014.png','Caption','https://lh3.googleusercontent.com/-XAnty2Squ7w/UD94s4Z8y_I/AAAAAAAADy0/n0DUI2ZYYlM/img0014.png','https://picasaweb.google.com/102448397019191874652/ContactImg#5782473159017810930','p','103','0','https://lh3.googleusercontent.com/-XAnty2Squ7w/UD94s4Z8y_I/AAAAAAAADy0/n0DUI2ZYYlM/img0014.png','0', '1')">
<img src="https://lh3.googleusercontent.com/-XAnty2Squ7w/UD94s4Z8y_I/AAAAAAAADy0/n0DUI2ZYYlM/s288/img0014.png" width="103" style="padding:0px;" id="i14"></a></div><div class="plane s15 slideIn" id="s15" style="height:204px; width:133px;">
<a href='#' onclick="pop('15','https://lh3.googleusercontent.com/-wSElMBsJRgE/UD94tElzEBI/AAAAAAAADys/aE2KTvAY2hs/img0015.png','Caption','https://lh3.googleusercontent.com/-wSElMBsJRgE/UD94tElzEBI/AAAAAAAADys/aE2KTvAY2hs/img0015.png','https://picasaweb.google.com/102448397019191874652/ContactImg#5782473162288730130','p','103','0','https://lh3.googleusercontent.com/-wSElMBsJRgE/UD94tElzEBI/AAAAAAAADys/aE2KTvAY2hs/img0015.png','0', '1')">
<img src="https://lh3.googleusercontent.com/-wSElMBsJRgE/UD94tElzEBI/AAAAAAAADys/aE2KTvAY2hs/s288/img0015.png" width="103" style="padding:0px;" id="i15"></a></div><div class="plane s16 slideIn" id="s16" style="height:204px; width:133px;">
<a href='#' onclick="pop('16','https://lh6.googleusercontent.com/-wD6GWk5F0zw/UD94thMYmMI/AAAAAAAADy8/OVOYLOjGYo8/img0016.png','Caption','https://lh6.googleusercontent.com/-wD6GWk5F0zw/UD94thMYmMI/AAAAAAAADy8/OVOYLOjGYo8/img0016.png','https://picasaweb.google.com/102448397019191874652/ContactImg#5782473169966766274','p','103','0','https://lh6.googleusercontent.com/-wD6GWk5F0zw/UD94thMYmMI/AAAAAAAADy8/OVOYLOjGYo8/img0016.png','0', '1')">
<img src="https://lh6.googleusercontent.com/-wD6GWk5F0zw/UD94thMYmMI/AAAAAAAADy8/OVOYLOjGYo8/s288/img0016.png" width="103" style="padding:0px;" id="i16"></a></div><div class="plane s17 slideIn" id="s17" style="height:204px; width:133px;">
<a href='#' onclick="pop('17','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiLiTRtb1yJKGrH5EAW6JVHMR_us65PD1PEeZqn4925ZyYPzIal6Puk-loXOO3He-flhgctm_p4kg-zhYRt-raeCdBosjITuBIPX9d1BkfPVymk9l0vm4-kKrTZhkY1dCZy863jdRErnF1/','Caption','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiLiTRtb1yJKGrH5EAW6JVHMR_us65PD1PEeZqn4925ZyYPzIal6Puk-loXOO3He-flhgctm_p4kg-zhYRt-raeCdBosjITuBIPX9d1BkfPVymk9l0vm4-kKrTZhkY1dCZy863jdRErnF1/','https://picasaweb.google.com/102448397019191874652/ContactImg#5782473183044873634','p','103','0','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiLiTRtb1yJKGrH5EAW6JVHMR_us65PD1PEeZqn4925ZyYPzIal6Puk-loXOO3He-flhgctm_p4kg-zhYRt-raeCdBosjITuBIPX9d1BkfPVymk9l0vm4-kKrTZhkY1dCZy863jdRErnF1/','0', '1')">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiLiTRtb1yJKGrH5EAW6JVHMR_us65PD1PEeZqn4925ZyYPzIal6Puk-loXOO3He-flhgctm_p4kg-zhYRt-raeCdBosjITuBIPX9d1BkfPVymk9l0vm4-kKrTZhkY1dCZy863jdRErnF1/s288/img0017.png" width="103" style="padding:0px;" id="i17"></a></div><div class="plane s18 slideIn" id="s18" style="height:204px; width:133px;">
<a href='#' onclick="pop('18','https://lh3.googleusercontent.com/-hlpaz_XwWGM/UD94uaxeETI/AAAAAAAADzU/1seIUEYoS9M/img0018.png','Caption','https://lh3.googleusercontent.com/-hlpaz_XwWGM/UD94uaxeETI/AAAAAAAADzU/1seIUEYoS9M/img0018.png','https://picasaweb.google.com/102448397019191874652/ContactImg#5782473185423135026','p','103','0','https://lh3.googleusercontent.com/-hlpaz_XwWGM/UD94uaxeETI/AAAAAAAADzU/1seIUEYoS9M/img0018.png','0', '1')">
<img src="https://lh3.googleusercontent.com/-hlpaz_XwWGM/UD94uaxeETI/AAAAAAAADzU/1seIUEYoS9M/s288/img0018.png" width="103" style="padding:0px;" id="i18"></a></div><div class="plane s19 slideIn" id="s19" style="height:204px; width:133px;">
<a href='#' onclick="pop('19','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMsbMWkxiMmR-_uQmxDUNPMRtjbH_2nCrL4AhzazLlYaOMYaUu0oH76oh-M7D6GJZOdQOU3B0aKtx7pbbjzi2QbHyQUM59_q_YWX72VW6xFA2noIVED6bwoJsUsyTCC9WLQcQ0ZA6sC-Gs/','Caption','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMsbMWkxiMmR-_uQmxDUNPMRtjbH_2nCrL4AhzazLlYaOMYaUu0oH76oh-M7D6GJZOdQOU3B0aKtx7pbbjzi2QbHyQUM59_q_YWX72VW6xFA2noIVED6bwoJsUsyTCC9WLQcQ0ZA6sC-Gs/','https://picasaweb.google.com/102448397019191874652/ContactImg#5782473184080930578','p','103','0','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMsbMWkxiMmR-_uQmxDUNPMRtjbH_2nCrL4AhzazLlYaOMYaUu0oH76oh-M7D6GJZOdQOU3B0aKtx7pbbjzi2QbHyQUM59_q_YWX72VW6xFA2noIVED6bwoJsUsyTCC9WLQcQ0ZA6sC-Gs/','0', '1')">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMsbMWkxiMmR-_uQmxDUNPMRtjbH_2nCrL4AhzazLlYaOMYaUu0oH76oh-M7D6GJZOdQOU3B0aKtx7pbbjzi2QbHyQUM59_q_YWX72VW6xFA2noIVED6bwoJsUsyTCC9WLQcQ0ZA6sC-Gs/s288/img0019.png" width="103" style="padding:0px;" id="i19"></a></div><div class="plane s20 slideIn" id="s20" style="height:204px; width:133px;">
<a href='#' onclick="pop('20','https://lh5.googleusercontent.com/-pfTYTw2s8u4/UD94u6OuLhI/AAAAAAAADzQ/ahLQ1zzXCc0/img0020.png','Caption','https://lh5.googleusercontent.com/-pfTYTw2s8u4/UD94u6OuLhI/AAAAAAAADzQ/ahLQ1zzXCc0/img0020.png','https://picasaweb.google.com/102448397019191874652/ContactImg#5782473193867324946','p','103','0','https://lh5.googleusercontent.com/-pfTYTw2s8u4/UD94u6OuLhI/AAAAAAAADzQ/ahLQ1zzXCc0/img0020.png','0', '1')">
<img src="https://lh5.googleusercontent.com/-pfTYTw2s8u4/UD94u6OuLhI/AAAAAAAADzQ/ahLQ1zzXCc0/s288/img0020.png" width="103" style="padding:0px;" id="i20"></a></div><div class="plane s21 slideIn" id="s21" style="height:204px; width:133px;">
<a href='#' onclick="pop('21','https://lh4.googleusercontent.com/-xLgNTbsM2I0/UD94vKigM2I/AAAAAAAADzY/ECNJ3Ltqu14/img0021.png','Caption','https://lh4.googleusercontent.com/-xLgNTbsM2I0/UD94vKigM2I/AAAAAAAADzY/ECNJ3Ltqu14/img0021.png','https://picasaweb.google.com/102448397019191874652/ContactImg#5782473198245262178','p','103','0','https://lh4.googleusercontent.com/-xLgNTbsM2I0/UD94vKigM2I/AAAAAAAADzY/ECNJ3Ltqu14/img0021.png','0', '1')">
<img src="https://lh4.googleusercontent.com/-xLgNTbsM2I0/UD94vKigM2I/AAAAAAAADzY/ECNJ3Ltqu14/s288/img0021.png" width="103" style="padding:0px;" id="i21"></a></div><div class="plane s22 slideIn" id="s22" style="height:204px; width:133px;">
<a href='#' onclick="pop('22','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUBQyir1J_ygcEkba7PlqwEL9SFpAfDbkBSxJsq63u5Mb0jwWJMkGcAUE3cADaaP9jiy-_WkM-eSa8LbEgmwv36rZewtONgBan2IJe1BBX2AIPWgUrA24KN4Oy-swuWi0PYbheOBOmaR0E/','Caption','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUBQyir1J_ygcEkba7PlqwEL9SFpAfDbkBSxJsq63u5Mb0jwWJMkGcAUE3cADaaP9jiy-_WkM-eSa8LbEgmwv36rZewtONgBan2IJe1BBX2AIPWgUrA24KN4Oy-swuWi0PYbheOBOmaR0E/','https://picasaweb.google.com/102448397019191874652/ContactImg#5782473203172211042','p','103','0','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUBQyir1J_ygcEkba7PlqwEL9SFpAfDbkBSxJsq63u5Mb0jwWJMkGcAUE3cADaaP9jiy-_WkM-eSa8LbEgmwv36rZewtONgBan2IJe1BBX2AIPWgUrA24KN4Oy-swuWi0PYbheOBOmaR0E/','0', '1')">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUBQyir1J_ygcEkba7PlqwEL9SFpAfDbkBSxJsq63u5Mb0jwWJMkGcAUE3cADaaP9jiy-_WkM-eSa8LbEgmwv36rZewtONgBan2IJe1BBX2AIPWgUrA24KN4Oy-swuWi0PYbheOBOmaR0E/s288/img0022.png" width="103" style="padding:0px;" id="i22"></a></div><div class="plane s23 slideIn" id="s23" style="height:204px; width:133px;">
<a href='#' onclick="pop('23','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiULC_gKFteYPQ7kc6cab1skYSH2xalSB6q28njuEXKJsCAPJp4OxGSDR1o6NxkQfk0OgLgJBA0VlVB6EtTygfPC9cGCdnqdxbUQvJwjKJP9L-4cx6u3WoSTXuP7rVvDhuVgWJRaolRV-DU/','Caption','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiULC_gKFteYPQ7kc6cab1skYSH2xalSB6q28njuEXKJsCAPJp4OxGSDR1o6NxkQfk0OgLgJBA0VlVB6EtTygfPC9cGCdnqdxbUQvJwjKJP9L-4cx6u3WoSTXuP7rVvDhuVgWJRaolRV-DU/','https://picasaweb.google.com/102448397019191874652/ContactImg#5782473208293260850','p','103','0','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiULC_gKFteYPQ7kc6cab1skYSH2xalSB6q28njuEXKJsCAPJp4OxGSDR1o6NxkQfk0OgLgJBA0VlVB6EtTygfPC9cGCdnqdxbUQvJwjKJP9L-4cx6u3WoSTXuP7rVvDhuVgWJRaolRV-DU/','0', '1')">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiULC_gKFteYPQ7kc6cab1skYSH2xalSB6q28njuEXKJsCAPJp4OxGSDR1o6NxkQfk0OgLgJBA0VlVB6EtTygfPC9cGCdnqdxbUQvJwjKJP9L-4cx6u3WoSTXuP7rVvDhuVgWJRaolRV-DU/s288/img0023.png" width="103" style="padding:0px;" id="i23"></a></div><div class="plane s24 slideIn" id="s24" style="height:204px; width:133px;">
<a href='#' onclick="pop('24','https://lh5.googleusercontent.com/-D7f76eMYzcM/UD94vo1HDyI/AAAAAAAADzk/oml4NyaqcFw/img0024.png','Caption','https://lh5.googleusercontent.com/-D7f76eMYzcM/UD94vo1HDyI/AAAAAAAADzk/oml4NyaqcFw/img0024.png','https://picasaweb.google.com/102448397019191874652/ContactImg#5782473206376369954','p','103','0','https://lh5.googleusercontent.com/-D7f76eMYzcM/UD94vo1HDyI/AAAAAAAADzk/oml4NyaqcFw/img0024.png','0', '1')">
<img src="https://lh5.googleusercontent.com/-D7f76eMYzcM/UD94vo1HDyI/AAAAAAAADzk/oml4NyaqcFw/s288/img0024.png" width="103" style="padding:0px;" id="i24"></a></div><div class="plane s25 slideIn" id="s25" style="height:204px; width:133px;">
<a href='#' onclick="pop('25','https://lh3.googleusercontent.com/-vCEstYzbOkQ/UD94v6PEUyI/AAAAAAAADzo/qzF0jGZONzI/img0025.png','Caption','https://lh3.googleusercontent.com/-vCEstYzbOkQ/UD94v6PEUyI/AAAAAAAADzo/qzF0jGZONzI/img0025.png','https://picasaweb.google.com/102448397019191874652/ContactImg#5782473211048645410','p','103','0','https://lh3.googleusercontent.com/-vCEstYzbOkQ/UD94v6PEUyI/AAAAAAAADzo/qzF0jGZONzI/img0025.png','0', '1')">
<img src="https://lh3.googleusercontent.com/-vCEstYzbOkQ/UD94v6PEUyI/AAAAAAAADzo/qzF0jGZONzI/s288/img0025.png" width="103" style="padding:0px;" id="i25"></a></div><div class="plane s26 slideIn" id="s26" style="height:204px; width:133px;">
<a href='#' onclick="pop('26','https://lh6.googleusercontent.com/-Z3a5XXrrhlU/UD95vd0lUeI/AAAAAAAAD0c/qTyEgS5CcKY/img0026.png','Caption','https://lh6.googleusercontent.com/-Z3a5XXrrhlU/UD95vd0lUeI/AAAAAAAAD0c/qTyEgS5CcKY/img0026.png','https://picasaweb.google.com/102448397019191874652/ContactImg#5782474302932996578','p','103','0','https://lh6.googleusercontent.com/-Z3a5XXrrhlU/UD95vd0lUeI/AAAAAAAAD0c/qTyEgS5CcKY/img0026.png','0', '1')">
<img src="https://lh6.googleusercontent.com/-Z3a5XXrrhlU/UD95vd0lUeI/AAAAAAAAD0c/qTyEgS5CcKY/s288/img0026.png" width="103" style="padding:0px;" id="i26"></a></div><div class="plane s27 slideIn" id="s27" style="height:204px; width:133px;">
<a href='#' onclick="pop('27','https://lh3.googleusercontent.com/-BUYQGg-aQWM/UD95v-CYFMI/AAAAAAAAD0k/Zr-XkgwfWEM/img0027.png','Caption','https://lh3.googleusercontent.com/-BUYQGg-aQWM/UD95v-CYFMI/AAAAAAAAD0k/Zr-XkgwfWEM/img0027.png','https://picasaweb.google.com/102448397019191874652/ContactImg#5782474311580783810','p','103','0','https://lh3.googleusercontent.com/-BUYQGg-aQWM/UD95v-CYFMI/AAAAAAAAD0k/Zr-XkgwfWEM/img0027.png','0', '1')">
<img src="https://lh3.googleusercontent.com/-BUYQGg-aQWM/UD95v-CYFMI/AAAAAAAAD0k/Zr-XkgwfWEM/s288/img0027.png" width="103" style="padding:0px;" id="i27"></a></div><div class="plane s28 slideIn" id="s28" style="height:204px; width:133px;">
<a href='#' onclick="pop('28','https://lh4.googleusercontent.com/-o1mBjHwORTA/UD95wVNLpoI/AAAAAAAAD0s/_PA9ly1lrqs/img0028.png','Caption','https://lh4.googleusercontent.com/-o1mBjHwORTA/UD95wVNLpoI/AAAAAAAAD0s/_PA9ly1lrqs/img0028.png','https://picasaweb.google.com/102448397019191874652/ContactImg#5782474317800121986','p','103','0','https://lh4.googleusercontent.com/-o1mBjHwORTA/UD95wVNLpoI/AAAAAAAAD0s/_PA9ly1lrqs/img0028.png','0', '1')">
<img src="https://lh4.googleusercontent.com/-o1mBjHwORTA/UD95wVNLpoI/AAAAAAAAD0s/_PA9ly1lrqs/s288/img0028.png" width="103" style="padding:0px;" id="i28"></a></div><div class="plane s29 slideIn" id="s29" style="height:204px; width:133px;">
<a href='#' onclick="pop('29','https://lh6.googleusercontent.com/-ncMvYsrmGws/UD95w5-HdzI/AAAAAAAAD00/FRJFp03aE4s/img0029.png','Caption','https://lh6.googleusercontent.com/-ncMvYsrmGws/UD95w5-HdzI/AAAAAAAAD00/FRJFp03aE4s/img0029.png','https://picasaweb.google.com/102448397019191874652/ContactImg#5782474327669045042','p','103','0','https://lh6.googleusercontent.com/-ncMvYsrmGws/UD95w5-HdzI/AAAAAAAAD00/FRJFp03aE4s/img0029.png','0', '1')">
<img src="https://lh6.googleusercontent.com/-ncMvYsrmGws/UD95w5-HdzI/AAAAAAAAD00/FRJFp03aE4s/s288/img0029.png" width="103" style="padding:0px;" id="i29"></a></div><div class="plane s30 slideIn" id="s30" style="height:204px; width:133px;">
<a href='#' onclick="pop('30','https://lh3.googleusercontent.com/-SIY8mIi-Nww/UEYETHWsr2I/AAAAAAAAD20/6bWsPjWH_TA/%2525E5%252586%252599%2525E7%25259C%25259F%252520%2525281%252529.PNG','Caption','https://lh3.googleusercontent.com/-SIY8mIi-Nww/UEYETHWsr2I/AAAAAAAAD20/6bWsPjWH_TA/%2525E5%252586%252599%2525E7%25259C%25259F%252520%2525281%252529.PNG','https://picasaweb.google.com/102448397019191874652/ContactImg#5784315497842257762','p','103','0','https://lh3.googleusercontent.com/-SIY8mIi-Nww/UEYETHWsr2I/AAAAAAAAD20/6bWsPjWH_TA/%2525E5%252586%252599%2525E7%25259C%25259F%252520%2525281%252529.PNG','0', '1')">
<img src="https://lh3.googleusercontent.com/-SIY8mIi-Nww/UEYETHWsr2I/AAAAAAAAD20/6bWsPjWH_TA/s288/%2525E5%252586%252599%2525E7%25259C%25259F%252520%2525281%252529.PNG" width="103" style="padding:0px;" id="i30"></a></div>
<div id="floor" class="slideFloor" align="center">
<!--<img src='@@@' id="floorImg" width="500" height="500">-->
<img src='https://lh3.googleusercontent.com/-SIY8mIi-Nww/UEYETHWsr2I/AAAAAAAAD20/6bWsPjWH_TA/s640/%25E5%2586%2599%25E7%259C%259F%2520%25281%2529.PNG' id="floorImg" width="500" height="500">
</div>
<span id="floor_text"></span>
</div>
</div>
<!-- <span id="floor_text"></span>-->
</div>
</div>
<div class="controls" id="ctrl1" style="position:absolute;top:2%; left:38%;width:180px; height:32px; ">
<button onmouseover="toggleShape1(100)" onclick="toggleShape1(200)" class="ctlBtn">-Zoom</button>
<button onmouseover="toggleShape1(-100)" onclick="toggleShape1(-200)" class="ctlBtn">Zoom+</button>
</div>
<div class="controls" id="ctrl2" style="position:absolute;width:282px"><!-- style="position:absolute; top:30px;"-->
<table><tr><td style="height:32px">
<!-- west 左画面--><a href="#" onclick="runAction('changeCurrentTitle','0');">
<img src="file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.1/Applications/B8A1BBCE-D69A-4AAC-BD16-F7236C7C33A6/KwinTabBar2.app/gray_ball2.png" style="position:absolute;top:-20%;margin-left:-100px; opacity:0.5; padding:0px;width:70px;height:40px;
-webkit-transform:rotateX(10deg) rotateY(50deg);">
</a>
<a href="#" onclick="runAction('changeCurrentTitle','202,prev,0');">
<img src='file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.1/Applications/B8A1BBCE-D69A-4AAC-BD16-F7236C7C33A6/KwinTabBar2.app/gray_ball.png'
style="-webkit-transform:rotateX(10deg) rotateY(45deg);height:40px; width:48px;opacity:0.5;margin-left:-15px;margin-bottom:3px"/></a>
</td><td>
<button onclick="autoRotate('left')" class="ctlBtn">
< </button> <button onclick="autoRotate('stop');" class="ctlBtn">■</button>
<button onclick="autoRotate('right')" class="ctlBtn"> > </button>
</td><td>
<a href="#" onclick="runAction('changeCurrentTitle','202,next,0');">
<img src='file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.1/Applications/B8A1BBCE-D69A-4AAC-BD16-F7236C7C33A6/KwinTabBar2.app/gray_ball.png'
style="-webkit-transform:rotateX(10deg) rotateY(-45deg);height:40px; width:48px;opacity:0.5;margin-right:-20px;margin-bottom:3px"/></a>
<!--<button onclick="toggleShape1(400)">-Zoom</button> <button onclick="toggleShape1(-400)">Zoom+</button>-->
</td></tr>
</table>
<!--east 右画面--><a href="#" onclick="runAction('changeCurrentTitle','0');">
<img src="file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.1/Applications/B8A1BBCE-D69A-4AAC-BD16-F7236C7C33A6/KwinTabBar2.app/gray_ball2.png" style="position:absolute;top:-20%; right:-28%;opacity:0.5; margin-bottom:3px; width:70px;height:40px;
-webkit-transform:rotateX(10deg) rotateY(-50deg); " />
</a>
<!-- slider -->
<div id="jquery-ui-slider3"></div>
</div>
<!--
@movieUrl@
<div style="position:absolute; bottom:10px;">
<a href="#" onclick='runAction("fbtest","")'>fbtest</a><br />
<a href="#" onclick='runAction("changeCurrentTitle","0")'>Home</a><br />
<a href="#" onclick='runAction("changeCurrentTitle","0")'>parentTitle</a><br />
</div>-->
<input id="_type" type="hidden" value="000" />
<!-- map -->
<div id="map" style="position:absolute;left:15%; width:600px; height:300px;"></div>
<script type="text/javascript" src="file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.1/Applications/B8A1BBCE-D69A-4AAC-BD16-F7236C7C33A6/KwinTabBar2.app/alexframework/src/javascript/googleMap.js"></script>
<!-- slider -->
<div id="jquery-ui-slider-wrap" style="position:absolute; top:80px;left:-15px;">
<!--<p style="color:red">plane</p>-->
<input type="text" id="jquery-ui-slider-value" /><div id="jquery-ui-slider"></div>
</div>
<div id="jquery-ui-slider-wrap2" style="position:absolute; top:465px; left:-15px;">
<!--<pstyle="color:red">floor</p>-->
<input type="text" id="jquery-ui-slider-value2" /> <div id="jquery-ui-slider2"></div>
</div>
<!-- hideControl -->
<a href="#" onClick="ctrlToggle();">
<img src='file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.1/Applications/B8A1BBCE-D69A-4AAC-BD16-F7236C7C33A6/KwinTabBar2.app/gray_ball2.png' style='opacity:0.3;width:40px;height:40px;'/>
</a>
<!--<div id="fb-root"></div>-->
<!--<script>
window.fbAsyncInit = function() {
FB.init({
appId : '142574589139226', // App ID
channelUrl : '//snsimglink.appspot.com/channel.html', // Channel File
status : false, // check login status true
cookie : false, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>-->
</body>
</html>kwin786http://www.blogger.com/profile/11636870499038520354noreply@blogger.com0tag:blogger.com,1999:blog-4631337081774196669.post-15654139228790892692012-06-07T01:40:00.001+09:002012-06-07T01:40:49.634+09:00Sunflower<!--<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">-->
<html lang="en">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0, user-scalable=YES" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<style type="text/css" media="screen">
body { background-color: black; color: white; font-family: 'Lucida Grande', Verdana, Arial; font-size: 12px;
background-image: -webkit-gradient(radial,50% 500,1,50% 500,400, from(rgba(255, 255, 255, 0.3)),to(rgba(255, 255, 255, 0)));
background-repeat: no-repeat; }
#container { width: 100%; height: 850px;
-webkit-perspective: 800; /* For compatibility with iPhone 3.0, we leave off the units here */
-webkit-perspective-origin: 50% 225px;
}
/* 0 -> -120 -100 -> -50 2012/02/07 */
#floor { position:absolute;top:-10%; left:-50% ; margin-top:-120px; margin-left:-50px;
-webkit-mask-image:-webkit-gradient(radial, center center, 0, center center, 350,from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
-webkit-transform: rotateX(90deg) rotateY(0deg) rotateZ(0deg) translateZ(-210px) translateY(10px);
}
#floorBallLeft { position:absolute;top:-10%; left:10% ; margin-top:0px; margin-left:-90px; height:50px; opacity:0.5;
-webkit-transform: rotateX(15deg) rotateY(45deg) rotateZ(0deg) translateZ(0px) translateY(0px); }
#floorBallRight { position:absolute;top:-10%; right:15% ; margin-top:0px; margin-right:-90px; height:50px; width:45px;opacity:0.5;
-webkit-transform: rotateX(10deg) rotateY(-45deg) rotateZ(0deg) translateZ(0px) translateY(0px); }
#floorBallHome { position:absolute;top:20%; left:35% ; margin-top:60px; margin-left:0px; height:35px; width:75px; opacity:0.3;
-webkit-transform: rotateX(15deg) rotateY(0deg) rotateZ(0deg) translateZ(0px) translateY(0px); }
/* #floorC { position:absolute;top:95%; left:50% ;-webkit-transform:scale(3);}
#floorR { position:absolute;top:90%; right:15% ; margin-top:0px; margin-right:0px; -webkit-transform:scale(3);}
#floorL { position:absolute;top:90%; left: 15% ; margin-top:0px; margin-left:0px ; -webkit-transform:scale(3);}*/
a:link { text-decoration: none; color:#DF1FBB; }
a:active { text-decoration: none; color:#DF1FBB; }
a:visited { text-decoration: none; color:#DF1FBB; } /* #555555 */
a:hover { text-decoration: none; color:#DF1FBB; }
li { display:inline-block; }
#floor_text{ position: absolute;
top:80%; left:-80%; height: 800px; width: 420px;
border: 0px solid white;
-webkit-box-sizing: border-box; text-align: left; font-family: Times, serif;
font-size: 20pt; font-color: white; /*font-size: 24pt; color: white; */
}
#stage { width: 100%; height: 100%; -webkit-transition: -webkit-transform 2s; -webkit-transform-style: preserve-3d; }
#shape { position: relative; top: 50px; margin: 0 auto; height: 400px; width: 204px; -webkit-transform-style: preserve-3d; }
#shapeX { margin: 0 auto; height: 200px; width: 200px; -webkit-transform-style: preserve-3d; }
.plane { position: absolute; top:0%; /*top:-150%; */
height: 400px; width: 204px; border: 0px solid white;
text-align: center; font-family: Times, serif; font-size: 124pt; color: black;
background-image: -webkit-gradient(linear, left bottom, right top,from(rgba(0,0,0,0)), to(rgba(0,0,0,1.0)));
background-repeat: no-repeat;
background-color: rgba( 0, 0, 0, 0.4); /* 0.6 */
-webkit-box-sizing: border-box;
-webkit-transition: -webkit-transform 2s, opacity 2s; -webkit-backface-visibility: hidden; /* hidden */
}
.subplane {position: absolute; width:204px;top:-335px; border: 0px; padding:0px; opacity:0.5;
-webkit-transition: -webkit-transform 2s,opacity 2s;-webkit-backface-visibility:visible;}
#shape.backfaces .plane { -webkit-backface-visibility: visible; }
@-webkit-keyframes spin { from { -webkit-transform: rotateY(0); } to { -webkit-transform: rotateY(-360deg); } }
@-webkit-keyframes spinR{ from { -webkit-transform: rotateY(0); } to { -webkit-transform: rotateY( 360deg); } }
@-webkit-keyframes spin0{ }
/* 上部の説明文の書式設定 背景は灰色で角を丸める .controls {width: 70%; height:10%; margin: 0 auto; padding: 5px 20px; */
.controls { opacity:0.6; /* width: 80%; height:40%; */
position:absolute;top:80%; left:34%; height:36px; /* bottom:1% */
margin: 0 auto; padding: 5px 10px; background-color: rgba(255, 255, 255, 0.15);
-webkit-border-radius: 48px; }
.ctlBtn { font-size:10pt; opacity:0.8; margin-bottom:7px;}
.controls > div { margin: 10px; }
/* ---------- ring2 styles ------------- */
.ring2 > .s1 { -webkit-transform: rotateY( 0deg) translateY( 0px) translateZ(-380px); }
.ring2 > .s2 { -webkit-transform: rotateY( -30deg) translateY( 0px) translateZ(-380px); }
.ring2 > .s3 { -webkit-transform: rotateY( -60deg) translateY( 0px) translateZ(-380px); }
.ring2 > .s4 { -webkit-transform: rotateY( -90deg) translateZ(-380px); }
.ring2 > .s5 { -webkit-transform: rotateY( -120deg) translateZ(-380px); }
.ring2 > .s6 { -webkit-transform: rotateY( -150deg) translateZ(-380px); }
.ring2 > .s7 { -webkit-transform: rotateY( -180deg) translateZ(-380px); }
.ring2 > .s8 { -webkit-transform: rotateY( -210deg) translateZ(-380px); }
.ring2 > .s9 { -webkit-transform: rotateY( 120deg) translateZ(-380px); }
.ring2 > .s10 { -webkit-transform: rotateY( 90deg) translateZ(-380px); }
.ring2 > .s11 { -webkit-transform: rotateY( -300deg) translateZ(-380px); }
.ring2 > .s12 { -webkit-transform: rotateY( -330deg) translateZ(-380px); }
.ring2 > .s13 { -webkit-transform: translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s14 { -webkit-transform: rotateY( -20deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s15 { -webkit-transform: rotateY( -40deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s16 { -webkit-transform: rotateY( -60deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s17 { -webkit-transform: rotateY( -80deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s18 { -webkit-transform: rotateY( -100deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s19 { -webkit-transform: rotateY( -120deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s20 { -webkit-transform: rotateY( -140deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s21 { -webkit-transform: rotateY( -160deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s22 { -webkit-transform: rotateY( -180deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s23 { -webkit-transform: rotateY( -200deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s24 { -webkit-transform: rotateY( -220deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s25 { -webkit-transform: rotateY( -240deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s26 { -webkit-transform: rotateY( -260deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s27 { -webkit-transform: rotateY( -280deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s28 { -webkit-transform: rotateY( -300deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s29 { -webkit-transform: rotateY( -320deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s30 { -webkit-transform: rotateY( -340deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.slideIn {-webkit-animation-timing-function: ease ;-webkit-animation-duration: 1500ms;-webkit-animation-name: slidein; margin-right:0px;}
@-webkit-keyframes slidein {from { margin-top: 120px; opacity:0; } to { margin-top: 0px; opacity:1; } }
.slideFloor {-webkit-animation-timing-function: ease;-webkit-animation-duration: 1000ms;-webkit-animation-name: slidein; margin-left:0px;}
@-webkit-keyframes slideFloor {from { margin-top: 120px; opacity:0; } to { margin-top: 0px; opacity:1;} }
.blur, .blur > img {margin: 0; padding: 0; border: 0; }
.blur { position: relative;display: inline-block;font-size: 0; line-height: 0; }
.blur:after { position: absolute;left: 0; top: 0; right: 0; bottom: 0;
-webkit-box-shadow: inset 0px 0px 15px 15px #fff;
box-shadow: inset 0px 0px 15px 15px #fff;
content: " ";
}
<!--
#jquery-ui-slider-wrap {padding:0px;text-align: center; width: 38px;border: 0px;border-radius:20px; background-color: rgba(255, 255, 255, 0.15);opacity:0.4; }
#jquery-ui-slider-value {border:0; color: red !important; font-weight: bold; background-color: transparent;margin: 5px; width: 40px; text-align: center; }
#jquery-ui-slider {height: 150px; width:25px;background-color:rgba(255, 255, 255, 0.15); opacity:0.2;opacity:0.2;}
#jquery-ui-slider-wrap2 {padding:0px;text-align: center;width: 38px; border: 0px;border-radius:10px; background-color: rgba(255, 255, 255, 0.15); opacity:0.4; }
#jquery-ui-slider-value2{ border: 0; color: red !important; font-weight: bold; background-color: transparent;margin: 5px;width: 40px; text-align: center; }
#jquery-ui-slider2 { height: 150px; width:25px; background-color:rgba(255, 255, 255, 0.15); opacity:0.2;}
-->
</style>
<link rel="stylesheet" href="file:/var/mobile/Applications/2F91D939-D4C5-492A-B38F-D220957EE3F2/KwinTabBar2.app/alexframework/src/javascript/jquery-ui-1.7.1.custom.css" type="text/css">
<script type="text/javascript" src="file:/var/mobile/Applications/2F91D939-D4C5-492A-B38F-D220957EE3F2/KwinTabBar2.app/alexframework/src/javascript/gear5.js"></script>
<script type="text/javascript" src="file:/var/mobile/Applications/2F91D939-D4C5-492A-B38F-D220957EE3F2/KwinTabBar2.app/alexframework/src/javascript/jquery.min.js"></script>
<script type="text/javascript" src="file:/var/mobile/Applications/2F91D939-D4C5-492A-B38F-D220957EE3F2/KwinTabBar2.app/alexframework/src/javascript/alex.core.js"></script>
<script type="text/javascript" src="file:/var/mobile/Applications/2F91D939-D4C5-492A-B38F-D220957EE3F2/KwinTabBar2.app/alexframework/src/javascript/alex.record.js"></script>
<script type="text/javascript" src="file:/var/mobile/Applications/2F91D939-D4C5-492A-B38F-D220957EE3F2/KwinTabBar2.app/alexframework/src/javascript/albums.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript" ></script>
<!--<script src="http://code.jquery.com/jquery.min.js"></script>-->
<!--<script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script>-->
<!--<script type="text/javascript" src="file:/var/mobile/Applications/2F91D939-D4C5-492A-B38F-D220957EE3F2/KwinTabBar2.app/alexframework/src/javascript/facebook.js"></script>-->
<script type="text/javascript" src="file:/var/mobile/Applications/2F91D939-D4C5-492A-B38F-D220957EE3F2/KwinTabBar2.app/alexframework/src/javascript/jquery.ui.min.js"></script>
<script type="text/javascript" src="file:/var/mobile/Applications/2F91D939-D4C5-492A-B38F-D220957EE3F2/KwinTabBar2.app/alexframework/src/javascript/jquery.ui.touch-punch.min.js"></script>
<script type="text/javascript">
function setCss(currentWidth){
//alert("screen.width:" + screen.width+","+window.innerWidth+","+window.orientation)
//if ( navigator.userAgent.match( /iPhone/i ) || navigator.userAgent.match( /iPod/i ) ) {
// var el = document.getElementById("ctrl1");
// el.style.position = 'absolute'; el.style.left = '0px';
// if(window.navigator.standalone){ el.style.top = '10px'; }
//}
if ( navigator.userAgent.match( /iPhone/i ) || navigator.userAgent.match( /iPod/i ) ) {
alert(navigator.userAgent)
var el = document.getElementById("ctrl1");
el.style.position = 'absolute';
el.style.left = '60px';
el.style.width = '180px';
if(window.navigator.standalone){ el.style.top = '10px'; }
}
shape.style.top='25%';
floor.style.top='30%';
floor.style.left='-50%';
var tY = -1*(720-586)/2;
var tY = 0;
///if (floorImg.naturalWidth > floorImg.naturalHeight ){
/// var tZ = 80 - (floorImg.naturalWidth - floorImg.naturalHeight );
///}else{ var tZ = 80; }
// alert("setCss");
// floor.style.webkitTransform='rotateX(90deg) rotateY(0deg) rotateZ(0deg) translateZ('+tZ+'px) translateY(10px)';
// var _rotateY = 90; shape.style.webkitTransform = 'rotateY('+_rotateY+'deg)';
//alert(window.orientation+","+currentWidth);
if (window.orientation == 90 || window.orientation == -90||currentWidth > 800){
ctrl2.style.top='60%';ctrl1.style.left='42%';
}
}
// $.browser.mobileSafari = /webkit.*mobile/i.test(navigator.userAgent)
// if ($.browser.mobileSafari) {
// $.getScript('/public/javascripts/jquery.ui.touch-punch.min.js');
// }
<!--
jQuery( function() {
jQuery( '#jquery-ui-slider' ) . slider( {
orientation: 'vertical', animate: 'slow', range: 'min', value: 70, min: -100, max: 300,
slide: function( event, ui ) {
jQuery( '#jquery-ui-slider-value' ) . val( ui.value );
var top = ui.value -100;
shape.style.top= top+ '%';
}
} );
jQuery( '#jquery-ui-slider-value' ) . val( jQuery( '#jquery-ui-slider' ) . slider( 'value' ) );
} );
jQuery( function() {
jQuery( '#jquery-ui-slider2' ) . slider( {
orientation: 'vertical', animate: 'slow', range: 'min', value: 70, min: -200, max: 300,
slide: function( event, ui ) {
jQuery( '#jquery-ui-slider-value2' ) . val( ui.value );
var top = ui.value -100; floor.style.top= top+ '%';
}
} );
jQuery( '#jquery-ui-slider-value2' ) . val( jQuery( '#jquery-ui-slider2' ) . slider( 'value' ) );
} );
jQuery( function() {
jQuery( '#jquery-ui-slider3' ).slider( {
animate:'slow', range: 'min', value: staticRotationY, min: -180, max: 360,
slide: function( event, ui ) {
staticRotationY = ui.value*Math.PI/180;
shape.style.webkitTransform = 'rotateY('+staticRotationY+'rad)';
}
});
} );
-->
</script>
</head>
<body onload="addAnimationHandlers('/var/mobile/Applications/2F91D939-D4C5-492A-B38F-D220957EE3F2/KwinTabBar2.app',90,'stop','0','768')">
<br/ >
<br />
<div id="getComment"></div>
<div id="container">
<div id="stage">
<div id="shape" class="ring2 ">
<div id="shapeX" class="ring2 ">
<img class="subplane s1 slideIn" id="sub1" style="padding:0px;"/><img class="subplane s2 slideIn" id="sub2" style="padding:0px;"/>
<img class="subplane s3 slideIn" id="sub3" style="padding:0px;"/><img class="subplane s4 slideIn" id="sub4" style="padding:0px;"/>
<img class="subplane s5 slideIn" id="sub5" style="padding:0px;"/><img class="subplane s6 slideIn" id="sub6" style="padding:0px;"/>
<img class="subplane s7 slideIn" id="sub7" style="padding:0px;"/><img class="subplane s8 slideIn" id="sub8" style="padding:0px;"/>
<img class="subplane s9 slideIn" id="sub9" style="padding:0px;"/><img class="subplane s10 slideIn" id="sub10" style="padding:0px;"/>
<img class="subplane s11 slideIn" id="sub11" style="padding:0px;"/><img class="subplane s12 slideIn" id="sub12" style="padding:0px;"/>
<div class="plane s1 slideIn" id="s1" style="margin-left:-13px; width:408px;">
<a href='#' onclick="pop('1','https://lh5.googleusercontent.com/-koSxHn1aQRw/T8oP7UJZawI/AAAAAAAADeg/G3mxXauqF2g/819px-Vincent_Willem_van_Gogh_128.jpg', '1/(null)','https://lh5.googleusercontent.com/-koSxHn1aQRw/T8oP7UJZawI/AAAAAAAADeg/G3mxXauqF2g/819px-Vincent_Willem_van_Gogh_128.jpg','https://picasaweb.google.com/102448397019191874652/Gogh#5749425385986681602','p','230','27','https://lh5.googleusercontent.com/-koSxHn1aQRw/T8oP7UJZawI/AAAAAAAADeg/G3mxXauqF2g/819px-Vincent_Willem_van_Gogh_128.jpg','0','0')">
<img src="https://lh5.googleusercontent.com/-koSxHn1aQRw/T8oP7UJZawI/AAAAAAAADeg/G3mxXauqF2g/819px-Vincent_Willem_van_Gogh_128.jpg" width="230" style="margin-left:5px; margin-top:16px; padding:0px;" id="i1"></a></div>
<div class="plane s3 slideIn" id="s3" style="margin-left:-8px; width:408px;">
<a href='#' onclick="pop('3','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi43fCoKmi700JrsUPLYL3DxT1hZxVrc-i_01cWxMUiUduIJuqSb31rus29ueW53UdkfLZLkHFOhrdk-nYnzswRkKOPx3PcmM6Ga19rEJQSYw3BKJQJ7xs9XmYa4onMy0ZlnCFyV4ej1iaZ/', '3/(null)','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi43fCoKmi700JrsUPLYL3DxT1hZxVrc-i_01cWxMUiUduIJuqSb31rus29ueW53UdkfLZLkHFOhrdk-nYnzswRkKOPx3PcmM6Ga19rEJQSYw3BKJQJ7xs9XmYa4onMy0ZlnCFyV4ej1iaZ/','https://picasaweb.google.com/102448397019191874652/Gogh#5749425422847809794','p','220','28','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi43fCoKmi700JrsUPLYL3DxT1hZxVrc-i_01cWxMUiUduIJuqSb31rus29ueW53UdkfLZLkHFOhrdk-nYnzswRkKOPx3PcmM6Ga19rEJQSYw3BKJQJ7xs9XmYa4onMy0ZlnCFyV4ej1iaZ/','0','0')">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi43fCoKmi700JrsUPLYL3DxT1hZxVrc-i_01cWxMUiUduIJuqSb31rus29ueW53UdkfLZLkHFOhrdk-nYnzswRkKOPx3PcmM6Ga19rEJQSYw3BKJQJ7xs9XmYa4onMy0ZlnCFyV4ej1iaZ/" width="220" style="margin-left:5px; margin-top:16px; padding:0px;" id="i3"></a></div>
<div class="plane s5 slideIn" id="s5" style="margin-left:-9px; width:408px;">
<a href='#' onclick="pop('5','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfwFpmCvLEb_tDOfRBIO6BfT8hQSO_x7oX7mp0pca7_oIEq8YaKULKr49kB908P7FPIHOKH6OIM7SyB03clxVpxtabjgqTR0f9-9exUrkq90zmAJQU7GkJjv8TRZlS5Q11n-l87JiUQN6l/', '5/(null)','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfwFpmCvLEb_tDOfRBIO6BfT8hQSO_x7oX7mp0pca7_oIEq8YaKULKr49kB908P7FPIHOKH6OIM7SyB03clxVpxtabjgqTR0f9-9exUrkq90zmAJQU7GkJjv8TRZlS5Q11n-l87JiUQN6l/','https://picasaweb.google.com/102448397019191874652/Gogh#5749425428754166994','p','223','33','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfwFpmCvLEb_tDOfRBIO6BfT8hQSO_x7oX7mp0pca7_oIEq8YaKULKr49kB908P7FPIHOKH6OIM7SyB03clxVpxtabjgqTR0f9-9exUrkq90zmAJQU7GkJjv8TRZlS5Q11n-l87JiUQN6l/','0','0')">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfwFpmCvLEb_tDOfRBIO6BfT8hQSO_x7oX7mp0pca7_oIEq8YaKULKr49kB908P7FPIHOKH6OIM7SyB03clxVpxtabjgqTR0f9-9exUrkq90zmAJQU7GkJjv8TRZlS5Q11n-l87JiUQN6l/" width="223" style="margin-left:5px; margin-top:16px; padding:0px;" id="i5"></a></div>
<div class="plane s7 slideIn" id="s7" style="margin-left:-14px; width:408px;">
<a href='#' onclick="pop('7','https://lh3.googleusercontent.com/-gZzKjJbHXKE/T8oP-rOK0MI/AAAAAAAADfE/ZwS6IGr6jeA/Van_Gogh_Twelve_Sunflowers.jpg', '7/(null)','https://lh3.googleusercontent.com/-gZzKjJbHXKE/T8oP-rOK0MI/AAAAAAAADfE/ZwS6IGr6jeA/Van_Gogh_Twelve_Sunflowers.jpg','https://picasaweb.google.com/102448397019191874652/Gogh#5749425443720319170','p','232','13','https://lh3.googleusercontent.com/-gZzKjJbHXKE/T8oP-rOK0MI/AAAAAAAADfE/ZwS6IGr6jeA/Van_Gogh_Twelve_Sunflowers.jpg','0','0')">
<img src="https://lh3.googleusercontent.com/-gZzKjJbHXKE/T8oP-rOK0MI/AAAAAAAADfE/ZwS6IGr6jeA/Van_Gogh_Twelve_Sunflowers.jpg" width="232" style="margin-left:5px; margin-top:16px; padding:0px;" id="i7"></a></div>
<div class="plane s9 slideIn" id="s9" style="margin-left:-10px; width:408px;">
<a href='#' onclick="pop('9','https://lh6.googleusercontent.com/-Zm0MkxyCTa8/T8oP8j_NINI/AAAAAAAADes/m7frTD8sx00/Van_Gogh_Vase_with_Three_Sunflowers.jpg', '9/(null)','https://lh6.googleusercontent.com/-Zm0MkxyCTa8/T8oP8j_NINI/AAAAAAAADes/m7frTD8sx00/Van_Gogh_Vase_with_Three_Sunflowers.jpg','https://picasaweb.google.com/102448397019191874652/Gogh#5749425407418769618','p','224','26','https://lh6.googleusercontent.com/-Zm0MkxyCTa8/T8oP8j_NINI/AAAAAAAADes/m7frTD8sx00/Van_Gogh_Vase_with_Three_Sunflowers.jpg','0','0')">
<img src="https://lh6.googleusercontent.com/-Zm0MkxyCTa8/T8oP8j_NINI/AAAAAAAADes/m7frTD8sx00/Van_Gogh_Vase_with_Three_Sunflowers.jpg" width="224" style="margin-left:5px; margin-top:16px; padding:0px;" id="i9"></a></div>
<div class="plane s11 slideIn" id="s11" >
<a href='#' onclick="pop('11','https://lh3.googleusercontent.com/-KlN_HLdEfqU/T8oP3dszFUI/AAAAAAAADd4/6SJQCO03lp0/Van_Gogh_Vase_with_Five_Sunflowers.jpg','11/(null)','https://lh3.googleusercontent.com/-KlN_HLdEfqU/T8oP3dszFUI/AAAAAAAADd4/6SJQCO03lp0/Van_Gogh_Vase_with_Five_Sunflowers.jpg','https://picasaweb.google.com/102448397019191874652/Gogh#5749425319831606594','p','160','34','https://lh3.googleusercontent.com/-KlN_HLdEfqU/T8oP3dszFUI/AAAAAAAADd4/6SJQCO03lp0/Van_Gogh_Vase_with_Five_Sunflowers.jpg','0','0')">
<img src="https://lh3.googleusercontent.com/-KlN_HLdEfqU/T8oP3dszFUI/AAAAAAAADd4/6SJQCO03lp0/Van_Gogh_Vase_with_Five_Sunflowers.jpg" width="160" style="margin-left:0px; margin-top:46px; padding:0px;" id="i11"></a></div>
<div id="floor" class="slideFloor" align="center">
<!--<img src='@@@' id="floorImg" width="500" height="500">-->
<img src='https://picasaweb.google.com/102448397019191874652/Gogh#5749425400249180642' id="floorImg" width="500" height="500">
</div>
<span id="floor_text"></span>
</div>
</div>
<!-- <span id="floor_text"></span>-->
</div>
</div>
<div class="controls" id="ctrl1" style="position:absolute;top:2%; left:38%;width:180px; height:32px; ">
<button onmouseover="toggleShape1(100)" onclick="toggleShape1(200)" class="ctlBtn">-Zoom</button>
<button onmouseover="toggleShape1(-100)" onclick="toggleShape1(-200)" class="ctlBtn">Zoom+</button>
</div>
<div class="controls" id="ctrl2" style="position:absolute;width:282px"><!-- style="position:absolute; top:30px;"-->
<table><tr><td style="height:32px">
<!-- west 左画面--><a href="#" onclick="runAction('changeCurrentTitle','0');">
<img src="file:/var/mobile/Applications/2F91D939-D4C5-492A-B38F-D220957EE3F2/KwinTabBar2.app/gray_ball2.png" style="position:absolute;top:-20%;margin-left:-100px; opacity:0.5; padding:0px;width:70px;height:40px;
-webkit-transform:rotateX(10deg) rotateY(50deg);">
</a>
<a href="#" onclick="runAction('fbAlbum','(null),https://picasaweb.google.com/102448397019191874652/Gogh#5749425400249180642,prev,0');">
<img src='file:/var/mobile/Applications/2F91D939-D4C5-492A-B38F-D220957EE3F2/KwinTabBar2.app/gray_ball.png'
style="-webkit-transform:rotateX(10deg) rotateY(45deg);height:40px; width:48px;opacity:0.5;margin-left:-15px;margin-bottom:3px"/></a>
</td><td>
<button onclick="autoRotate('left')" class="ctlBtn">
< </button> <button onclick="autoRotate('stop');" class="ctlBtn">■</button>
<button onclick="autoRotate('right')" class="ctlBtn"> > </button>
</td><td>
<a href="#" onclick="runAction('fbAlbum','(null),https://picasaweb.google.com/102448397019191874652/Gogh#5749425400249180642,next,0');">
<img src='file:/var/mobile/Applications/2F91D939-D4C5-492A-B38F-D220957EE3F2/KwinTabBar2.app/gray_ball.png'
style="-webkit-transform:rotateX(10deg) rotateY(-45deg);height:40px; width:48px;opacity:0.5;margin-right:-20px;margin-bottom:3px"/></a>
<!--<button onclick="toggleShape1(400)">-Zoom</button> <button onclick="toggleShape1(-400)">Zoom+</button>-->
</td></tr>
</table>
<!--east 右画面--><a href="#" onclick="runAction('changeCurrentTitle','0');">
<img src="file:/var/mobile/Applications/2F91D939-D4C5-492A-B38F-D220957EE3F2/KwinTabBar2.app/gray_ball2.png" style="position:absolute;top:-20%; right:-28%;opacity:0.5; margin-bottom:3px; width:70px;height:40px;
-webkit-transform:rotateX(10deg) rotateY(-50deg); " />
</a>
<div id="jquery-ui-slider3"></div>
</div>
<!--@movieUrl@ -->
<div style="position:absolute; bottom:10px;">
<a href="#" onclick='runAction("fbtest","")'>fbtest</a><br />
<a href="#" onclick='runAction("changeCurrentTitle","0")'>Home</a><br />
<a href="#" onclick='runAction("changeCurrentTitle","172")'>parentTitle</a><br />
</div>
<input id="_type" type="hidden" value="000" />
<div id="map" style="position:absolute;left:15%; width:600px; height:300px;"></div>
<script type="text/javascript" src="file:/var/mobile/Applications/2F91D939-D4C5-492A-B38F-D220957EE3F2/KwinTabBar2.app/alexframework/src/javascript/googleMap.js"></script>
<div id="jquery-ui-slider-wrap" style="position:absolute; top:80px;left:-15px;">
<p style="color:red">plane</p> <input type="text" id="jquery-ui-slider-value" /><div id="jquery-ui-slider"></div>
</div>
<div id="jquery-ui-slider-wrap2" style="position:absolute; top:465px; left:-15px;">
<pstyle="color:red">floor</p> <input type="text" id="jquery-ui-slider-value2" /> <div id="jquery-ui-slider2"></div>
</div>
<!--<div id="fb-root"></div>-->
<!--<script>
window.fbAsyncInit = function() {
FB.init({
appId : '142574589139226', // App ID
channelUrl : '//snsimglink.appspot.com/channel.html', // Channel File
status : false, // check login status true
cookie : false, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>-->
</body>
</html>kwin786http://www.blogger.com/profile/11636870499038520354noreply@blogger.com0tag:blogger.com,1999:blog-4631337081774196669.post-16173170051831742452012-06-05T11:50:00.002+09:002012-06-05T11:50:40.710+09:00Flcker<!--<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">-->
<html lang="en">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0, user-scalable=YES" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<style type="text/css" media="screen">
body { background-color: black; color: white; font-family: 'Lucida Grande', Verdana, Arial; font-size: 12px;
background-image: -webkit-gradient(radial,50% 500,1,50% 500,400, from(rgba(255, 255, 255, 0.3)),to(rgba(255, 255, 255, 0)));
background-repeat: no-repeat; }
#container { width: 100%; height: 850px;
-webkit-perspective: 800; /* For compatibility with iPhone 3.0, we leave off the units here */
-webkit-perspective-origin: 50% 225px;
}
/* 0 -> -120 -100 -> -50 2012/02/07 */
#floor { position:absolute;top:-10%; left:-50% ; margin-top:-120px; margin-left:-50px;
-webkit-mask-image:-webkit-gradient(radial, center center, 0, center center, 350,from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
-webkit-transform: rotateX(90deg) rotateY(0deg) rotateZ(0deg) translateZ(-210px) translateY(10px);
}
#floorBallLeft { position:absolute;top:-10%; left:10% ; margin-top:0px; margin-left:-90px; height:50px; opacity:0.5;
-webkit-transform: rotateX(15deg) rotateY(45deg) rotateZ(0deg) translateZ(0px) translateY(0px); }
#floorBallRight { position:absolute;top:-10%; right:15% ; margin-top:0px; margin-right:-90px; height:50px; width:45px;opacity:0.5;
-webkit-transform: rotateX(10deg) rotateY(-45deg) rotateZ(0deg) translateZ(0px) translateY(0px); }
#floorBallHome { position:absolute;top:20%; left:35% ; margin-top:60px; margin-left:0px; height:35px; width:75px; opacity:0.3;
-webkit-transform: rotateX(15deg) rotateY(0deg) rotateZ(0deg) translateZ(0px) translateY(0px); }
/* #floorC { position:absolute;top:95%; left:50% ;-webkit-transform:scale(3);}
#floorR { position:absolute;top:90%; right:15% ; margin-top:0px; margin-right:0px; -webkit-transform:scale(3);}
#floorL { position:absolute;top:90%; left: 15% ; margin-top:0px; margin-left:0px ; -webkit-transform:scale(3);}*/
a:link { text-decoration: none; color:#DF1FBB; }
a:active { text-decoration: none; color:#DF1FBB; }
a:visited { text-decoration: none; color:#DF1FBB; } /* #555555 */
a:hover { text-decoration: none; color:#DF1FBB; }
li { display:inline-block; }
#floor_text{ position: absolute;
top:80%; left:-80%; height: 800px; width: 420px;
border: 0px solid white;
-webkit-box-sizing: border-box; text-align: left; font-family: Times, serif;
font-size: 20pt; font-color: white; /*font-size: 24pt; color: white; */
}
#stage { width: 100%; height: 100%; -webkit-transition: -webkit-transform 2s; -webkit-transform-style: preserve-3d; }
#shape { position: relative; top: 50px; margin: 0 auto; height: 400px; width: 204px; -webkit-transform-style: preserve-3d; }
#shapeX { margin: 0 auto; height: 200px; width: 200px; -webkit-transform-style: preserve-3d; }
.plane { position: absolute; top:0%; /*top:-150%; */
height: 400px; width: 204px; border: 0px solid white;
text-align: center; font-family: Times, serif; font-size: 124pt; color: black;
background-image: -webkit-gradient(linear, left bottom, right top,from(rgba(0,0,0,0)), to(rgba(0,0,0,1.0)));
background-repeat: no-repeat;
background-color: rgba( 0, 0, 0, 0.4); /* 0.6 */
-webkit-box-sizing: border-box;
-webkit-transition: -webkit-transform 2s, opacity 2s; -webkit-backface-visibility: hidden; /* hidden */
}
.subplane {position: absolute; width:204px;top:-335px; border: 0px; padding:0px; opacity:0.5;
-webkit-transition: -webkit-transform 2s,opacity 2s;-webkit-backface-visibility:visible;}
#shape.backfaces .plane { -webkit-backface-visibility: visible; }
@-webkit-keyframes spin { from { -webkit-transform: rotateY(0); } to { -webkit-transform: rotateY(-360deg); } }
@-webkit-keyframes spinR{ from { -webkit-transform: rotateY(0); } to { -webkit-transform: rotateY( 360deg); } }
@-webkit-keyframes spin0{ }
/* 上部の説明文の書式設定 背景は灰色で角を丸める .controls {width: 70%; height:10%; margin: 0 auto; padding: 5px 20px; */
.controls { opacity:0.6; /* width: 80%; height:40%; */
position:absolute;top:80%; left:34%; height:36px; /* bottom:1% */
margin: 0 auto; padding: 5px 10px; background-color: rgba(255, 255, 255, 0.15);
-webkit-border-radius: 48px; }
.ctlBtn { font-size:10pt; opacity:0.8; margin-bottom:7px;}
.controls > div { margin: 10px; }
/* ---------- ring2 styles ------------- */
.ring2 > .s1 { -webkit-transform: rotateY( 0deg) translateY( 0px) translateZ(-380px); }
.ring2 > .s2 { -webkit-transform: rotateY( -30deg) translateY( 0px) translateZ(-380px); }
.ring2 > .s3 { -webkit-transform: rotateY( -60deg) translateY( 0px) translateZ(-380px); }
.ring2 > .s4 { -webkit-transform: rotateY( -90deg) translateZ(-380px); }
.ring2 > .s5 { -webkit-transform: rotateY( -120deg) translateZ(-380px); }
.ring2 > .s6 { -webkit-transform: rotateY( -150deg) translateZ(-380px); }
.ring2 > .s7 { -webkit-transform: rotateY( -180deg) translateZ(-380px); }
.ring2 > .s8 { -webkit-transform: rotateY( -210deg) translateZ(-380px); }
.ring2 > .s9 { -webkit-transform: rotateY( 120deg) translateZ(-380px); }
.ring2 > .s10 { -webkit-transform: rotateY( 90deg) translateZ(-380px); }
.ring2 > .s11 { -webkit-transform: rotateY( -300deg) translateZ(-380px); }
.ring2 > .s12 { -webkit-transform: rotateY( -330deg) translateZ(-380px); }
.ring2 > .s13 { -webkit-transform: translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s14 { -webkit-transform: rotateY( -20deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s15 { -webkit-transform: rotateY( -40deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s16 { -webkit-transform: rotateY( -60deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s17 { -webkit-transform: rotateY( -80deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s18 { -webkit-transform: rotateY( -100deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s19 { -webkit-transform: rotateY( -120deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s20 { -webkit-transform: rotateY( -140deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s21 { -webkit-transform: rotateY( -160deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s22 { -webkit-transform: rotateY( -180deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s23 { -webkit-transform: rotateY( -200deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s24 { -webkit-transform: rotateY( -220deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s25 { -webkit-transform: rotateY( -240deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s26 { -webkit-transform: rotateY( -260deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s27 { -webkit-transform: rotateY( -280deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s28 { -webkit-transform: rotateY( -300deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s29 { -webkit-transform: rotateY( -320deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s30 { -webkit-transform: rotateY( -340deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.slideIn {-webkit-animation-timing-function: ease ;-webkit-animation-duration: 1500ms;-webkit-animation-name: slidein; margin-right:0px;}
@-webkit-keyframes slidein {from { margin-top: 120px; opacity:0; } to { margin-top: 0px; opacity:1; } }
.slideFloor {-webkit-animation-timing-function: ease;-webkit-animation-duration: 1000ms;-webkit-animation-name: slidein; margin-left:0px;}
@-webkit-keyframes slideFloor {from { margin-top: 120px; opacity:0; } to { margin-top: 0px; opacity:1;} }
.blur, .blur > img {margin: 0; padding: 0; border: 0; }
.blur { position: relative;display: inline-block;font-size: 0; line-height: 0; }
.blur:after { position: absolute;left: 0; top: 0; right: 0; bottom: 0;
-webkit-box-shadow: inset 0px 0px 15px 15px #fff;
box-shadow: inset 0px 0px 15px 15px #fff;
content: " ";
}
<!--
#jquery-ui-slider-wrap {padding:0px;text-align: center; width: 38px;border: 0px;border-radius:20px; background-color: rgba(255, 255, 255, 0.15);opacity:0.4; }
#jquery-ui-slider-value {border:0; color: red !important; font-weight: bold; background-color: transparent;margin: 5px; width: 40px; text-align: center; }
#jquery-ui-slider {height: 150px; width:25px;background-color:rgba(255, 255, 255, 0.15); opacity:0.2;opacity:0.2;}
#jquery-ui-slider-wrap2 {padding:0px;text-align: center;width: 38px; border: 0px;border-radius:10px; background-color: rgba(255, 255, 255, 0.15); opacity:0.4; }
#jquery-ui-slider-value2{ border: 0; color: red !important; font-weight: bold; background-color: transparent;margin: 5px;width: 40px; text-align: center; }
#jquery-ui-slider2 { height: 150px; width:25px; background-color:rgba(255, 255, 255, 0.15); opacity:0.2;}
-->
</style>
<link rel="stylesheet" href="file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.1/Applications/C824E334-A191-47C0-B88A-5F38B5E95548/KwinTabBar2.app/alexframework/src/javascript/jquery-ui-1.7.1.custom.css" type="text/css">
<script type="text/javascript" src="file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.1/Applications/C824E334-A191-47C0-B88A-5F38B5E95548/KwinTabBar2.app/alexframework/src/javascript/gear5.js"></script>
<script type="text/javascript" src="file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.1/Applications/C824E334-A191-47C0-B88A-5F38B5E95548/KwinTabBar2.app/alexframework/src/javascript/jquery.min.js"></script>
<script type="text/javascript" src="file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.1/Applications/C824E334-A191-47C0-B88A-5F38B5E95548/KwinTabBar2.app/alexframework/src/javascript/alex.core.js"></script>
<script type="text/javascript" src="file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.1/Applications/C824E334-A191-47C0-B88A-5F38B5E95548/KwinTabBar2.app/alexframework/src/javascript/alex.record.js"></script>
<script type="text/javascript" src="file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.1/Applications/C824E334-A191-47C0-B88A-5F38B5E95548/KwinTabBar2.app/alexframework/src/javascript/albums.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript" ></script>
<!--<script src="http://code.jquery.com/jquery.min.js"></script>-->
<!--<script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script>-->
<!--<script type="text/javascript" src="file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.1/Applications/C824E334-A191-47C0-B88A-5F38B5E95548/KwinTabBar2.app/alexframework/src/javascript/facebook.js"></script>-->
<script type="text/javascript" src="file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.1/Applications/C824E334-A191-47C0-B88A-5F38B5E95548/KwinTabBar2.app/alexframework/src/javascript/jquery.ui.min.js"></script>
<script type="text/javascript" src="file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.1/Applications/C824E334-A191-47C0-B88A-5F38B5E95548/KwinTabBar2.app/alexframework/src/javascript/jquery.ui.touch-punch.min.js"></script>
<script type="text/javascript">
function setCss(currentWidth){
//alert("screen.width:" + screen.width+","+window.innerWidth+","+window.orientation)
//if ( navigator.userAgent.match( /iPhone/i ) || navigator.userAgent.match( /iPod/i ) ) {
// var el = document.getElementById("ctrl1");
// el.style.position = 'absolute'; el.style.left = '0px';
// if(window.navigator.standalone){ el.style.top = '10px'; }
//}
if ( navigator.userAgent.match( /iPhone/i ) || navigator.userAgent.match( /iPod/i ) ) {
alert(navigator.userAgent)
var el = document.getElementById("ctrl1");
el.style.position = 'absolute';
el.style.left = '60px';
el.style.width = '180px';
if(window.navigator.standalone){ el.style.top = '10px'; }
}
shape.style.top='25%';
floor.style.top='30%';
floor.style.left='-50%';
var tY = -1*(720-586)/2;
var tY = 0;
///if (floorImg.naturalWidth > floorImg.naturalHeight ){
/// var tZ = 80 - (floorImg.naturalWidth - floorImg.naturalHeight );
///}else{ var tZ = 80; }
// alert("setCss");
// floor.style.webkitTransform='rotateX(90deg) rotateY(0deg) rotateZ(0deg) translateZ('+tZ+'px) translateY(10px)';
// var _rotateY = 90; shape.style.webkitTransform = 'rotateY('+_rotateY+'deg)';
//alert(window.orientation+","+currentWidth);
if (window.orientation == 90 || window.orientation == -90||currentWidth > 800){
ctrl2.style.top='60%';ctrl1.style.left='42%';
}
}
// $.browser.mobileSafari = /webkit.*mobile/i.test(navigator.userAgent)
// if ($.browser.mobileSafari) {
// $.getScript('/public/javascripts/jquery.ui.touch-punch.min.js');
// }
<!--
jQuery( function() {
jQuery( '#jquery-ui-slider' ) . slider( {
orientation: 'vertical', animate: 'slow', range: 'min', value: 70, min: -100, max: 300,
slide: function( event, ui ) {
jQuery( '#jquery-ui-slider-value' ) . val( ui.value );
var top = ui.value -100;
shape.style.top= top+ '%';
}
} );
jQuery( '#jquery-ui-slider-value' ) . val( jQuery( '#jquery-ui-slider' ) . slider( 'value' ) );
} );
jQuery( function() {
jQuery( '#jquery-ui-slider2' ) . slider( {
orientation: 'vertical', animate: 'slow', range: 'min', value: 70, min: -200, max: 300,
slide: function( event, ui ) {
jQuery( '#jquery-ui-slider-value2' ) . val( ui.value );
var top = ui.value -100; floor.style.top= top+ '%';
}
} );
jQuery( '#jquery-ui-slider-value2' ) . val( jQuery( '#jquery-ui-slider2' ) . slider( 'value' ) );
} );
jQuery( function() {
jQuery( '#jquery-ui-slider3' ).slider( {
animate:'slow', range: 'min', value: staticRotationY, min: -180, max: 360,
slide: function( event, ui ) {
staticRotationY = ui.value*Math.PI/180;
shape.style.webkitTransform = 'rotateY('+staticRotationY+'rad)';
}
});
} );
-->
</script>
</head>
<body onload="addAnimationHandlers('/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.1/Applications/C824E334-A191-47C0-B88A-5F38B5E95548/KwinTabBar2.app',90,'stop','0','768')">
<br/ >
<br />
<div id="getComment"></div>
<div id="container">
<div id="stage">
<div id="shape" class="ring2 ">
<div id="shapeX" class="ring2 ">
<img class="subplane s1 slideIn" id="sub1" style="padding:0px;"/><img class="subplane s2 slideIn" id="sub2" style="padding:0px;"/>
<img class="subplane s3 slideIn" id="sub3" style="padding:0px;"/><img class="subplane s4 slideIn" id="sub4" style="padding:0px;"/>
<img class="subplane s5 slideIn" id="sub5" style="padding:0px;"/><img class="subplane s6 slideIn" id="sub6" style="padding:0px;"/>
<img class="subplane s7 slideIn" id="sub7" style="padding:0px;"/><img class="subplane s8 slideIn" id="sub8" style="padding:0px;"/>
<img class="subplane s9 slideIn" id="sub9" style="padding:0px;"/><img class="subplane s10 slideIn" id="sub10" style="padding:0px;"/>
<img class="subplane s11 slideIn" id="sub11" style="padding:0px;"/><img class="subplane s12 slideIn" id="sub12" style="padding:0px;"/>
<div class="plane s1 slideIn" id="s1" >
<a href='#' onclick="pop('1','http://farm3.staticflickr.com/2097/2652194353_d8d8063178_z.jpg','1/(null)','http://farm3.staticflickr.com/2097/2652194353_d8d8063178_z.jpg','http://farm3.staticflickr.com/2097/2652194353_d8d8063178_z.jpg','p','160','16','http://farm3.staticflickr.com/2097/2652194353_d8d8063178_z.jpg','0','0')">
<img src="http://farm3.staticflickr.com/2097/2652194353_d8d8063178_z.jpg" width="160" style="margin-left:0px; margin-top:134px; padding:0px;" id="i1"></a></div>
<div class="plane s2 slideIn" id="s2" >
<a href='#' onclick="pop('2','http://farm1.staticflickr.com/144/327094242_91f1daca7e_z.jpg','2/(null)','http://farm1.staticflickr.com/144/327094242_91f1daca7e_z.jpg','http://farm1.staticflickr.com/144/327094242_91f1daca7e_z.jpg','p','160','17','http://farm1.staticflickr.com/144/327094242_91f1daca7e_z.jpg','0','0')">
<img src="http://farm1.staticflickr.com/144/327094242_91f1daca7e_z.jpg" width="160" style="margin-left:0px; margin-top:134px; padding:0px;" id="i2"></a></div>
<div class="plane s3 slideIn" id="s3" >
<a href='#' onclick="pop('3','http://farm1.staticflickr.com/139/327093353_5b8070843f_z.jpg','3/(null)','http://farm1.staticflickr.com/139/327093353_5b8070843f_z.jpg','http://farm1.staticflickr.com/139/327093353_5b8070843f_z.jpg','p','160','18','http://farm1.staticflickr.com/139/327093353_5b8070843f_z.jpg','0','0')">
<img src="http://farm1.staticflickr.com/139/327093353_5b8070843f_z.jpg" width="160" style="margin-left:0px; margin-top:134px; padding:0px;" id="i3"></a></div>
<div class="plane s4 slideIn" id="s4" >
<a href='#' onclick="pop('4','http://farm1.staticflickr.com/142/327094801_d2e7f2b2ab_z.jpg','4/(null)','http://farm1.staticflickr.com/142/327094801_d2e7f2b2ab_z.jpg','http://farm1.staticflickr.com/142/327094801_d2e7f2b2ab_z.jpg','p','160','19','http://farm1.staticflickr.com/142/327094801_d2e7f2b2ab_z.jpg','0','0')">
<img src="http://farm1.staticflickr.com/142/327094801_d2e7f2b2ab_z.jpg" width="160" style="margin-left:0px; margin-top:134px; padding:0px;" id="i4"></a></div>
<div class="plane s5 slideIn" id="s5" >
<a href='#' onclick="pop('5','http://farm1.staticflickr.com/72/182476019_5b0b996e24_z.jpg','5/(null)','http://farm1.staticflickr.com/72/182476019_5b0b996e24_z.jpg','http://farm1.staticflickr.com/72/182476019_5b0b996e24_z.jpg','p','160','20','http://farm1.staticflickr.com/72/182476019_5b0b996e24_z.jpg','0','0')">
<img src="http://farm1.staticflickr.com/72/182476019_5b0b996e24_z.jpg" width="160" style="margin-left:0px; margin-top:134px; padding:0px;" id="i5"></a></div>
<div class="plane s6 slideIn" id="s6" >
<a href='#' onclick="pop('6','http://farm1.staticflickr.com/70/182476004_3e6bf884cf_z.jpg','6/(null)','http://farm1.staticflickr.com/70/182476004_3e6bf884cf_z.jpg','http://farm1.staticflickr.com/70/182476004_3e6bf884cf_z.jpg','p','160','21','http://farm1.staticflickr.com/70/182476004_3e6bf884cf_z.jpg','0','0')">
<img src="http://farm1.staticflickr.com/70/182476004_3e6bf884cf_z.jpg" width="160" style="margin-left:0px; margin-top:134px; padding:0px;" id="i6"></a></div>
<div class="plane s7 slideIn" id="s7" >
<a href='#' onclick="pop('7','http://farm1.staticflickr.com/58/182462193_8e30467c62_z.jpg','7/(null)','http://farm1.staticflickr.com/58/182462193_8e30467c62_z.jpg','http://farm1.staticflickr.com/58/182462193_8e30467c62_z.jpg','p','160','22','http://farm1.staticflickr.com/58/182462193_8e30467c62_z.jpg','0','0')">
<img src="http://farm1.staticflickr.com/58/182462193_8e30467c62_z.jpg" width="160" style="margin-left:0px; margin-top:134px; padding:0px;" id="i7"></a></div>
<div class="plane s8 slideIn" id="s8" >
<a href='#' onclick="pop('8','http://farm1.staticflickr.com/69/182462146_92ea2411b3_z.jpg','8/(null)','http://farm1.staticflickr.com/69/182462146_92ea2411b3_z.jpg','http://farm1.staticflickr.com/69/182462146_92ea2411b3_z.jpg','p','160','23','http://farm1.staticflickr.com/69/182462146_92ea2411b3_z.jpg','0','0')">
<img src="http://farm1.staticflickr.com/69/182462146_92ea2411b3_z.jpg" width="160" style="margin-left:0px; margin-top:134px; padding:0px;" id="i8"></a></div>
<div id="floor" class="slideFloor" align="center">
<!--<img src='@@@' id="floorImg" width="500" height="500">-->
<img src='http://api.flickr.com/services/feeds/photoset.gne?set=72157594188245697&nsid=98787711@N00' id="floorImg" width="500" height="500">
</div>
<span id="floor_text"></span>
</div>
</div>
<!-- <span id="floor_text"></span>-->
</div>
</div>
<div class="controls" id="ctrl1" style="position:absolute;top:2%; left:38%;width:180px; height:32px; ">
<button onmouseover="toggleShape1(100)" onclick="toggleShape1(200)" class="ctlBtn">-Zoom</button>
<button onmouseover="toggleShape1(-100)" onclick="toggleShape1(-200)" class="ctlBtn">Zoom+</button>
</div>
<div class="controls" id="ctrl2" style="position:absolute;width:282px"><!-- style="position:absolute; top:30px;"-->
<table><tr><td style="height:32px">
<!-- west 左画面--><a href="#" onclick="runAction('changeCurrentTitle','0');">
<img src="file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.1/Applications/C824E334-A191-47C0-B88A-5F38B5E95548/KwinTabBar2.app/gray_ball2.png" style="position:absolute;top:-20%;margin-left:-100px; opacity:0.5; padding:0px;width:70px;height:40px;
-webkit-transform:rotateX(10deg) rotateY(50deg);">
</a>
<a href="#" onclick="runAction('fbAlbum','0,http://api.flickr.com/services/feeds/photoset.gne?set=72157594188245697&nsid=98787711@N00,prev,0');">
<img src='file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.1/Applications/C824E334-A191-47C0-B88A-5F38B5E95548/KwinTabBar2.app/gray_ball.png'
style="-webkit-transform:rotateX(10deg) rotateY(45deg);height:40px; width:48px;opacity:0.5;margin-left:-15px;margin-bottom:3px"/></a>
</td><td>
<button onclick="autoRotate('left')" class="ctlBtn">
< </button> <button onclick="autoRotate('stop');" class="ctlBtn">■</button>
<button onclick="autoRotate('right')" class="ctlBtn"> > </button>
</td><td>
<a href="#" onclick="runAction('fbAlbum','0,http://api.flickr.com/services/feeds/photoset.gne?set=72157594188245697&nsid=98787711@N00,next,0');">
<img src='file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.1/Applications/C824E334-A191-47C0-B88A-5F38B5E95548/KwinTabBar2.app/gray_ball.png'
style="-webkit-transform:rotateX(10deg) rotateY(-45deg);height:40px; width:48px;opacity:0.5;margin-right:-20px;margin-bottom:3px"/></a>
<!--<button onclick="toggleShape1(400)">-Zoom</button> <button onclick="toggleShape1(-400)">Zoom+</button>-->
</td></tr>
</table>
<!--east 右画面--><a href="#" onclick="runAction('changeCurrentTitle','0');">
<img src="file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.1/Applications/C824E334-A191-47C0-B88A-5F38B5E95548/KwinTabBar2.app/gray_ball2.png" style="position:absolute;top:-20%; right:-28%;opacity:0.5; margin-bottom:3px; width:70px;height:40px;
-webkit-transform:rotateX(10deg) rotateY(-50deg); " />
</a>
<div id="jquery-ui-slider3"></div>
</div>
<!--@movieUrl@ -->
<div style="position:absolute; bottom:10px;">
<a href="#" onclick='runAction("fbtest","")'>fbtest</a><br />
<a href="#" onclick='runAction("changeCurrentTitle","0")'>Home</a><br />
<a href="#" onclick='runAction("changeCurrentTitle","0")'>parentTitle</a><br />
</div>
<input id="_type" type="hidden" value="000" />
<div id="map" style="position:absolute;left:15%; width:600px; height:300px;"></div>
<script type="text/javascript" src="file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.1/Applications/C824E334-A191-47C0-B88A-5F38B5E95548/KwinTabBar2.app/alexframework/src/javascript/googleMap.js"></script>
<div id="jquery-ui-slider-wrap" style="position:absolute; top:80px;left:-15px;">
<p style="color:red">plane</p> <input type="text" id="jquery-ui-slider-value" /><div id="jquery-ui-slider"></div>
</div>
<div id="jquery-ui-slider-wrap2" style="position:absolute; top:465px; left:-15px;">
<pstyle="color:red">floor</p> <input type="text" id="jquery-ui-slider-value2" /> <div id="jquery-ui-slider2"></div>
</div>
<!--<div id="fb-root"></div>-->
<!--<script>
window.fbAsyncInit = function() {
FB.init({
appId : '142574589139226', // App ID
channelUrl : '//snsimglink.appspot.com/channel.html', // Channel File
status : false, // check login status true
cookie : false, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>-->
</body>
</html>kwin786http://www.blogger.com/profile/11636870499038520354noreply@blogger.com0tag:blogger.com,1999:blog-4631337081774196669.post-40320432192740206502012-05-31T00:19:00.002+09:002012-05-31T14:08:18.654+09:00Age of Rembrandt<!--<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">-->
<html lang="en">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0, user-scalable=YES" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<style type="text/css" media="screen">
body { background-color: black; color: white; font-family: 'Lucida Grande', Verdana, Arial; font-size: 12px;
background-image: -webkit-gradient(radial,50% 500,1,50% 500,400, from(rgba(255, 255, 255, 0.3)),to(rgba(255, 255, 255, 0)));
background-repeat: no-repeat; }
#container { width: 100%; height: 850px;
-webkit-perspective: 800; /* For compatibility with iPhone 3.0, we leave off the units here */
-webkit-perspective-origin: 50% 225px;
}
/* 0 -> -120 -100 -> -50 2012/02/07 */
#floor { position:absolute;top:-10%; left:-50% ; margin-top:-120px; margin-left:-50px;
-webkit-mask-image:-webkit-gradient(radial, center center, 0, center center, 350,from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
-webkit-transform: rotateX(90deg) rotateY(0deg) rotateZ(0deg) translateZ(-210px) translateY(10px);
}
#floorBallLeft { position:absolute;top:-10%; left:10% ; margin-top:0px; margin-left:-90px; height:50px; opacity:0.5;
-webkit-transform: rotateX(15deg) rotateY(45deg) rotateZ(0deg) translateZ(0px) translateY(0px); }
#floorBallRight { position:absolute;top:-10%; right:15% ; margin-top:0px; margin-right:-90px; height:50px; width:45px;opacity:0.5;
-webkit-transform: rotateX(10deg) rotateY(-45deg) rotateZ(0deg) translateZ(0px) translateY(0px); }
#floorBallHome { position:absolute;top:20%; left:35% ; margin-top:60px; margin-left:0px; height:35px; width:75px; opacity:0.3;
-webkit-transform: rotateX(15deg) rotateY(0deg) rotateZ(0deg) translateZ(0px) translateY(0px); }
/* #floorC { position:absolute;top:95%; left:50% ;-webkit-transform:scale(3);}
#floorR { position:absolute;top:90%; right:15% ; margin-top:0px; margin-right:0px; -webkit-transform:scale(3);}
#floorL { position:absolute;top:90%; left: 15% ; margin-top:0px; margin-left:0px ; -webkit-transform:scale(3);}*/
a:link { text-decoration: none; color:#DF1FBB; }
a:active { text-decoration: none; color:#DF1FBB; }
a:visited { text-decoration: none; color:#DF1FBB; } /* #555555 */
a:hover { text-decoration: none; color:#DF1FBB; }
li { display:inline-block; }
#floor_text{ position: absolute;
top:80%; left:-80%; height: 800px; width: 420px;
border: 0px solid white;
-webkit-box-sizing: border-box; text-align: left; font-family: Times, serif;
font-size: 20pt; font-color: white; /*font-size: 24pt; color: white; */
}
#stage { width: 100%; height: 100%; -webkit-transition: -webkit-transform 2s; -webkit-transform-style: preserve-3d; }
#shape { position: relative; top: 50px; margin: 0 auto; height: 400px; width: 204px; -webkit-transform-style: preserve-3d; }
#shapeX { margin: 0 auto; height: 200px; width: 200px; -webkit-transform-style: preserve-3d; }
.plane { position: absolute; top:0%; /*top:-150%; */
height: 400px; width: 204px; border: 0px solid white;
text-align: center; font-family: Times, serif; font-size: 124pt; color: black;
background-image: -webkit-gradient(linear, left bottom, right top,from(rgba(0,0,0,0)), to(rgba(0,0,0,1.0)));
background-repeat: no-repeat;
background-color: rgba( 0, 0, 0, 0.4); /* 0.6 */
-webkit-box-sizing: border-box;
-webkit-transition: -webkit-transform 2s, opacity 2s; -webkit-backface-visibility: hidden; /* hidden */
}
.subplane {position: absolute; width:204px;top:-335px; border: 0px; padding:0px; opacity:0.5;
-webkit-transition: -webkit-transform 2s,opacity 2s;-webkit-backface-visibility:visible;}
#shape.backfaces .plane { -webkit-backface-visibility: visible; }
@-webkit-keyframes spin { from { -webkit-transform: rotateY(0); } to { -webkit-transform: rotateY(-360deg); } }
@-webkit-keyframes spinR{ from { -webkit-transform: rotateY(0); } to { -webkit-transform: rotateY( 360deg); } }
@-webkit-keyframes spin0{ }
/* 上部の説明文の書式設定 背景は灰色で角を丸める .controls {width: 70%; height:10%; margin: 0 auto; padding: 5px 20px; */
.controls { opacity:0.6; /* width: 80%; height:40%; */
position:absolute;top:80%; left:34%; height:36px; /* bottom:1% */
margin: 0 auto; padding: 5px 10px; background-color: rgba(255, 255, 255, 0.15);
-webkit-border-radius: 48px; }
.ctlBtn { font-size:10pt; opacity:0.8; margin-bottom:7px;}
.controls > div { margin: 10px; }
/* ---------- ring2 styles ------------- */
.ring2 > .s1 { -webkit-transform: rotateY( 0deg) translateY( 0px) translateZ(-380px); }
.ring2 > .s2 { -webkit-transform: rotateY( -30deg) translateY( 0px) translateZ(-380px); }
.ring2 > .s3 { -webkit-transform: rotateY( -60deg) translateY( 0px) translateZ(-380px); }
.ring2 > .s4 { -webkit-transform: rotateY( -90deg) translateZ(-380px); }
.ring2 > .s5 { -webkit-transform: rotateY( -120deg) translateZ(-380px); }
.ring2 > .s6 { -webkit-transform: rotateY( -150deg) translateZ(-380px); }
.ring2 > .s7 { -webkit-transform: rotateY( -180deg) translateZ(-380px); }
.ring2 > .s8 { -webkit-transform: rotateY( -210deg) translateZ(-380px); }
.ring2 > .s9 { -webkit-transform: rotateY( 120deg) translateZ(-380px); }
.ring2 > .s10 { -webkit-transform: rotateY( 90deg) translateZ(-380px); }
.ring2 > .s11 { -webkit-transform: rotateY( -300deg) translateZ(-380px); }
.ring2 > .s12 { -webkit-transform: rotateY( -330deg) translateZ(-380px); }
.ring2 > .s13 { -webkit-transform: translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s14 { -webkit-transform: rotateY( -20deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s15 { -webkit-transform: rotateY( -40deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s16 { -webkit-transform: rotateY( -60deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s17 { -webkit-transform: rotateY( -80deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s18 { -webkit-transform: rotateY( -100deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s19 { -webkit-transform: rotateY( -120deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s20 { -webkit-transform: rotateY( -140deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s21 { -webkit-transform: rotateY( -160deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s22 { -webkit-transform: rotateY( -180deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s23 { -webkit-transform: rotateY( -200deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s24 { -webkit-transform: rotateY( -220deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s25 { -webkit-transform: rotateY( -240deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s26 { -webkit-transform: rotateY( -260deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s27 { -webkit-transform: rotateY( -280deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s28 { -webkit-transform: rotateY( -300deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s29 { -webkit-transform: rotateY( -320deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s30 { -webkit-transform: rotateY( -340deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.slideIn {-webkit-animation-timing-function: ease ;-webkit-animation-duration: 1500ms;-webkit-animation-name: slidein; margin-right:0px;}
@-webkit-keyframes slidein {from { margin-top: 120px; opacity:0; } to { margin-top: 0px; opacity:1; } }
.slideFloor {-webkit-animation-timing-function: ease;-webkit-animation-duration: 1000ms;-webkit-animation-name: slidein; margin-left:0px;}
@-webkit-keyframes slideFloor {from { margin-top: 120px; opacity:0; } to { margin-top: 0px; opacity:1;} }
<!--
#jquery-ui-slider-wrap {padding:0px;text-align: center; width: 38px;border: 0px;border-radius:20px; background-color: rgba(255, 255, 255, 0.15);opacity:0.4; }
#jquery-ui-slider-value {border:0; color: red !important; font-weight: bold; background-color: transparent;margin: 5px; width: 40px; text-align: center; }
#jquery-ui-slider {height: 150px; width:25px;background-color:rgba(255, 255, 255, 0.15); opacity:0.2;opacity:0.2;}
#jquery-ui-slider-wrap2 {padding:0px;text-align: center;width: 38px; border: 0px;border-radius:10px; background-color: rgba(255, 255, 255, 0.15); opacity:0.4; }
#jquery-ui-slider-value2{ border: 0; color: red !important; font-weight: bold; background-color: transparent;margin: 5px;width: 40px; text-align: center; }
#jquery-ui-slider2 { height: 150px; width:25px; background-color:rgba(255, 255, 255, 0.15); opacity:0.2;}
-->
</style>
<link rel="stylesheet" href="file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.1/Applications/432BCA59-DCAF-4839-AD76-8F3731EA7DBD/KwinTabBar2.app/alexframework/src/javascript/jquery-ui-1.7.1.custom.css" type="text/css">
<script type="text/javascript" src="file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.1/Applications/432BCA59-DCAF-4839-AD76-8F3731EA7DBD/KwinTabBar2.app/alexframework/src/javascript/gear5.js"></script>
<script type="text/javascript" src="file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.1/Applications/432BCA59-DCAF-4839-AD76-8F3731EA7DBD/KwinTabBar2.app/alexframework/src/javascript/jquery.min.js"></script>
<script type="text/javascript" src="file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.1/Applications/432BCA59-DCAF-4839-AD76-8F3731EA7DBD/KwinTabBar2.app/alexframework/src/javascript/alex.core.js"></script>
<script type="text/javascript" src="file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.1/Applications/432BCA59-DCAF-4839-AD76-8F3731EA7DBD/KwinTabBar2.app/alexframework/src/javascript/alex.record.js"></script>
<script type="text/javascript" src="file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.1/Applications/432BCA59-DCAF-4839-AD76-8F3731EA7DBD/KwinTabBar2.app/alexframework/src/javascript/albums.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript" ></script>
<!--<script src="http://code.jquery.com/jquery.min.js"></script>-->
<!--<script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script>-->
<!--<script type="text/javascript" src="file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.1/Applications/432BCA59-DCAF-4839-AD76-8F3731EA7DBD/KwinTabBar2.app/alexframework/src/javascript/facebook.js"></script>-->
<script type="text/javascript" src="file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.1/Applications/432BCA59-DCAF-4839-AD76-8F3731EA7DBD/KwinTabBar2.app/alexframework/src/javascript/jquery.ui.min.js"></script>
<script type="text/javascript" src="file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.1/Applications/432BCA59-DCAF-4839-AD76-8F3731EA7DBD/KwinTabBar2.app/alexframework/src/javascript/jquery.ui.touch-punch.min.js"></script>
<script type="text/javascript">
function setCss(currentWidth){
//alert("screen.width:" + screen.width+","+window.innerWidth+","+window.orientation)
//if ( navigator.userAgent.match( /iPhone/i ) || navigator.userAgent.match( /iPod/i ) ) {
// var el = document.getElementById("ctrl1");
// el.style.position = 'absolute'; el.style.left = '0px';
// if(window.navigator.standalone){ el.style.top = '10px'; }
//}
if ( navigator.userAgent.match( /iPhone/i ) || navigator.userAgent.match( /iPod/i ) ) {
alert(navigator.userAgent)
var el = document.getElementById("ctrl1");
el.style.position = 'absolute';
el.style.left = '60px';
el.style.width = '180px';
if(window.navigator.standalone){ el.style.top = '10px'; }
}
shape.style.top='25%';
floor.style.top='30%';
floor.style.left='-50%';
var tY = -1*(720-586)/2;
var tY = 0;
if (window.orientation == 90 || window.orientation == -90||currentWidth > 800){
ctrl2.style.top='60%';ctrl1.style.left='42%';
}
}
<!--
jQuery( function() {
jQuery( '#jquery-ui-slider' ) . slider( {
orientation: 'vertical', animate: 'slow', range: 'min', value: 70, min: -100, max: 300,
slide: function( event, ui ) {
jQuery( '#jquery-ui-slider-value' ) . val( ui.value );
var top = ui.value -100;
shape.style.top= top+ '%';
}
} );
jQuery( '#jquery-ui-slider-value' ) . val( jQuery( '#jquery-ui-slider' ) . slider( 'value' ) );
} );
jQuery( function() {
jQuery( '#jquery-ui-slider2' ) . slider( {
orientation: 'vertical', animate: 'slow', range: 'min', value: 70, min: -200, max: 300,
slide: function( event, ui ) {
jQuery( '#jquery-ui-slider-value2' ) . val( ui.value );
var top = ui.value -100; floor.style.top= top+ '%';
}
} );
jQuery( '#jquery-ui-slider-value2' ) . val( jQuery( '#jquery-ui-slider2' ) . slider( 'value' ) );
} );
jQuery( function() {
jQuery( '#jquery-ui-slider3' ).slider( {
animate:'slow', range: 'min', value: staticRotationY, min: -180, max: 360,
slide: function( event, ui ) {
staticRotationY = ui.value*Math.PI/180;
shape.style.webkitTransform = 'rotateY('+staticRotationY+'rad)';
}
});
} );
-->
</script>
</head>
<body onload="addAnimationHandlers('/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.1/Applications/432BCA59-DCAF-4839-AD76-8F3731EA7DBD/KwinTabBar2.app',90,'stop','0','768')">
<br/ >
<br />
<div id="getComment"></div>
<div id="container">
<div id="stage">
<div id="shape" class="ring2 ">
<div id="shapeX" class="ring2 ">
<img class="subplane s1 slideIn" id="sub1" style="padding:0px;"/><img class="subplane s2 slideIn" id="sub2" style="padding:0px;"/>
<img class="subplane s3 slideIn" id="sub3" style="padding:0px;"/><img class="subplane s4 slideIn" id="sub4" style="padding:0px;"/>
<img class="subplane s5 slideIn" id="sub5" style="padding:0px;"/><img class="subplane s6 slideIn" id="sub6" style="padding:0px;"/>
<img class="subplane s7 slideIn" id="sub7" style="padding:0px;"/><img class="subplane s8 slideIn" id="sub8" style="padding:0px;"/>
<img class="subplane s9 slideIn" id="sub9" style="padding:0px;"/><img class="subplane s10 slideIn" id="sub10" style="padding:0px;"/>
<img class="subplane s11 slideIn" id="sub11" style="padding:0px;"/><img class="subplane s12 slideIn" id="sub12" style="padding:0px;"/>
<div class="plane s1 slideIn" id="s1" >
<a href='#' onclick="pop('1','https://lh3.googleusercontent.com/-d-3DoXo_MvA/Tbkleam4ozI/AAAAAAAAC7E/XeJdTQtQx7c/pieta.png','1/(null)','https://lh3.googleusercontent.com/-d-3DoXo_MvA/Tbkleam4ozI/AAAAAAAAC7E/XeJdTQtQx7c/pieta.png','https://picasaweb.google.com/102448397019191874652/Age_of_Rembrandt#5600548816080642866','p','160','41','https://lh3.googleusercontent.com/-d-3DoXo_MvA/Tbkleam4ozI/AAAAAAAAC7E/XeJdTQtQx7c/pieta.png','0','16')">
<img src="https://lh3.googleusercontent.com/-d-3DoXo_MvA/Tbkleam4ozI/AAAAAAAAC7E/XeJdTQtQx7c/pieta.png" width="160" style="margin-left:0px; margin-top:100px; padding:0px;" id="i1"></a></div>
<div class="plane s2 slideIn" id="s2" >
<a href='#' onclick="pop('2','https://lh4.googleusercontent.com/-9FSTiTUJPNE/SStb2liC21I/AAAAAAAABA0/NdgSPR1U3_M/Age_of_Rembrandt_view01.jpg','2/(null)','https://lh4.googleusercontent.com/-9FSTiTUJPNE/SStb2liC21I/AAAAAAAABA0/NdgSPR1U3_M/Age_of_Rembrandt_view01.jpg','https://picasaweb.google.com/102448397019191874652/Age_of_Rembrandt#5272408782113266514','p','160','42','https://lh4.googleusercontent.com/-9FSTiTUJPNE/SStb2liC21I/AAAAAAAABA0/NdgSPR1U3_M/Age_of_Rembrandt_view01.jpg','0','16')">
<img src="https://lh4.googleusercontent.com/-9FSTiTUJPNE/SStb2liC21I/AAAAAAAABA0/NdgSPR1U3_M/Age_of_Rembrandt_view01.jpg" width="160" style="margin-left:0px; margin-top:100px; padding:0px;" id="i2"></a></div>
<div class="plane s3 slideIn" id="s3" >
<a href='#' onclick="pop('3','https://lh5.googleusercontent.com/-_YB4uw97o1o/SSd7e9uW8yI/AAAAAAAAA9w/7UdIMLu4-90/%2525E3%252582%2525B7%2525E3%252583%2525A3%2525E3%252583%2525AB%2525E3%252583%2525AB%2525E3%252581%25258B%2525E3%252582%252589%2525E3%252582%2525AB%2525E3%252583%2525BC%2525E3%252583%2525AB%2525EF%2525BC%252595%2525E4%2525B8%2525964.jpg','3/(null)','https://lh5.googleusercontent.com/-_YB4uw97o1o/SSd7e9uW8yI/AAAAAAAAA9w/7UdIMLu4-90/%2525E3%252582%2525B7%2525E3%252583%2525A3%2525E3%252583%2525AB%2525E3%252583%2525AB%2525E3%252581%25258B%2525E3%252582%252589%2525E3%252582%2525AB%2525E3%252583%2525BC%2525E3%252583%2525AB%2525EF%2525BC%252595%2525E4%2525B8%2525964.jpg','https://picasaweb.google.com/102448397019191874652/Age_of_Rembrandt#5271317660755751714','p','160','43','https://lh5.googleusercontent.com/-_YB4uw97o1o/SSd7e9uW8yI/AAAAAAAAA9w/7UdIMLu4-90/%2525E3%252582%2525B7%2525E3%252583%2525A3%2525E3%252583%2525AB%2525E3%252583%2525AB%2525E3%252581%25258B%2525E3%252582%252589%2525E3%252582%2525AB%2525E3%252583%2525BC%2525E3%252583%2525AB%2525EF%2525BC%252595%2525E4%2525B8%2525964.jpg','0','16')">
<img src="https://lh5.googleusercontent.com/-_YB4uw97o1o/SSd7e9uW8yI/AAAAAAAAA9w/7UdIMLu4-90/%2525E3%252582%2525B7%2525E3%252583%2525A3%2525E3%252583%2525AB%2525E3%252583%2525AB%2525E3%252581%25258B%2525E3%252582%252589%2525E3%252582%2525AB%2525E3%252583%2525BC%2525E3%252583%2525AB%2525EF%2525BC%252595%2525E4%2525B8%2525964.jpg" width="160" style="margin-left:0px; margin-top:100px; padding:0px;" id="i3"></a></div>
<div class="plane s4 slideIn" id="s4" >
<a href='#' onclick="pop('4','https://lh3.googleusercontent.com/-2yl7H1bGG6c/SSd7fBtrS4I/AAAAAAAAA94/uT1S-cFBYPk/%2525E3%252582%2525B7%2525E3%252583%2525A3%2525E3%252583%2525AB%2525E3%252583%2525AB%2525E3%252581%25258B%2525E3%252582%252589%2525E3%252582%2525AB%2525E3%252583%2525BC%2525E3%252583%2525AB%2525EF%2525BC%252595%2525E4%2525B8%2525963.jpg','4/(null)','https://lh3.googleusercontent.com/-2yl7H1bGG6c/SSd7fBtrS4I/AAAAAAAAA94/uT1S-cFBYPk/%2525E3%252582%2525B7%2525E3%252583%2525A3%2525E3%252583%2525AB%2525E3%252583%2525AB%2525E3%252581%25258B%2525E3%252582%252589%2525E3%252582%2525AB%2525E3%252583%2525BC%2525E3%252583%2525AB%2525EF%2525BC%252595%2525E4%2525B8%2525963.jpg','https://picasaweb.google.com/102448397019191874652/Age_of_Rembrandt#5271317661826632578','p','160','44','https://lh3.googleusercontent.com/-2yl7H1bGG6c/SSd7fBtrS4I/AAAAAAAAA94/uT1S-cFBYPk/%2525E3%252582%2525B7%2525E3%252583%2525A3%2525E3%252583%2525AB%2525E3%252583%2525AB%2525E3%252581%25258B%2525E3%252582%252589%2525E3%252582%2525AB%2525E3%252583%2525BC%2525E3%252583%2525AB%2525EF%2525BC%252595%2525E4%2525B8%2525963.jpg','0','16')">
<img src="https://lh3.googleusercontent.com/-2yl7H1bGG6c/SSd7fBtrS4I/AAAAAAAAA94/uT1S-cFBYPk/%2525E3%252582%2525B7%2525E3%252583%2525A3%2525E3%252583%2525AB%2525E3%252583%2525AB%2525E3%252581%25258B%2525E3%252582%252589%2525E3%252582%2525AB%2525E3%252583%2525BC%2525E3%252583%2525AB%2525EF%2525BC%252595%2525E4%2525B8%2525963.jpg" width="160" style="margin-left:0px; margin-top:100px; padding:0px;" id="i4"></a></div>
<div class="plane s5 slideIn" id="s5" >
<a href='#' onclick="pop('5','https://lh4.googleusercontent.com/-WVc-XtIDmWY/SSd7fA1AZ5I/AAAAAAAAA-A/kZ5qWOoIF10/%2525E3%252582%2525B7%2525E3%252583%2525A3%2525E3%252583%2525AB%2525E3%252583%2525AB%2525E3%252581%25258B%2525E3%252582%252589%2525E3%252582%2525AB%2525E3%252583%2525BC%2525E3%252583%2525AB%2525EF%2525BC%252595%2525E4%2525B8%2525962.jpg','5/(null)','https://lh4.googleusercontent.com/-WVc-XtIDmWY/SSd7fA1AZ5I/AAAAAAAAA-A/kZ5qWOoIF10/%2525E3%252582%2525B7%2525E3%252583%2525A3%2525E3%252583%2525AB%2525E3%252583%2525AB%2525E3%252581%25258B%2525E3%252582%252589%2525E3%252582%2525AB%2525E3%252583%2525BC%2525E3%252583%2525AB%2525EF%2525BC%252595%2525E4%2525B8%2525962.jpg','https://picasaweb.google.com/102448397019191874652/Age_of_Rembrandt#5271317661588940690','p','160','45','https://lh4.googleusercontent.com/-WVc-XtIDmWY/SSd7fA1AZ5I/AAAAAAAAA-A/kZ5qWOoIF10/%2525E3%252582%2525B7%2525E3%252583%2525A3%2525E3%252583%2525AB%2525E3%252583%2525AB%2525E3%252581%25258B%2525E3%252582%252589%2525E3%252582%2525AB%2525E3%252583%2525BC%2525E3%252583%2525AB%2525EF%2525BC%252595%2525E4%2525B8%2525962.jpg','0','16')">
<img src="https://lh4.googleusercontent.com/-WVc-XtIDmWY/SSd7fA1AZ5I/AAAAAAAAA-A/kZ5qWOoIF10/%2525E3%252582%2525B7%2525E3%252583%2525A3%2525E3%252583%2525AB%2525E3%252583%2525AB%2525E3%252581%25258B%2525E3%252582%252589%2525E3%252582%2525AB%2525E3%252583%2525BC%2525E3%252583%2525AB%2525EF%2525BC%252595%2525E4%2525B8%2525962.jpg" width="160" style="margin-left:0px; margin-top:100px; padding:0px;" id="i5"></a></div>
<div class="plane s6 slideIn" id="s6" >
<a href='#' onclick="pop('6','https://lh4.googleusercontent.com/-IybLxOFvHWU/SSd7fVWPqzI/AAAAAAAAA-I/3wmK53YKpLs/%2525E3%252582%2525B7%2525E3%252583%2525A3%2525E3%252583%2525AB%2525E3%252583%2525AB%2525E3%252581%25258B%2525E3%252582%252589%2525E3%252582%2525AB%2525E3%252583%2525BC%2525E3%252583%2525AB%2525EF%2525BC%252595%2525E4%2525B8%2525965.jpg','6/(null)','https://lh4.googleusercontent.com/-IybLxOFvHWU/SSd7fVWPqzI/AAAAAAAAA-I/3wmK53YKpLs/%2525E3%252582%2525B7%2525E3%252583%2525A3%2525E3%252583%2525AB%2525E3%252583%2525AB%2525E3%252581%25258B%2525E3%252582%252589%2525E3%252582%2525AB%2525E3%252583%2525BC%2525E3%252583%2525AB%2525EF%2525BC%252595%2525E4%2525B8%2525965.jpg','https://picasaweb.google.com/102448397019191874652/Age_of_Rembrandt#5271317667097062194','p','160','46','https://lh4.googleusercontent.com/-IybLxOFvHWU/SSd7fVWPqzI/AAAAAAAAA-I/3wmK53YKpLs/%2525E3%252582%2525B7%2525E3%252583%2525A3%2525E3%252583%2525AB%2525E3%252583%2525AB%2525E3%252581%25258B%2525E3%252582%252589%2525E3%252582%2525AB%2525E3%252583%2525BC%2525E3%252583%2525AB%2525EF%2525BC%252595%2525E4%2525B8%2525965.jpg','0','16')">
<img src="https://lh4.googleusercontent.com/-IybLxOFvHWU/SSd7fVWPqzI/AAAAAAAAA-I/3wmK53YKpLs/%2525E3%252582%2525B7%2525E3%252583%2525A3%2525E3%252583%2525AB%2525E3%252583%2525AB%2525E3%252581%25258B%2525E3%252582%252589%2525E3%252582%2525AB%2525E3%252583%2525BC%2525E3%252583%2525AB%2525EF%2525BC%252595%2525E4%2525B8%2525965.jpg" width="160" style="margin-left:0px; margin-top:100px; padding:0px;" id="i6"></a></div>
<div class="plane s7 slideIn" id="s7" >
<a href='#' onclick="pop('7','https://lh5.googleusercontent.com/-ul-m8Ssnbvw/SSd7fu4zyYI/AAAAAAAAA-Q/jfP9kI4ItF0/%2525E3%252582%2525B7%2525E3%252583%2525A3%2525E3%252583%2525AB%2525E3%252583%2525AB%2525E3%252581%25258B%2525E3%252582%252589%2525E3%252582%2525AB%2525E3%252583%2525BC%2525E3%252583%2525AB%2525EF%2525BC%252595%2525E4%2525B8%252596.jpg','7/(null)','https://lh5.googleusercontent.com/-ul-m8Ssnbvw/SSd7fu4zyYI/AAAAAAAAA-Q/jfP9kI4ItF0/%2525E3%252582%2525B7%2525E3%252583%2525A3%2525E3%252583%2525AB%2525E3%252583%2525AB%2525E3%252581%25258B%2525E3%252582%252589%2525E3%252582%2525AB%2525E3%252583%2525BC%2525E3%252583%2525AB%2525EF%2525BC%252595%2525E4%2525B8%252596.jpg','https://picasaweb.google.com/102448397019191874652/Age_of_Rembrandt#5271317673952921986','p','160','47','https://lh5.googleusercontent.com/-ul-m8Ssnbvw/SSd7fu4zyYI/AAAAAAAAA-Q/jfP9kI4ItF0/%2525E3%252582%2525B7%2525E3%252583%2525A3%2525E3%252583%2525AB%2525E3%252583%2525AB%2525E3%252581%25258B%2525E3%252582%252589%2525E3%252582%2525AB%2525E3%252583%2525BC%2525E3%252583%2525AB%2525EF%2525BC%252595%2525E4%2525B8%252596.jpg','0','16')">
<img src="https://lh5.googleusercontent.com/-ul-m8Ssnbvw/SSd7fu4zyYI/AAAAAAAAA-Q/jfP9kI4ItF0/%2525E3%252582%2525B7%2525E3%252583%2525A3%2525E3%252583%2525AB%2525E3%252583%2525AB%2525E3%252581%25258B%2525E3%252582%252589%2525E3%252582%2525AB%2525E3%252583%2525BC%2525E3%252583%2525AB%2525EF%2525BC%252595%2525E4%2525B8%252596.jpg" width="160" style="margin-left:0px; margin-top:46px; padding:0px;" id="i7"></a></div>
<div class="plane s8 slideIn" id="s8" >
<a href='#' onclick="pop('8','https://lh3.googleusercontent.com/-c6wCI7vh9Nc/SSd7fx4MiGI/AAAAAAAAA-Y/4WWAh4UYHps/%2525E3%252582%2525B7%2525E3%252583%2525A3%2525E3%252583%2525AB%2525E3%252583%2525AB%2525E3%252581%25258B%2525E3%252582%252589%2525E3%252582%2525AB%2525E3%252583%2525BC%2525E3%252583%2525AB%2525EF%2525BC%252595%2525E4%2525B8%2525966.jpg','8/(null)','https://lh3.googleusercontent.com/-c6wCI7vh9Nc/SSd7fx4MiGI/AAAAAAAAA-Y/4WWAh4UYHps/%2525E3%252582%2525B7%2525E3%252583%2525A3%2525E3%252583%2525AB%2525E3%252583%2525AB%2525E3%252581%25258B%2525E3%252582%252589%2525E3%252582%2525AB%2525E3%252583%2525BC%2525E3%252583%2525AB%2525EF%2525BC%252595%2525E4%2525B8%2525966.jpg','https://picasaweb.google.com/102448397019191874652/Age_of_Rembrandt#5271317674755655778','p','160','48','https://lh3.googleusercontent.com/-c6wCI7vh9Nc/SSd7fx4MiGI/AAAAAAAAA-Y/4WWAh4UYHps/%2525E3%252582%2525B7%2525E3%252583%2525A3%2525E3%252583%2525AB%2525E3%252583%2525AB%2525E3%252581%25258B%2525E3%252582%252589%2525E3%252582%2525AB%2525E3%252583%2525BC%2525E3%252583%2525AB%2525EF%2525BC%252595%2525E4%2525B8%2525966.jpg','0','16')">
<img src="https://lh3.googleusercontent.com/-c6wCI7vh9Nc/SSd7fx4MiGI/AAAAAAAAA-Y/4WWAh4UYHps/%2525E3%252582%2525B7%2525E3%252583%2525A3%2525E3%252583%2525AB%2525E3%252583%2525AB%2525E3%252581%25258B%2525E3%252582%252589%2525E3%252582%2525AB%2525E3%252583%2525BC%2525E3%252583%2525AB%2525EF%2525BC%252595%2525E4%2525B8%2525966.jpg" width="160" style="margin-left:0px; margin-top:100px; padding:0px;" id="i8"></a></div>
<div id="floor" class="slideFloor" align="center">
<!--<img src='@@@' id="floorImg" width="500" height="500">-->
<img src='https://picasaweb.google.com/data/feed/base/user/102448397019191874652/albumid/5271317653902711425?alt=rss&kind=photo&hl=ja' id="floorImg" width="500" height="500">
</div>
<span id="floor_text"></span>
</div>
</div>
<!-- <span id="floor_text"></span>-->
</div>
</div>
<div class="controls" id="ctrl1" style="position:absolute;top:2%; left:38%;width:180px; height:32px; ">
<button onmouseover="toggleShape1(100)" onclick="toggleShape1(200)" class="ctlBtn">-Zoom</button>
<button onmouseover="toggleShape1(-100)" onclick="toggleShape1(-200)" class="ctlBtn">Zoom+</button>
</div>
<div class="controls" id="ctrl2" style="position:absolute;width:282px"><!--style="position:absolute; top:30px;"-->
<table><tr><td style="height:32px">
<img src="https://lh3.googleusercontent.com/-c6wCI7vh9Nc/SSd7fx4MiGI/AAAAAAAAA-Y/4WWAh4UYHps/%2525E3%252582%2525B7%2525E3%252583%2525A3%2525E3%252583%2525AB%2525E3%252583%2525AB%2525E3%252581%25258B%2525E3%252582%252589%2525E3%252582%2525AB%2525E3%252583%2525BC%2525E3%252583%2525AB%2525EF%2525BC%252595%2525E4%2525B8%2525966.jpg" width="60" style="position:absolute;margin-left:-80px; top:-50%; padding:0px; -webkit-transform:rotateX(10deg) rotateY(50deg);">
<a href="#" onclick="runAction('fbAlbum','https:,https://picasaweb.google.com/data/feed/base/user/102448397019191874652/albumid/5271317653902711425?alt=rss&kind=photo&hl=ja,prev,0');">
<img src='file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.1/Applications/432BCA59-DCAF-4839-AD76-8F3731EA7DBD/KwinTabBar2.app/gray_ball.png'
style="-webkit-transform:rotateX(10deg) rotateY(45deg);height:40px; width:48px;opacity:0.5;margin-left:-15px;margin-bottom:3px"/></a>
</td>
<td>
<button onclick="autoRotate('left')" class="ctlBtn">
< </button> <button onclick="autoRotate('stop');" class="ctlBtn">■</button>
<button onclick="autoRotate('right')" class="ctlBtn"> > </button>
</td>
<td >
<a href="#" onclick="runAction('fbAlbum','https:,https://picasaweb.google.com/data/feed/base/user/102448397019191874652/albumid/5271317653902711425?alt=rss&kind=photo&hl=ja,next,0');">
<img src='https://lh3.googleusercontent.com/-d-3DoXo_MvA/Tbkleam4ozI/AAAAAAAAC7E/XeJdTQtQx7c/pieta.png'
style="-webkit-transform:rotateX(10deg) rotateY(-45deg);height:40px; width:48px;opacity:0.5;margin-right:-20px;margin-bottom:3px"/></a>
</td>
</tr>
</table>
<img src="https://lh3.googleusercontent.com/-d-3DoXo_MvA/Tbkleam4ozI/AAAAAAAAC7E/XeJdTQtQx7c/pieta.png"
style="position:absolute;top:-50%; right:-17%; margin-bottom:3px; width:60px; -webkit-transform:rotateX(10deg) rotateY(-50deg);"/>
<div id="jquery-ui-slider3"></div>
</div>
<div id="map" style="position:absolute;left:15%; width:600px; height:300px;"></div>
<script type="text/javascript" src="file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.1/Applications/432BCA59-DCAF-4839-AD76-8F3731EA7DBD/KwinTabBar2.app/alexframework/src/javascript/googleMap.js"></script>
<div id="jquery-ui-slider-wrap" style="position:absolute; top:80px;left:-15px;">
<p style="color:red">plane</p> <input type="text" id="jquery-ui-slider-value" /><div id="jquery-ui-slider"></div>
</div>
<div id="jquery-ui-slider-wrap2" style="position:absolute; top:465px; left:-15px;">
<pstyle="color:red">floor</p> <input type="text" id="jquery-ui-slider-value2" /> <div id="jquery-ui-slider2"></div>
</div>
<!--<div id="fb-root"></div>-->
<!--<script>
window.fbAsyncInit = function() {
FB.init({
appId : '142574589139226', // App ID
channelUrl : '//snsimglink.appspot.com/channel.html', // Channel File
status : false, // check login status true
cookie : false, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>-->
</body>
</html>kwin786http://www.blogger.com/profile/11636870499038520354noreply@blogger.com0tag:blogger.com,1999:blog-4631337081774196669.post-64490404411199064772012-05-29T22:05:00.002+09:002012-05-29T22:05:30.793+09:00Picasa album<!--<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">-->
<html lang="en">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0, user-scalable=YES" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<style type="text/css" media="screen">
body { background-color: black; color: white; font-family: 'Lucida Grande', Verdana, Arial; font-size: 12px;
background-image: -webkit-gradient(radial,50% 500,1,50% 500,400, from(rgba(255, 255, 255, 0.3)),to(rgba(255, 255, 255, 0)));
background-repeat: no-repeat; }
#container { width: 100%; height: 850px;
-webkit-perspective: 800; /* For compatibility with iPhone 3.0, we leave off the units here */
-webkit-perspective-origin: 50% 225px;
}
/* 0 -> -120 -100 -> -50 2012/02/07 */
#floor { position:absolute;top:-10%; left:-50% ; margin-top:-120px; margin-left:-50px;
-webkit-mask-image:-webkit-gradient(radial, center center, 0, center center, 350,from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
-webkit-transform: rotateX(90deg) rotateY(0deg) rotateZ(0deg) translateZ(-210px) translateY(10px);
}
#floorBallLeft { position:absolute;top:-10%; left:10% ; margin-top:0px; margin-left:-90px; height:50px; opacity:0.5;
-webkit-transform: rotateX(15deg) rotateY(45deg) rotateZ(0deg) translateZ(0px) translateY(0px); }
#floorBallRight { position:absolute;top:-10%; right:15% ; margin-top:0px; margin-right:-90px; height:50px; width:45px;opacity:0.5;
-webkit-transform: rotateX(10deg) rotateY(-45deg) rotateZ(0deg) translateZ(0px) translateY(0px); }
#floorBallHome { position:absolute;top:20%; left:35% ; margin-top:60px; margin-left:0px; height:35px; width:75px; opacity:0.3;
-webkit-transform: rotateX(15deg) rotateY(0deg) rotateZ(0deg) translateZ(0px) translateY(0px); }
/* #floorC { position:absolute;top:95%; left:50% ;-webkit-transform:scale(3);}
#floorR { position:absolute;top:90%; right:15% ; margin-top:0px; margin-right:0px; -webkit-transform:scale(3);}
#floorL { position:absolute;top:90%; left: 15% ; margin-top:0px; margin-left:0px ; -webkit-transform:scale(3);}*/
a:link { text-decoration: none; color:#DF1FBB; }
a:active { text-decoration: none; color:#DF1FBB; }
a:visited { text-decoration: none; color:#DF1FBB; } /* #555555 */
a:hover { text-decoration: none; color:#DF1FBB; }
li { display:inline-block; }
#floor_text{ position: absolute;
top:80%; left:-80%; height: 800px; width: 420px;
border: 0px solid white;
-webkit-box-sizing: border-box; text-align: left; font-family: Times, serif;
font-size: 20pt; font-color: white; /*font-size: 24pt; color: white; */
}
#stage { width: 100%; height: 100%; -webkit-transition: -webkit-transform 2s; -webkit-transform-style: preserve-3d; }
#shape { position: relative; top: 50px; margin: 0 auto; height: 400px; width: 204px; -webkit-transform-style: preserve-3d; }
#shapeX { margin: 0 auto; height: 200px; width: 200px; -webkit-transform-style: preserve-3d; }
.plane { position: absolute; top:0%; /*top:-150%; */
height: 400px; width: 204px; border: 0px solid white;
text-align: center; font-family: Times, serif; font-size: 124pt; color: black;
background-image: -webkit-gradient(linear, left bottom, right top,from(rgba(0,0,0,0)), to(rgba(0,0,0,1.0)));
background-repeat: no-repeat;
background-color: rgba( 0, 0, 0, 0.4); /* 0.6 */
-webkit-box-sizing: border-box;
-webkit-transition: -webkit-transform 2s, opacity 2s; -webkit-backface-visibility: hidden; /* hidden */
}
.subplane {position: absolute; width:204px;top:-335px; border: 0px; padding:0px; opacity:0.5;
-webkit-transition: -webkit-transform 2s,opacity 2s;-webkit-backface-visibility:visible;}
#shape.backfaces .plane { -webkit-backface-visibility: visible; }
@-webkit-keyframes spin { from { -webkit-transform: rotateY(0); } to { -webkit-transform: rotateY(-360deg); } }
@-webkit-keyframes spinR{ from { -webkit-transform: rotateY(0); } to { -webkit-transform: rotateY( 360deg); } }
@-webkit-keyframes spin0{ }
/* 上部の説明文の書式設定 背景は灰色で角を丸める .controls {width: 70%; height:10%; margin: 0 auto; padding: 5px 20px; */
.controls { opacity:0.6; /* width: 80%; height:40%; */
position:absolute;top:80%; left:34%; height:36px; /* bottom:1% */
margin: 0 auto; padding: 5px 10px; background-color: rgba(255, 255, 255, 0.15);
-webkit-border-radius: 48px; }
.ctlBtn { font-size:10pt; opacity:0.8; margin-bottom:7px;}
.controls > div { margin: 10px; }
/* ---------- ring2 styles ------------- */
.ring2 > .s1 { -webkit-transform: rotateY( 0deg) translateY( 0px) translateZ(-380px); }
.ring2 > .s2 { -webkit-transform: rotateY( -30deg) translateY( 0px) translateZ(-380px); }
.ring2 > .s3 { -webkit-transform: rotateY( -60deg) translateY( 0px) translateZ(-380px); }
.ring2 > .s4 { -webkit-transform: rotateY( -90deg) translateZ(-380px); }
.ring2 > .s5 { -webkit-transform: rotateY( -120deg) translateZ(-380px); }
.ring2 > .s6 { -webkit-transform: rotateY( -150deg) translateZ(-380px); }
.ring2 > .s7 { -webkit-transform: rotateY( -180deg) translateZ(-380px); }
.ring2 > .s8 { -webkit-transform: rotateY( -210deg) translateZ(-380px); }
.ring2 > .s9 { -webkit-transform: rotateY( 120deg) translateZ(-380px); }
.ring2 > .s10 { -webkit-transform: rotateY( 90deg) translateZ(-380px); }
.ring2 > .s11 { -webkit-transform: rotateY( -300deg) translateZ(-380px); }
.ring2 > .s12 { -webkit-transform: rotateY( -330deg) translateZ(-380px); }
.ring2 > .s13 { -webkit-transform: translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s14 { -webkit-transform: rotateY( -20deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s15 { -webkit-transform: rotateY( -40deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s16 { -webkit-transform: rotateY( -60deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s17 { -webkit-transform: rotateY( -80deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s18 { -webkit-transform: rotateY( -100deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s19 { -webkit-transform: rotateY( -120deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s20 { -webkit-transform: rotateY( -140deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s21 { -webkit-transform: rotateY( -160deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s22 { -webkit-transform: rotateY( -180deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s23 { -webkit-transform: rotateY( -200deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s24 { -webkit-transform: rotateY( -220deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s25 { -webkit-transform: rotateY( -240deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s26 { -webkit-transform: rotateY( -260deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s27 { -webkit-transform: rotateY( -280deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s28 { -webkit-transform: rotateY( -300deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s29 { -webkit-transform: rotateY( -320deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s30 { -webkit-transform: rotateY( -340deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.slideIn {-webkit-animation-timing-function: ease ;-webkit-animation-duration: 1500ms;-webkit-animation-name: slidein; margin-right:0px;}
@-webkit-keyframes slidein {from { margin-top: 120px; opacity:0; } to { margin-top: 0px; opacity:1; } }
.slideFloor {-webkit-animation-timing-function: ease;-webkit-animation-duration: 1000ms;-webkit-animation-name: slidein; margin-left:0px;}
@-webkit-keyframes slideFloor {from { margin-top: 120px; opacity:0; } to { margin-top: 0px; opacity:1;} }
<!--
#jquery-ui-slider-wrap {padding:0px;text-align: center; width: 38px;border: 0px;border-radius:20px; background-color: rgba(255, 255, 255, 0.15);opacity:0.4; }
#jquery-ui-slider-value {border:0; color: red !important; font-weight: bold; background-color: transparent;margin: 5px; width: 40px; text-align: center; }
#jquery-ui-slider {height: 150px; width:25px;background-color:rgba(255, 255, 255, 0.15); opacity:0.2;opacity:0.2;}
#jquery-ui-slider-wrap2 {padding:0px;text-align: center;width: 38px; border: 0px;border-radius:10px; background-color: rgba(255, 255, 255, 0.15); opacity:0.4; }
#jquery-ui-slider-value2{ border: 0; color: red !important; font-weight: bold; background-color: transparent;margin: 5px;width: 40px; text-align: center; }
#jquery-ui-slider2 { height: 150px; width:25px; background-color:rgba(255, 255, 255, 0.15); opacity:0.2;}
-->
</style>
<link rel="stylesheet" href="file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.1/Applications/C49262E7-07BA-4E16-AE5C-6F3632AE79A2/KwinTabBar2.app/alexframework/src/javascript/jquery-ui-1.7.1.custom.css" type="text/css">
<script type="text/javascript" src="file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.1/Applications/C49262E7-07BA-4E16-AE5C-6F3632AE79A2/KwinTabBar2.app/alexframework/src/javascript/gear5.js"></script>
<script type="text/javascript" src="file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.1/Applications/C49262E7-07BA-4E16-AE5C-6F3632AE79A2/KwinTabBar2.app/alexframework/src/javascript/jquery.min.js"></script>
<script type="text/javascript" src="file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.1/Applications/C49262E7-07BA-4E16-AE5C-6F3632AE79A2/KwinTabBar2.app/alexframework/src/javascript/alex.core.js"></script>
<script type="text/javascript" src="file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.1/Applications/C49262E7-07BA-4E16-AE5C-6F3632AE79A2/KwinTabBar2.app/alexframework/src/javascript/alex.record.js"></script>
<script type="text/javascript" src="file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.1/Applications/C49262E7-07BA-4E16-AE5C-6F3632AE79A2/KwinTabBar2.app/alexframework/src/javascript/albums.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript" ></script>
<!--<script src="http://code.jquery.com/jquery.min.js"></script>-->
<!--<script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script>-->
<!--<script type="text/javascript" src="file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.1/Applications/C49262E7-07BA-4E16-AE5C-6F3632AE79A2/KwinTabBar2.app/alexframework/src/javascript/facebook.js"></script>-->
<script type="text/javascript" src="file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.1/Applications/C49262E7-07BA-4E16-AE5C-6F3632AE79A2/KwinTabBar2.app/alexframework/src/javascript/jquery.ui.min.js"></script>
<script type="text/javascript" src="file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.1/Applications/C49262E7-07BA-4E16-AE5C-6F3632AE79A2/KwinTabBar2.app/alexframework/src/javascript/jquery.ui.touch-punch.min.js"></script>
<script type="text/javascript">
function setCss(currentWidth){
//alert("screen.width:" + screen.width+","+window.innerWidth+","+window.orientation)
//if ( navigator.userAgent.match( /iPhone/i ) || navigator.userAgent.match( /iPod/i ) ) {
// var el = document.getElementById("ctrl1");
// el.style.position = 'absolute'; el.style.left = '0px';
// if(window.navigator.standalone){ el.style.top = '10px'; }
//}
if ( navigator.userAgent.match( /iPhone/i ) || navigator.userAgent.match( /iPod/i ) ) {
alert(navigator.userAgent)
var el = document.getElementById("ctrl1");
el.style.position = 'absolute';
el.style.left = '60px';
el.style.width = '180px';
if(window.navigator.standalone){ el.style.top = '10px'; }
}
shape.style.top='25%';
floor.style.top='30%';
floor.style.left='-50%';
var tY = -1*(720-586)/2;
var tY = 0;
///if (floorImg.naturalWidth > floorImg.naturalHeight ){
/// var tZ = 80 - (floorImg.naturalWidth - floorImg.naturalHeight );
///}else{ var tZ = 80; }
// alert("setCss");
// floor.style.webkitTransform='rotateX(90deg) rotateY(0deg) rotateZ(0deg) translateZ('+tZ+'px) translateY(10px)';
// var _rotateY = 90; shape.style.webkitTransform = 'rotateY('+_rotateY+'deg)';
//alert(window.orientation+","+currentWidth);
if (window.orientation == 90 || window.orientation == -90||currentWidth > 800){
ctrl2.style.top='60%';ctrl1.style.left='42%';
}
}
// $.browser.mobileSafari = /webkit.*mobile/i.test(navigator.userAgent)
// if ($.browser.mobileSafari) {
// $.getScript('/public/javascripts/jquery.ui.touch-punch.min.js');
// }
<!--
jQuery( function() {
jQuery( '#jquery-ui-slider' ) . slider( {
orientation: 'vertical', animate: 'slow', range: 'min', value: 70, min: -100, max: 300,
slide: function( event, ui ) {
jQuery( '#jquery-ui-slider-value' ) . val( ui.value );
var top = ui.value -100;
shape.style.top= top+ '%';
}
} );
jQuery( '#jquery-ui-slider-value' ) . val( jQuery( '#jquery-ui-slider' ) . slider( 'value' ) );
} );
jQuery( function() {
jQuery( '#jquery-ui-slider2' ) . slider( {
orientation: 'vertical', animate: 'slow', range: 'min', value: 70, min: -200, max: 300,
slide: function( event, ui ) {
jQuery( '#jquery-ui-slider-value2' ) . val( ui.value );
var top = ui.value -100; floor.style.top= top+ '%';
}
} );
jQuery( '#jquery-ui-slider-value2' ) . val( jQuery( '#jquery-ui-slider2' ) . slider( 'value' ) );
} );
jQuery( function() {
jQuery( '#jquery-ui-slider3' ).slider( {
animate:'slow', range: 'min', value: staticRotationY, min: -180, max: 360,
slide: function( event, ui ) {
staticRotationY = ui.value*Math.PI/180;
shape.style.webkitTransform = 'rotateY('+staticRotationY+'rad)';
}
});
} );
-->
</script>
</head>
<body onload="addAnimationHandlers('/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.1/Applications/C49262E7-07BA-4E16-AE5C-6F3632AE79A2/KwinTabBar2.app',90,'stop','0','768')">
<br/ >
<br />
<div id="getComment"></div>
<div id="container">
<div id="stage">
<div id="shape" class="ring2 ">
<div id="shapeX" class="ring2 ">
<img class="subplane s1 slideIn" id="sub1" style="padding:0px;"/><img class="subplane s2 slideIn" id="sub2" style="padding:0px;"/>
<img class="subplane s3 slideIn" id="sub3" style="padding:0px;"/><img class="subplane s4 slideIn" id="sub4" style="padding:0px;"/>
<img class="subplane s5 slideIn" id="sub5" style="padding:0px;"/><img class="subplane s6 slideIn" id="sub6" style="padding:0px;"/>
<img class="subplane s7 slideIn" id="sub7" style="padding:0px;"/><img class="subplane s8 slideIn" id="sub8" style="padding:0px;"/>
<img class="subplane s9 slideIn" id="sub9" style="padding:0px;"/><img class="subplane s10 slideIn" id="sub10" style="padding:0px;"/>
<img class="subplane s11 slideIn" id="sub11" style="padding:0px;"/><img class="subplane s12 slideIn" id="sub12" style="padding:0px;"/>
<div class="plane s1 slideIn" id="s1" >
<a href='#' onclick="pop('1','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/s720x720/533467_367577743287797_182999763_n.jpg','1/(null)','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/s720x720/533467_367577743287797_182999763_n.jpg','0','p','160','30','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/s720x720/533467_367577743287797_182999763_n.jpg','0','0')">
<img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/s720x720/533467_367577743287797_182999763_n.jpg" width="160" style="margin-left:0px; margin-top:70px; padding:0px;" id="i1"></a></div>
<div class="plane s2 slideIn" id="s2" >
<a href='#' onclick="pop('2','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/s720x720/540169_365109120201326_170251749687065_959261_1692796122_n.jpg','2/(null)','170251749687065_81723','https://www.facebook.com/photo.php?fbid=365109120201326&set=a.365100403535531.81723.170251749687065&type=1','a_ios','160','24','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/s720x720/540169_365109120201326_170251749687065_959261_1692796122_n.jpg','0','0')">
<img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/s720x720/540169_365109120201326_170251749687065_959261_1692796122_n.jpg" width="160" style="margin-left:0px; margin-top:70px; padding:0px;" id="i2"></a></div>
<div class="plane s3 slideIn" id="s3" >
<a href='#' onclick="pop('3','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-snc6/247035_192147500830823_170251749687065_451666_4293116_n.jpg','3/(null)','170251749687065_45304','https://www.facebook.com/photo.php?fbid=192147500830823&set=a.192147124164194.45304.170251749687065&type=1','a_ios','160','25','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-snc6/247035_192147500830823_170251749687065_451666_4293116_n.jpg','0','0')">
<img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-snc6/247035_192147500830823_170251749687065_451666_4293116_n.jpg" width="160" style="margin-left:0px; margin-top:94px; padding:0px;" id="i3"></a></div>
<div class="plane s4 slideIn" id="s4" >
<a href='#' onclick="pop('4','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-prn1/s720x720/538507_365128310199407_170251749687065_959386_1481220093_n.jpg','4/(null)','170251749687065_81727','https://www.facebook.com/photo.php?fbid=365128310199407&set=a.365126280199610.81727.170251749687065&type=1','a_ios','160','13','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-prn1/s720x720/538507_365128310199407_170251749687065_959386_1481220093_n.jpg','0','0')">
<img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-prn1/s720x720/538507_365128310199407_170251749687065_959386_1481220093_n.jpg" width="160" style="margin-left:0px; margin-top:70px; padding:0px;" id="i4"></a></div>
<div class="plane s5 slideIn" id="s5" >
<a href='#' onclick="pop('5','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-snc6/247157_192145187497721_2303316_n.jpg','5/(null)','170251749687065_45303','https://www.facebook.com/photo.php?fbid=192145187497721&set=a.192144577497782.45303.170251749687065&type=1','a_ios','160','26','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-snc6/247157_192145187497721_2303316_n.jpg','0','0')">
<img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-snc6/247157_192145187497721_2303316_n.jpg" width="160" style="margin-left:0px; margin-top:100px; padding:0px;" id="i5"></a></div>
<div class="plane s6 slideIn" id="s6" >
<a href='#' onclick="pop('6','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-snc6/249909_192140004164906_170251749687065_451382_7191975_n.jpg','6/(null)','170251749687065_45300','https://www.facebook.com/photo.php?fbid=192140004164906&set=a.192139274164979.45300.170251749687065&type=1','a_ios','160','27','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-snc6/249909_192140004164906_170251749687065_451382_7191975_n.jpg','0','0')">
<img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-snc6/249909_192140004164906_170251749687065_451382_7191975_n.jpg" width="160" style="margin-left:0px; margin-top:70px; padding:0px;" id="i6"></a></div>
<div class="plane s7 slideIn" id="s7" >
<a href='#' onclick="pop('7','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash4/s720x720/398277_367572226621682_945577160_n.jpg','7/(null)','170251749687065_82042','https://www.facebook.com/photo.php?fbid=367572226621682&set=a.367572203288351.82042.170251749687065&type=1','a_ios','160','14','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash4/s720x720/398277_367572226621682_945577160_n.jpg','0','0')">
<img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash4/s720x720/398277_367572226621682_945577160_n.jpg" width="160" style="margin-left:0px; margin-top:95px; padding:0px;" id="i7"></a></div>
<div class="plane s8 slideIn" id="s8" >
<a href='#' onclick="pop('8','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/s720x720/540573_364116136967291_401851872_n.jpg','8/(null)','170251749687065_81592','https://www.facebook.com/photo.php?fbid=364116136967291&set=a.364115243634047.81592.170251749687065&type=1','a_ios','160','28','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/s720x720/540573_364116136967291_401851872_n.jpg','0','0')">
<img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/s720x720/540573_364116136967291_401851872_n.jpg" width="160" style="margin-left:0px; margin-top:70px; padding:0px;" id="i8"></a></div>
<div class="plane s9 slideIn" id="s9" >
<a href='#' onclick="pop('9','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/s720x720/581224_368650756513829_170251749687065_966988_761286274_n.jpg','9/(null)','170251749687065_81595','https://www.facebook.com/photo.php?fbid=368650756513829&set=a.364122320300006.81595.170251749687065&type=1','a_ios','160','29','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/s720x720/581224_368650756513829_170251749687065_966988_761286274_n.jpg','0','0')">
<img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/s720x720/581224_368650756513829_170251749687065_966988_761286274_n.jpg" width="160" style="margin-left:0px; margin-top:70px; padding:0px;" id="i9"></a></div>
<div id="floor" class="slideFloor" align="center">
<!--<img src='@@@' id="floorImg" width="500" height="500">-->
<img src='https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/s720x720/533467_367577743287797_182999763_n.jpg' id="floorImg" width="500" height="500">
</div>
<span id="floor_text"></span>
</div>
</div>
<!-- <span id="floor_text"></span>-->
</div>
</div>
<div class="controls" id="ctrl1" style="position:absolute;top:2%; left:38%;width:180px; height:32px; ">
<button onmouseover="toggleShape1(100)" onclick="toggleShape1(200)" class="ctlBtn">-Zoom</button>
<button onmouseover="toggleShape1(-100)" onclick="toggleShape1(-200)" class="ctlBtn">Zoom+</button>
</div>
<div class="controls" id="ctrl2" style="position:absolute;width:282px"><!-- style="position:absolute; top:30px;"-->
<table><tr><td style="height:32px">
<a href="#" onclick="runAction('fbAlbum','367577743287797,https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/s720x720/533467_367577743287797_182999763_n.jpg,prev,0');">
<img src='file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.1/Applications/C49262E7-07BA-4E16-AE5C-6F3632AE79A2/KwinTabBar2.app/gray_ball.png'
style="-webkit-transform:rotateX(10deg) rotateY(45deg);height:40px; width:48px;opacity:0.5;margin-left:-15px;margin-bottom:3px"/></a>
</td><td>
<button onclick="autoRotate('left')" class="ctlBtn">
< </button> <button onclick="autoRotate('stop');" class="ctlBtn">■</button>
<button onclick="autoRotate('right')" class="ctlBtn"> > </button>
</td><td>
<a href="#" onclick="runAction('fbAlbum','367577743287797,https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/s720x720/533467_367577743287797_182999763_n.jpg,next,0');">
<img src='file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.1/Applications/C49262E7-07BA-4E16-AE5C-6F3632AE79A2/KwinTabBar2.app/gray_ball.png'
style="-webkit-transform:rotateX(10deg) rotateY(-45deg);height:40px; width:48px;opacity:0.5;margin-right:-20px;margin-bottom:3px"/></a>
<!--<button onclick="toggleShape1(400)">-Zoom</button> <button onclick="toggleShape1(-400)">Zoom+</button>-->
</td></tr>
</table>
<div id="jquery-ui-slider3"></div>
</div>
<div style="position:absolute; bottom:10px;">
<a href="#" onclick='runAction("fbtest","")'>fbtest</a><br />
<a href="#" onclick='runAction("changeCurrentTitle","0")'>Home</a><br />
<a href="#" onclick='runAction("changeCurrentTitle","https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/s720x720/533467_367577743287797_182999763_n.jpg")'>parentTitle</a><br />
</div>
<input id="_type" type="hidden" value="000" />
<div id="map" style="position:absolute;left:15%; width:600px; height:300px;"></div>
<script type="text/javascript" src="file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.1/Applications/C49262E7-07BA-4E16-AE5C-6F3632AE79A2/KwinTabBar2.app/alexframework/src/javascript/googleMap.js"></script>
<div id="jquery-ui-slider-wrap" style="position:absolute; top:80px;left:-15px;">
<p style="color:red">plane</p> <input type="text" id="jquery-ui-slider-value" /><div id="jquery-ui-slider"></div>
</div>
<div id="jquery-ui-slider-wrap2" style="position:absolute; top:465px; left:-15px;">
<pstyle="color:red">floor</p> <input type="text" id="jquery-ui-slider-value2" /> <div id="jquery-ui-slider2"></div>
</div>
<!--<div id="fb-root"></div>-->
<!--<script>
window.fbAsyncInit = function() {
FB.init({
appId : '142574589139226', // App ID
channelUrl : '//snsimglink.appspot.com/channel.html', // Channel File
status : false, // check login status true
cookie : false, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>-->
</body>
</html>kwin786http://www.blogger.com/profile/11636870499038520354noreply@blogger.com0tag:blogger.com,1999:blog-4631337081774196669.post-54584325640128969812012-05-09T16:17:00.002+09:002012-05-09T16:17:57.353+09:00Aa<!--<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">-->
<html lang="en">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0, user-scalable=YES" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<style type="text/css" media="screen">
body { background-color: black; color: white; font-family: 'Lucida Grande', Verdana, Arial; font-size: 12px;
background-image: -webkit-gradient(radial,50% 500,1,50% 500,400, from(rgba(255, 255, 255, 0.3)),to(rgba(255, 255, 255, 0)));
background-repeat: no-repeat; }
#container { width: 100%; height: 850px;
-webkit-perspective: 800; /* For compatibility with iPhone 3.0, we leave off the units here */
-webkit-perspective-origin: 50% 225px;
}
/* 0 -> -120 -100 -> -50 2012/02/07 */
#floor { position:absolute;top:-10%; left:-50% ; margin-top:-120px; margin-left:-50px;
-webkit-mask-image:-webkit-gradient(radial, center center, 0, center center, 350,from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
-webkit-transform: rotateX(90deg) rotateY(0deg) rotateZ(0deg) translateZ(-210px) translateY(10px);
}
#floorBallLeft { position:absolute;top:-10%; left:10% ; margin-top:0px; margin-left:-90px; height:50px; opacity:0.5;
-webkit-transform: rotateX(15deg) rotateY(45deg) rotateZ(0deg) translateZ(0px) translateY(0px); }
#floorBallRight { position:absolute;top:-10%; right:15% ; margin-top:0px; margin-right:-90px; height:50px; width:45px;opacity:0.5;
-webkit-transform: rotateX(10deg) rotateY(-45deg) rotateZ(0deg) translateZ(0px) translateY(0px); }
#floorBallHome { position:absolute;top:20%; left:35% ; margin-top:60px; margin-left:0px; height:35px; width:75px; opacity:0.3;
-webkit-transform: rotateX(15deg) rotateY(0deg) rotateZ(0deg) translateZ(0px) translateY(0px); }
/* #floorC { position:absolute;top:95%; left:50% ;-webkit-transform:scale(3);}
#floorR { position:absolute;top:90%; right:15% ; margin-top:0px; margin-right:0px; -webkit-transform:scale(3);}
#floorL { position:absolute;top:90%; left: 15% ; margin-top:0px; margin-left:0px ; -webkit-transform:scale(3);}*/
a:link { text-decoration: none; color:#DF1FBB; }
a:active { text-decoration: none; color:#DF1FBB; }
a:visited { text-decoration: none; color:#DF1FBB; } /* #555555 */
a:hover { text-decoration: none; color:#DF1FBB; }
li { display:inline-block; }
#floor_text{ position: absolute;
top:80%; left:-80%; height: 800px; width: 420px;
border: 0px solid white;
-webkit-box-sizing: border-box; text-align: left; font-family: Times, serif;
font-size: 20pt; font-color: white; /*font-size: 24pt; color: white; */
}
#stage { width: 100%; height: 100%; -webkit-transition: -webkit-transform 2s; -webkit-transform-style: preserve-3d; }
#shape { position: relative; top: 50px; margin: 0 auto; height: 400px; width: 204px; -webkit-transform-style: preserve-3d; }
#shapeX { margin: 0 auto; height: 200px; width: 200px; -webkit-transform-style: preserve-3d; }
.plane { position: absolute; top:0%; /*top:-150%; */
height: 400px; width: 204px; border: 0px solid white;
text-align: center; font-family: Times, serif; font-size: 124pt; color: black;
background-image: -webkit-gradient(linear, left bottom, right top,from(rgba(0,0,0,0)), to(rgba(0,0,0,1.0)));
background-repeat: no-repeat;
background-color: rgba( 0, 0, 0, 0.4); /* 0.6 */
-webkit-box-sizing: border-box;
-webkit-transition: -webkit-transform 2s, opacity 2s; -webkit-backface-visibility: hidden; /* hidden */
}
.subplane {position: absolute; width:204px;top:-335px; border: 0px; padding:0px; opacity:0.5;
-webkit-transition: -webkit-transform 2s,opacity 2s;-webkit-backface-visibility:visible;}
#shape.backfaces .plane { -webkit-backface-visibility: visible; }
@-webkit-keyframes spin { from { -webkit-transform: rotateY(0); } to { -webkit-transform: rotateY(-360deg); } }
@-webkit-keyframes spinR{ from { -webkit-transform: rotateY(0); } to { -webkit-transform: rotateY( 360deg); } }
@-webkit-keyframes spin0{ }
/* 上部の説明文の書式設定 背景は灰色で角を丸める .controls {width: 70%; height:10%; margin: 0 auto; padding: 5px 20px; */
.controls { opacity:0.6; /* width: 80%; height:40%; */
position:absolute;top:80%; left:34%; height:36px; /* bottom:1% */
margin: 0 auto; padding: 5px 10px; background-color: rgba(255, 255, 255, 0.15);
-webkit-border-radius: 48px; }
.ctlBtn { font-size:10pt; opacity:0.8; margin-bottom:7px;}
.controls > div { margin: 10px; }
/* ---------- ring2 styles ------------- */
.ring2 > .s1 { -webkit-transform: rotateY( 0deg) translateY( 0px) translateZ(-380px); }
.ring2 > .s2 { -webkit-transform: rotateY( -30deg) translateY( 0px) translateZ(-380px); }
.ring2 > .s3 { -webkit-transform: rotateY( -60deg) translateY( 0px) translateZ(-380px); }
.ring2 > .s4 { -webkit-transform: rotateY( -90deg) translateZ(-380px); }
.ring2 > .s5 { -webkit-transform: rotateY( -120deg) translateZ(-380px); }
.ring2 > .s6 { -webkit-transform: rotateY( -150deg) translateZ(-380px); }
.ring2 > .s7 { -webkit-transform: rotateY( -180deg) translateZ(-380px); }
.ring2 > .s8 { -webkit-transform: rotateY( -210deg) translateZ(-380px); }
.ring2 > .s9 { -webkit-transform: rotateY( 120deg) translateZ(-380px); }
.ring2 > .s10 { -webkit-transform: rotateY( 90deg) translateZ(-380px); }
.ring2 > .s11 { -webkit-transform: rotateY( -300deg) translateZ(-380px); }
.ring2 > .s12 { -webkit-transform: rotateY( -330deg) translateZ(-380px); }
.ring2 > .s13 { -webkit-transform: translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s14 { -webkit-transform: rotateY( -20deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s15 { -webkit-transform: rotateY( -40deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s16 { -webkit-transform: rotateY( -60deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s17 { -webkit-transform: rotateY( -80deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s18 { -webkit-transform: rotateY( -100deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s19 { -webkit-transform: rotateY( -120deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s20 { -webkit-transform: rotateY( -140deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s21 { -webkit-transform: rotateY( -160deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s22 { -webkit-transform: rotateY( -180deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s23 { -webkit-transform: rotateY( -200deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s24 { -webkit-transform: rotateY( -220deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s25 { -webkit-transform: rotateY( -240deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s26 { -webkit-transform: rotateY( -260deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s27 { -webkit-transform: rotateY( -280deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s28 { -webkit-transform: rotateY( -300deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s29 { -webkit-transform: rotateY( -320deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s30 { -webkit-transform: rotateY( -340deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
/* .slideIn {-webkit-animation-timing-function: ease ;-webkit-animation-duration: 1500ms;-webkit-animation-name: slidein; margin-left:0px;} */
.slideIn {-webkit-animation-timing-function: ease ;-webkit-animation-duration: 1500ms;-webkit-animation-name: slidein; margin-right:0px;}
/* @-webkit-keyframes _slidein {from {margin-left:-320px; }to { margin-left:0;}} */
@-webkit-keyframes slidein {from { margin-top: 120px; opacity:0; } to { margin-top: 0px; opacity:1; } }
/* -webkit-transform:rotateX(30deg); */
.slideFloor {-webkit-animation-timing-function: ease;-webkit-animation-duration: 1000ms;-webkit-animation-name: slidein; margin-left:0px;}
@-webkit-keyframes slideFloor {from { margin-top: 120px; opacity:0; } to { margin-top: 0px; opacity:1;} }
/* #slideMenu.slideOut {-webkit-animation-timing-function: ease;-webkit-animation-duration: 350ms;-webkit-animation-name: slideout;}
@-webkit-keyframes slideout {from {margin-left:0; }to { margin-left:-320px;}} */
</style>
<script type="text/javascript" src="file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.1/Applications/6B3E54D6-18F5-404B-A952-B255695821FE/KwinTabBar2.app/alexframework/src/javascript/gear5.js"></script>
<script type="text/javascript" src="file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.1/Applications/6B3E54D6-18F5-404B-A952-B255695821FE/KwinTabBar2.app/alexframework/src/javascript/jquery.min.js"></script>
<script type="text/javascript" src="file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.1/Applications/6B3E54D6-18F5-404B-A952-B255695821FE/KwinTabBar2.app/alexframework/src/javascript/alex.core.js"></script>
<script type="text/javascript" src="file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.1/Applications/6B3E54D6-18F5-404B-A952-B255695821FE/KwinTabBar2.app/alexframework/src/javascript/alex.record.js"></script>
<script type="text/javascript" src="file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.1/Applications/6B3E54D6-18F5-404B-A952-B255695821FE/KwinTabBar2.app/alexframework/src/javascript/albums.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript" ></script>
<!--<script type="text/javascript" src="file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.1/Applications/6B3E54D6-18F5-404B-A952-B255695821FE/KwinTabBar2.app/alexframework/src/javascript/facebook.js"></script>-->
<script type="text/javascript">
function setCss(currentWidth){
if ( navigator.userAgent.match( /iPhone/i ) || navigator.userAgent.match( /iPod/i ) ) {
var el = document.getElementById("ctrl1");
el.style.position = 'absolute';
el.style.left = '0px';
if(window.navigator.standalone){ el.style.top = '10px'; }
}
shape.style.top='25%';
floor.style.top='30%';
floor.style.left='-50%';
var tY = -1*(720-586)/2;
var tY = 0;
///if (floorImg.naturalWidth > floorImg.naturalHeight ){
/// var tZ = 80 - (floorImg.naturalWidth - floorImg.naturalHeight );
///}else{ var tZ = 80; }
// alert("setCss");
// floor.style.webkitTransform='rotateX(90deg) rotateY(0deg) rotateZ(0deg) translateZ('+tZ+'px) translateY(10px)';
// var _rotateY = 90; shape.style.webkitTransform = 'rotateY('+_rotateY+'deg)';
//alert(window.orientation+","+currentWidth);
if (window.orientation == 90 || window.orientation == -90||currentWidth > 800){
ctrl2.style.top='60%';ctrl1.style.left='42%';
}
}
</script>
<!-- <script type="text/javascript">
google.maps.event.addDomListener(window, 'load', function() {
var latlng = new google.maps.LatLng(29.988611, 52.871944); // -34.397, 150.644); 29.988611, 52.871944 37.409722, 34.1725
var myOptions = {zoom: 4,center: latlng,mapTypeId: google.maps.MapTypeId.HYBRID, // ROADMAP SATELLITE HYBRID TERRAIN
zoomControl: true,}; // scaleControl: true,
var map = new google.maps.Map(document.getElementById("map"), myOptions);
var marker = new google.maps.Marker({ position: latlng, map: map, title:"Hello World!"});
var infowindow = new google.maps.InfoWindow({content: 'test',size: new google.maps.Size(200, 100)});
google.maps.event.addListener(marker, 'click', function() {infowindow.open(map,marker); });
});
</script>-->
</head>
<body onload="addAnimationHandlers('/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.1/Applications/6B3E54D6-18F5-404B-A952-B255695821FE/KwinTabBar2.app',90,'stop','0','800')">
<br/ >
<br />
<div id="getComment"></div>
<div id="container">
<div id="stage">
<div id="shape" class="ring2 ">
<div id="shapeX" class="ring2 ">
<img class="subplane s1 slideIn" id="sub1" style="padding:0px;"/><img class="subplane s2 slideIn" id="sub2" style="padding:0px;"/>
<img class="subplane s3 slideIn" id="sub3" style="padding:0px;"/><img class="subplane s4 slideIn" id="sub4" style="padding:0px;"/>
<img class="subplane s5 slideIn" id="sub5" style="padding:0px;"/><img class="subplane s6 slideIn" id="sub6" style="padding:0px;"/>
<img class="subplane s7 slideIn" id="sub7" style="padding:0px;"/><img class="subplane s8 slideIn" id="sub8" style="padding:0px;"/>
<img class="subplane s9 slideIn" id="sub9" style="padding:0px;"/><img class="subplane s10 slideIn" id="sub10" style="padding:0px;"/>
<img class="subplane s11 slideIn" id="sub11" style="padding:0px;"/><img class="subplane s12 slideIn" id="sub12" style="padding:0px;"/>
<div class="plane s1 slideIn" id="s1" >
<a href='#' onclick="pop('1','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/531258_10150867862136880_727371879_9690261_386718335_n.jpg','1/(null)','3124038432335509992','https://www.facebook.com/photo.php?fbid=10150867862136880&set=a.10150868557621880.440808.727371879&type=1','a_ios','160','99','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/531258_10150867862136880_727371879_9690261_386718335_n.jpg','0','0')">
<img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/531258_10150867862136880_727371879_9690261_386718335_n.jpg" width="160" style="margin-left:0px; margin-top:88px; padding:0px;" id="i1"></a></div>
<div class="plane s2 slideIn" id="s2" >
<a href='#' onclick="pop('2','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/s720x720/540573_364116136967291_170251749687065_956914_401851872_n.jpg','2/(null)','170251749687065_81592','https://www.facebook.com/photo.php?fbid=364116136967291&set=a.364115243634047.81592.170251749687065&type=1','a_ios','160','51','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/s720x720/540573_364116136967291_170251749687065_956914_401851872_n.jpg','0','0')">
<img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/s720x720/540573_364116136967291_170251749687065_956914_401851872_n.jpg" width="160" style="margin-left:0px; margin-top:70px; padding:0px;" id="i2"></a></div>
<div class="plane s3 slideIn" id="s3" >
<a href='#' onclick="pop('3','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/s720x720/534770_367335489978689_170251749687065_963637_1100463937_n.jpg','3/(null)','170251749687065_81999','https://www.facebook.com/photo.php?fbid=367335489978689&set=a.367335209978717.81999.170251749687065&type=1','a_ios','160','58','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/s720x720/534770_367335489978689_170251749687065_963637_1100463937_n.jpg','0','0')">
<img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/s720x720/534770_367335489978689_170251749687065_963637_1100463937_n.jpg" width="160" style="margin-left:0px; margin-top:70px; padding:0px;" id="i3"></a></div>
<div class="plane s4 slideIn" id="s4" >
<a href='#' onclick="pop('4','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-snc6/247035_192147500830823_170251749687065_451666_4293116_n.jpg','4/(null)','170251749687065_45304','https://www.facebook.com/photo.php?fbid=192147500830823&set=a.192147124164194.45304.170251749687065&type=1','a_ios','160','55','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-snc6/247035_192147500830823_170251749687065_451666_4293116_n.jpg','0','0')">
<img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-snc6/247035_192147500830823_170251749687065_451666_4293116_n.jpg" width="160" style="margin-left:0px; margin-top:94px; padding:0px;" id="i4"></a></div>
<div class="plane s5 slideIn" id="s5" >
<a href='#' onclick="pop('5','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-snc6/247157_192145187497721_170251749687065_451578_2303316_n.jpg','5/(null)','170251749687065_45303','https://www.facebook.com/photo.php?fbid=192145187497721&set=a.192144577497782.45303.170251749687065&type=1','a_ios','160','60','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-snc6/247157_192145187497721_170251749687065_451578_2303316_n.jpg','0','0')">
<img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-snc6/247157_192145187497721_170251749687065_451578_2303316_n.jpg" width="160" style="margin-left:0px; margin-top:100px; padding:0px;" id="i5"></a></div>
<div class="plane s6 slideIn" id="s6" >
<a href='#' onclick="pop('6','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash4/s720x720/398277_367572226621682_170251749687065_964579_945577160_n.jpg','6/(null)','170251749687065_82042','https://www.facebook.com/photo.php?fbid=367572226621682&set=a.367572203288351.82042.170251749687065&type=1','a_ios','160','67','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash4/s720x720/398277_367572226621682_170251749687065_964579_945577160_n.jpg','0','0')">
<img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash4/s720x720/398277_367572226621682_170251749687065_964579_945577160_n.jpg" width="160" style="margin-left:0px; margin-top:95px; padding:0px;" id="i6"></a></div>
<div class="plane s7 slideIn" id="s7" >
<a href='#' onclick="pop('7','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash4/s720x720/313453_227147683997471_170251749687065_588106_5132583_n.jpg','7/(null)','170251749687065_54182','https://www.facebook.com/photo.php?fbid=227147683997471&set=a.227147650664141.54182.170251749687065&type=1','a_ios','160','54','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash4/s720x720/313453_227147683997471_170251749687065_588106_5132583_n.jpg','0','0')">
<img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash4/s720x720/313453_227147683997471_170251749687065_588106_5132583_n.jpg" width="160" style="margin-left:0px; margin-top:96px; padding:0px;" id="i7"></a></div>
<div class="plane s8 slideIn" id="s8" >
<a href='#' onclick="pop('8','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/578678_367337533311818_170251749687065_963674_1549291493_n.jpg','8/(null)','170251749687065_82000','https://www.facebook.com/photo.php?fbid=367337533311818&set=a.367337479978490.82000.170251749687065&type=1','a_ios','160','59','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/578678_367337533311818_170251749687065_963674_1549291493_n.jpg','0','0')">
<img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/578678_367337533311818_170251749687065_963674_1549291493_n.jpg" width="160" style="margin-left:0px; margin-top:115px; padding:0px;" id="i8"></a></div>
<div class="plane s9 slideIn" id="s9" >
<a href='#' onclick="pop('9','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/s720x720/540169_365109120201326_170251749687065_959261_1692796122_n.jpg','9/(null)','170251749687065_81723','https://www.facebook.com/photo.php?fbid=365109120201326&set=a.365100403535531.81723.170251749687065&type=1','a_ios','160','52','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/s720x720/540169_365109120201326_170251749687065_959261_1692796122_n.jpg','0','0')">
<img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/s720x720/540169_365109120201326_170251749687065_959261_1692796122_n.jpg" width="160" style="margin-left:0px; margin-top:70px; padding:0px;" id="i9"></a></div>
<div class="plane s10 slideIn" id="s10" >
<a href='#' onclick="pop('10','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash4/247945_192150064163900_170251749687065_451769_7103373_n.jpg','10/(null)','170251749687065_45305','https://www.facebook.com/photo.php?fbid=192150064163900&set=a.192149594163947.45305.170251749687065&type=1','a_ios','160','56','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash4/247945_192150064163900_170251749687065_451769_7103373_n.jpg','0','0')">
<img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash4/247945_192150064163900_170251749687065_451769_7103373_n.jpg" width="160" style="margin-left:0px; margin-top:70px; padding:0px;" id="i10"></a></div>
<div class="plane s11 slideIn" id="s11" >
<a href='#' onclick="pop('11','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-snc6/249909_192140004164906_170251749687065_451382_7191975_n.jpg','11/(null)','170251749687065_45300','https://www.facebook.com/photo.php?fbid=192140004164906&set=a.192139274164979.45300.170251749687065&type=1','a_ios','160','61','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-snc6/249909_192140004164906_170251749687065_451382_7191975_n.jpg','0','0')">
<img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-snc6/249909_192140004164906_170251749687065_451382_7191975_n.jpg" width="160" style="margin-left:0px; margin-top:70px; padding:0px;" id="i11"></a></div>
<div class="plane s12 slideIn" id="s12" >
<a href='#' onclick="pop('12','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-prn1/s720x720/524154_367330693312502_170251749687065_963614_629612418_n.jpg','12/(null)','170251749687065_81595','https://www.facebook.com/photo.php?fbid=367330693312502&set=a.364122320300006.81595.170251749687065&type=1','a_ios','160','50','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-prn1/s720x720/524154_367330693312502_170251749687065_963614_629612418_n.jpg','0','0')">
<img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-prn1/s720x720/524154_367330693312502_170251749687065_963614_629612418_n.jpg" width="160" style="margin-left:0px; margin-top:90px; padding:0px;" id="i12"></a></div>
<div class="plane s13 slideIn" id="s13" style="height:204px; width:133px;">
<a href='#' onclick="pop('13','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-prn1/s720x720/538507_365128310199407_170251749687065_959386_1481220093_n.jpg','Caption','170251749687065_81727','https://www.facebook.com/photo.php?fbid=365128310199407&set=a.365126280199610.81727.170251749687065&type=1','a_ios','103','57','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-prn1/s720x720/538507_365128310199407_170251749687065_959386_1481220093_n.jpg','0', '0')">
<img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-prn1/s720x720/538507_365128310199407_170251749687065_959386_1481220093_n.jpg" width="103" style="padding:0px;" id="i13"></a></div><div class="plane s14 slideIn" id="s14" style="height:204px; width:133px;">
<a href='#' onclick="pop('14','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-snc6/168355_170252239687016_170251749687065_328030_1708631_n.jpg','Caption','170251749687065_33930','https://www.facebook.com/photo.php?fbid=170252239687016&set=a.170252233020350.33930.170251749687065&type=1','a_ios','103','64','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-snc6/168355_170252239687016_170251749687065_328030_1708631_n.jpg','0', '0')">
<img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-snc6/168355_170252239687016_170251749687065_328030_1708631_n.jpg" width="103" style="padding:0px;" id="i14"></a></div><div class="plane s15 slideIn" id="s15" style="height:204px; width:133px;">
<a href='#' onclick="pop('15','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/180297_170699769642263_170251749687065_330236_610381_n.jpg','Caption','170251749687065_33929','https://www.facebook.com/photo.php?fbid=170699769642263&set=a.170251943020379.33929.170251749687065&type=1','a_ios','103','62','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/180297_170699769642263_170251749687065_330236_610381_n.jpg','0', '0')">
<img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/180297_170699769642263_170251749687065_330236_610381_n.jpg" width="103" style="padding:0px;" id="i15"></a></div>
<div id="floor" class="slideFloor" align="center">
<!--<img src='@@@' id="floorImg" width="500" height="500">-->
<img src='http://blog-reader.appspot.com/imgurl?rsssheetkey=site:Johannes_Vermeer,startRSS,limitRSS,1' id="floorImg" width="500" height="500">
</div>
<span id="floor_text"></span>
</div>
</div>
<!-- <span id="floor_text"></span>-->
</div>
</div>
<div class="controls" id="ctrl1" style="position:absolute;top:2%; left:38%;width:180px; height:32px; ">
<button onmouseover="toggleShape1(100)" onclick="toggleShape1(200)" class="ctlBtn">-Zoom</button>
<button onmouseover="toggleShape1(-100)" onclick="toggleShape1(-200)" class="ctlBtn">Zoom+</button>
</div>
<div class="controls" id="ctrl2" style="position:absolute;width:282px"><!-- style="position:absolute; top:30px;"-->
<table><tr><td style="height:32px">
<a href="#" onclick="runAction('fbAlbum','170251749687065_82042,http://blog-reader.appspot.com/imgurl?rsssheetkey=site:Johannes_Vermeer,startRSS,limitRSS,1,prev,0');">
<img src='file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.1/Applications/6B3E54D6-18F5-404B-A952-B255695821FE/KwinTabBar2.app/gray_ball.png'
style="-webkit-transform:rotateX(10deg) rotateY(45deg);height:40px; width:48px;opacity:0.5;margin-left:-15px;margin-bottom:3px"/></a>
</td><td>
<button onclick="autoRotate('left')" class="ctlBtn">
< </button> <button onclick="autoRotate('stop');" class="ctlBtn">■</button>
<button onclick="autoRotate('right')" class="ctlBtn"> > </button>
</td><td>
<a href="#" onclick="runAction('fbAlbum','170251749687065_82042,http://blog-reader.appspot.com/imgurl?rsssheetkey=site:Johannes_Vermeer,startRSS,limitRSS,1,next,0');">
<img src='file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.1/Applications/6B3E54D6-18F5-404B-A952-B255695821FE/KwinTabBar2.app/gray_ball.png'
style="-webkit-transform:rotateX(10deg) rotateY(-45deg);height:40px; width:48px;opacity:0.5;margin-right:-20px;margin-bottom:3px"/></a>
<!--<button onclick="toggleShape1(400)">-Zoom</button> <button onclick="toggleShape1(-400)">Zoom+</button>-->
</td></tr>
</table>
</div>
<div style="position:absolute; bottom:10px;">
<a href="#" onclick='runAction("fbtest","")'>fbtest</a><br />
<a href="#" onclick='runAction("changeCurrentTitle","0")'>Home</a><br />
<a href="#" onclick='runAction("changeCurrentTitle","0")'>parentTitle</a><br />
</div>
<input id="_type" type="hidden" value="000" />
<div id="map" style="position:absolute;left:15%; width:600px; height:300px;"></div>
<script type="text/javascript" src="file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.1/Applications/6B3E54D6-18F5-404B-A952-B255695821FE/KwinTabBar2.app/alexframework/src/javascript/googleMap.js"></script>
<!--<div id="fb-root"></div>-->
<!--<script>
window.fbAsyncInit = function() {
FB.init({
appId : '142574589139226', // App ID
channelUrl : '//snsimglink.appspot.com/channel.html', // Channel File
status : false, // check login status true
cookie : false, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>-->
</body>
</html>kwin786http://www.blogger.com/profile/11636870499038520354noreply@blogger.com0tag:blogger.com,1999:blog-4631337081774196669.post-4411319054289390432012-05-07T11:33:00.002+09:002012-05-07T14:42:45.180+09:00伊藤若冲 鯨象屏風図<!--<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">-->
<html lang="en">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0, user-scalable=YES" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<style type="text/css" media="screen">
body { background-color: black; color: white; font-family: 'Lucida Grande', Verdana, Arial; font-size: 12px;
background-image: -webkit-gradient(radial,50% 500,1,50% 500,400, from(rgba(255, 255, 255, 0.3)),to(rgba(255, 255, 255, 0)));
background-repeat: no-repeat; }
#container { width: 100%; height: 850px;
-webkit-perspective: 800; /* For compatibility with iPhone 3.0, we leave off the units here */
-webkit-perspective-origin: 50% 225px;
}
/* 0 -> -120 -100 -> -50 2012/02/07 */
#floor { position:absolute;top:-10%; left:-50% ; margin-top:-120px; margin-left:-50px;
-webkit-mask-image:-webkit-gradient(radial, center center, 0, center center, 350,from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
-webkit-transform: rotateX(90deg) rotateY(0deg) rotateZ(0deg) translateZ(-210px) translateY(10px);
}
#floorBallLeft { position:absolute;top:-10%; left:10% ; margin-top:0px; margin-left:-90px; height:50px; opacity:0.5;
-webkit-transform: rotateX(15deg) rotateY(45deg) rotateZ(0deg) translateZ(0px) translateY(0px); }
#floorBallRight { position:absolute;top:-10%; right:15% ; margin-top:0px; margin-right:-90px; height:50px; width:45px;opacity:0.5;
-webkit-transform: rotateX(10deg) rotateY(-45deg) rotateZ(0deg) translateZ(0px) translateY(0px); }
#floorBallHome { position:absolute;top:20%; left:35% ; margin-top:60px; margin-left:0px; height:35px; width:75px; opacity:0.3;
-webkit-transform: rotateX(15deg) rotateY(0deg) rotateZ(0deg) translateZ(0px) translateY(0px); }
a:link { text-decoration: none; color:#DF1FBB; }
a:active { text-decoration: none; color:#DF1FBB; }
a:visited { text-decoration: none; color:#DF1FBB; } /* #555555 */
a:hover { text-decoration: none; color:#DF1FBB; }
li { display:inline-block; }
#floor_text{ position: absolute;
top:80%; left:-80%; height: 800px; width: 420px;
border: 0px solid white;
-webkit-box-sizing: border-box; text-align: left; font-family: Times, serif;
font-size: 20pt; font-color: white; /*font-size: 24pt; color: white; */
}
#stage { width: 100%; height: 100%; -webkit-transition: -webkit-transform 2s; -webkit-transform-style: preserve-3d; }
#shape { position: relative; top: 50px; margin: 0 auto; height: 400px; width: 204px; -webkit-transform-style: preserve-3d; }
#shapeX { margin: 0 auto; height: 200px; width: 200px; -webkit-transform-style: preserve-3d; }
.plane { position: absolute; top:0%; /*top:-150%; */
height: 400px; width: 204px; border: 0px solid white;
text-align: center; font-family: Times, serif; font-size: 124pt; color: black;
background-image: -webkit-gradient(linear, left bottom, right top,from(rgba(0,0,0,0)), to(rgba(0,0,0,1.0)));
background-repeat: no-repeat;
background-color: rgba( 0, 0, 0, 0.4); /* 0.6 */
-webkit-box-sizing: border-box;
-webkit-transition: -webkit-transform 2s, opacity 2s; -webkit-backface-visibility: hidden; /* hidden */
}
.subplane {position: absolute; width:204px;top:-335px; border: 0px; padding:0px; opacity:0.5;
-webkit-transition: -webkit-transform 2s,opacity 2s;-webkit-backface-visibility:visible;}
#shape.backfaces .plane { -webkit-backface-visibility: visible; }
@-webkit-keyframes spin { from { -webkit-transform: rotateY(0); } to { -webkit-transform: rotateY(-360deg); } }
@-webkit-keyframes spinR{ from { -webkit-transform: rotateY(0); } to { -webkit-transform: rotateY( 360deg); } }
@-webkit-keyframes spin0{ }
/* 上部の説明文の書式設定 背景は灰色で角を丸める .controls {width: 70%; height:10%; margin: 0 auto; padding: 5px 20px; */
.controls { opacity:0.6; /* width: 80%; height:40%; */
position:absolute;top:80%; left:34%; height:36px; /* bottom:1% */
margin: 0 auto; padding: 5px 10px; background-color: rgba(255, 255, 255, 0.15);
-webkit-border-radius: 48px; }
.ctlBtn { font-size:10pt; opacity:0.8; margin-bottom:7px;}
.controls > div { margin: 10px; }
/* ---------- ring2 styles ------------- */
.ring2 > .s1 { -webkit-transform: rotateY( 0deg) translateY( 0px) translateZ(-380px); }
.ring2 > .s2 { -webkit-transform: rotateY( -30deg) translateY( 0px) translateZ(-380px); }
.ring2 > .s3 { -webkit-transform: rotateY( -60deg) translateY( 0px) translateZ(-380px); }
.ring2 > .s4 { -webkit-transform: rotateY( -90deg) translateZ(-380px); }
.ring2 > .s5 { -webkit-transform: rotateY( -120deg) translateZ(-380px); }
.ring2 > .s6 { -webkit-transform: rotateY( -150deg) translateZ(-380px); }
.ring2 > .s7 { -webkit-transform: rotateY( -180deg) translateZ(-380px); }
.ring2 > .s8 { -webkit-transform: rotateY( -210deg) translateZ(-380px); }
.ring2 > .s9 { -webkit-transform: rotateY( 120deg) translateZ(-380px); }
.ring2 > .s10 { -webkit-transform: rotateY( 90deg) translateZ(-380px); }
.ring2 > .s11 { -webkit-transform: rotateY( -300deg) translateZ(-380px); }
.ring2 > .s12 { -webkit-transform: rotateY( -330deg) translateZ(-380px); }
.ring2 > .s13 { -webkit-transform: translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s14 { -webkit-transform: rotateY( -20deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s15 { -webkit-transform: rotateY( -40deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s16 { -webkit-transform: rotateY( -60deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s17 { -webkit-transform: rotateY( -80deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s18 { -webkit-transform: rotateY( -100deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s19 { -webkit-transform: rotateY( -120deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s20 { -webkit-transform: rotateY( -140deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s21 { -webkit-transform: rotateY( -160deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s22 { -webkit-transform: rotateY( -180deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s23 { -webkit-transform: rotateY( -200deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s24 { -webkit-transform: rotateY( -220deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s25 { -webkit-transform: rotateY( -240deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s26 { -webkit-transform: rotateY( -260deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s27 { -webkit-transform: rotateY( -280deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s28 { -webkit-transform: rotateY( -300deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s29 { -webkit-transform: rotateY( -320deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s30 { -webkit-transform: rotateY( -340deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.slideIn {-webkit-animation-timing-function: ease ;-webkit-animation-duration: 1500ms;-webkit-animation-name: slidein; margin-right:0px;}
@-webkit-keyframes slidein {from { margin-top: 120px; opacity:0; } to { margin-top: 0px; opacity:1; } }
.slideFloor {-webkit-animation-timing-function: ease;-webkit-animation-duration: 1000ms;-webkit-animation-name: slidein; margin-left:0px;}
@-webkit-keyframes slideFloor {from { margin-top: 120px; opacity:0; } to { margin-top: 0px; opacity:1;} }
@-webkit-keyframes slideout {from {margin-left:0; }to { margin-left:-320px;}} */
</style>
<script type="text/javascript">
function setCss(currentWidth){
if ( navigator.userAgent.match( /iPhone/i ) || navigator.userAgent.match( /iPod/i ) ) {
var el = document.getElementById("ctrl1");
el.style.position = 'absolute';
el.style.left = '0px';
if(window.navigator.standalone){ el.style.top = '10px'; }
}
shape.style.top='25%';
floor.style.top='30%';
floor.style.left='-50%';
var tY = -1*(720-586)/2;
var tY = 0;
///if (floorImg.naturalWidth > floorImg.naturalHeight ){
/// var tZ = 80 - (floorImg.naturalWidth - floorImg.naturalHeight );
///}else{ var tZ = 80; }
// alert("setCss");
// floor.style.webkitTransform='rotateX(90deg) rotateY(0deg) rotateZ(0deg) translateZ('+tZ+'px) translateY(10px)';
// var _rotateY = 90; shape.style.webkitTransform = 'rotateY('+_rotateY+'deg)';
//alert(window.orientation+","+currentWidth);
if (window.orientation == 90 || window.orientation == -90||currentWidth > 800){
ctrl2.style.top='60%';ctrl1.style.left='42%';
}
}
</script>
</head>
<body onload="addAnimationHandlers('/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.0/Applications/66B874B3-28C2-4259-9387-D11AE8897050/KwinTabBar2.app',30,'stop','-34.0355556,23.04889','800')">
<br/ >
<br />
<div id="getComment"></div>
<div id="container">
<div id="stage">
<div id="shape" class="ring2 ">
<div id="shapeX" class="ring2 ">
<img class="subplane s1 slideIn" id="sub1" style="padding:0px;"/><img class="subplane s2 slideIn" id="sub2" style="padding:0px;"/>
<img class="subplane s3 slideIn" id="sub3" style="padding:0px;"/><img class="subplane s4 slideIn" id="sub4" style="padding:0px;"/>
<img class="subplane s5 slideIn" id="sub5" style="padding:0px;"/><img class="subplane s6 slideIn" id="sub6" style="padding:0px;"/>
<img class="subplane s7 slideIn" id="sub7" style="padding:0px;"/><img class="subplane s8 slideIn" id="sub8" style="padding:0px;"/>
<img class="subplane s9 slideIn" id="sub9" style="padding:0px;"/><img class="subplane s10 slideIn" id="sub10" style="padding:0px;"/>
<img class="subplane s11 slideIn" id="sub11" style="padding:0px;"/><img class="subplane s12 slideIn" id="sub12" style="padding:0px;"/>
<div class="plane s1 slideIn" id="s1" >
<a href='#' onclick="pop('1','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/562113_10150867861901880_727371879_9690256_1785638268_n.jpg#10150867861901880','1/(null)','286','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/562113_10150867861901880_727371879_9690256_1785638268_n.jpg#10150867861901880','p','204','119','286','0','0')">
<img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/562113_10150867861901880_727371879_9690256_1785638268_n.jpg#10150867861901880" width="204" style="margin-left:0px; margin-top:97px; padding:0px;" id="i1"></a></div>
<div class="plane s2 slideIn" id="s2" >
<a href='#' onclick="pop('2','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/549430_10150867861876880_727371879_9690253_1590225678_n.jpg#10150867861876880','2/(null)','287','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/549430_10150867861876880_727371879_9690253_1590225678_n.jpg#10150867861876880','p','204','120','287','0','0')">
<img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/549430_10150867861876880_727371879_9690253_1590225678_n.jpg#10150867861876880" width="204" style="margin-left:0px; margin-top:97px; padding:0px;" id="i2"></a></div>
<div class="plane s3 slideIn" id="s3" >
<a href='#' onclick="pop('3','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/524425_10150867861871880_727371879_9690254_533482249_n.jpg#10150867861871880','3/(null)','288','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/524425_10150867861871880_727371879_9690254_533482249_n.jpg#10150867861871880','p','204','121','288','0','0')">
<img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/524425_10150867861871880_727371879_9690254_533482249_n.jpg#10150867861871880" width="204" style="margin-left:0px; margin-top:97px; padding:0px;" id="i3"></a></div>
<div class="plane s4 slideIn" id="s4" >
<a href='#' onclick="pop('4','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash4/380225_10150867861881880_727371879_9690255_1188222207_n.jpg#10150867861881880','4/(null)','289','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash4/380225_10150867861881880_727371879_9690255_1188222207_n.jpg#10150867861881880','p','204','122','289','0','0')">
<img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash4/380225_10150867861881880_727371879_9690255_1188222207_n.jpg#10150867861881880" width="204" style="margin-left:0px; margin-top:97px; padding:0px;" id="i4"></a></div>
<div class="plane s5 slideIn" id="s5" >
<a href='#' onclick="pop('5','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/531258_10150867862136880_727371879_9690261_386718335_n.jpg#10150867862136880','5/(null)','290','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/531258_10150867862136880_727371879_9690261_386718335_n.jpg#10150867862136880','p','204','123','290','0','0')">
<img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/531258_10150867862136880_727371879_9690261_386718335_n.jpg#10150867862136880" width="204" style="margin-left:0px; margin-top:97px; padding:0px;" id="i5"></a></div>
<div class="plane s6 slideIn" id="s6" >
<a href='#' onclick="pop('6','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash4/403416_10150867862066880_727371879_9690258_370291913_n.jpg#10150867862066880','6/(null)','291','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash4/403416_10150867862066880_727371879_9690258_370291913_n.jpg#10150867862066880','p','204','124','291','0','0')">
<img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash4/403416_10150867862066880_727371879_9690258_370291913_n.jpg#10150867862066880" width="204" style="margin-left:0px; margin-top:97px; padding:0px;" id="i6"></a></div>
<div class="plane s13 slideIn" id="s13" style="height:204px; width:133px;">
<a href='#' onclick="pop('13','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/s720x720/578049_10150867862106880_727371879_9690260_1986029396_n.jpg#10150867862106880','Caption','285','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/s720x720/578049_10150867862106880_727371879_9690260_1986029396_n.jpg#10150867862106880','p','103','118','285','0', '0')">
<img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/s720x720/578049_10150867862106880_727371879_9690260_1986029396_n.jpg#10150867862106880" width="103" style="padding:0px;" id="i13"></a></div>
<div class="plane s15 slideIn" id="s15" style="height:204px; width:133px;">
<a href="http://www.amazon.co.jp/gp/product/4863240155/ref=as_li_ss_il?ie=UTF8&tag=kwin786-22&linkCode=as2&camp=247&creative=7399&creativeASIN=4863240155">
<img border="0" src="http://ws.assoc-amazon.jp/widgets/q?_encoding=UTF8&Format=_SL160_&ASIN=4863240155&MarketPlace=JP&ID=AsinImage&WS=1&tag=kwin786-22&ServiceVersion=20070822" ></a>
</div>
<div class="plane s16 slideIn" id="s16" style="height:204px; width:133px;">
<a href="http://www.amazon.co.jp/gp/product/4863240171/ref=as_li_ss_il?ie=UTF8&tag=kwin786-22&linkCode=as2&camp=247&creative=7399&creativeASIN=4863240171"><img border="0" src="http://ws.assoc-amazon.jp/widgets/q?_encoding=UTF8&Format=_SL160_&ASIN=4863240171&MarketPlace=JP&ID=AsinImage&WS=1&tag=kwin786-22&ServiceVersion=20070822" ></a></div>
<div class="plane s18 slideIn" id="s18" style="height:204px; width:133px;">
<a href="http://www.amazon.co.jp/gp/product/4863240120/ref=as_li_ss_il?ie=UTF8&tag=kwin786-22&linkCode=as2&camp=247&creative=7399&creativeASIN=4863240120"><img border="0" src="http://ws.assoc-amazon.jp/widgets/q?_encoding=UTF8&Format=_SL160_&ASIN=4863240120&MarketPlace=JP&ID=AsinImage&WS=1&tag=kwin786-22&ServiceVersion=20070822" ></a></div>
<div id="floor" class="slideFloor" align="center">
<!--<img src='@@@' id="floorImg" width="500" height="500">-->
<div id="map" style="width:500px; height:500px;"></div>
</div>
<span id="floor_text"></span>
</div>
</div>
<!-- <span id="floor_text"></span>-->
</div>
</div>
<div class="controls" id="ctrl1" style="position:absolute;top:2%; left:38%;width:180px; height:32px; ">
<button onmouseover="toggleShape1(100)" onclick="toggleShape1(200)" class="ctlBtn">-Zoom</button>
<button onmouseover="toggleShape1(-100)" onclick="toggleShape1(-200)" class="ctlBtn">Zoom+</button>
</div>
<div class="controls" id="ctrl2" style="position:absolute;width:282px"><!-- style="position:absolute; top:30px;"-->
<table><tr><td style="height:32px">
<a href="#" onclick="runAction('fbAlbum','170251749687065_82296,https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash4/s720x720/485789_10150867862011880_727371879_9690257_154328139_n.jpg#10150867862011880,prev,-34.0355556,23.04889');">
<img src='file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.0/Applications/66B874B3-28C2-4259-9387-D11AE8897050/KwinTabBar2.app/gray_ball.png'
style="-webkit-transform:rotateX(10deg) rotateY(45deg);height:40px; width:48px;opacity:0.5;margin-left:-15px;margin-bottom:3px"/></a>
</td><td>
<button onclick="autoRotate('left')" class="ctlBtn">
< </button> <button onclick="autoRotate('stop');" class="ctlBtn">■</button>
<button onclick="autoRotate('right')" class="ctlBtn"> > </button>
</td><td>
<a href="#" onclick="runAction('fbAlbum','170251749687065_82296,https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash4/s720x720/485789_10150867862011880_727371879_9690257_154328139_n.jpg#10150867862011880,next,-34.0355556,23.04889');">
<img src='file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.0/Applications/66B874B3-28C2-4259-9387-D11AE8897050/KwinTabBar2.app/gray_ball.png'
style="-webkit-transform:rotateX(10deg) rotateY(-45deg);height:40px; width:48px;opacity:0.5;margin-right:-20px;margin-bottom:3px"/></a>
<!--<button onclick="toggleShape1(400)">-Zoom</button> <button onclick="toggleShape1(-400)">Zoom+</button>-->
</td></tr>
</table>
</div>
<div style="position:absolute; bottom:10px;">
<a href="#" onclick='runAction("fbtest","")'>fbtest</a><br />
<a href="#" onclick='runAction("changeCurrentTitle","0")'>Home</a><br />
<a href="#" onclick='runAction("changeCurrentTitle","0")'>parentTitle</a><br />
</div>
<input id="_type" type="hidden" value="000" />
<div id="map" style="position:absolute;left:15%; width:600px; height:300px;"></div>
<!-- <script type="text/javascript" src="file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.0/Applications/66B874B3-28C2-4259-9387-D11AE8897050/KwinTabBar2.app/alexframework/src/javascript/googleMap.js"></script>-->
<!--<div id="fb-root"></div>-->
<!--<script>
window.fbAsyncInit = function() {
FB.init({
appId : '142574589139226', // App ID
channelUrl : '//snsimglink.appspot.com/channel.html', // Channel File
status : false, // check login status true
cookie : false, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>-->
</body>
</html>kwin786http://www.blogger.com/profile/11636870499038520354noreply@blogger.com0tag:blogger.com,1999:blog-4631337081774196669.post-88503262592196078062012-05-02T21:00:00.001+09:002012-05-05T10:22:25.194+09:00マチュピチュ<!--<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">-->
<html lang="en">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0, user-scalable=YES" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<style type="text/css" media="screen">
body { background-color: black; color: white; font-family: 'Lucida Grande', Verdana, Arial; font-size: 12px;
background-image: -webkit-gradient(radial,50% 500,1,50% 500,400, from(rgba(255, 255, 255, 0.3)),to(rgba(255, 255, 255, 0)));
background-repeat: no-repeat; }
#container { width: 100%; height: 850px;
-webkit-perspective: 800; /* For compatibility with iPhone 3.0, we leave off the units here */
-webkit-perspective-origin: 50% 225px;
}
/* 0 -> -120 -100 -> -50 2012/02/07 */
#floor { position:absolute;top:-10%; left:-50% ; margin-top:-120px; margin-left:-50px;
-webkit-mask-image:-webkit-gradient(radial, center center, 0, center center, 350,from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
-webkit-transform: rotateX(90deg) rotateY(0deg) rotateZ(0deg) translateZ(-210px) translateY(10px);
}
#floorBallLeft { position:absolute;top:-10%; left:10% ; margin-top:0px; margin-left:-90px; height:50px; opacity:0.5;
-webkit-transform: rotateX(15deg) rotateY(45deg) rotateZ(0deg) translateZ(0px) translateY(0px); }
#floorBallRight { position:absolute;top:-10%; right:15% ; margin-top:0px; margin-right:-90px; height:50px; width:45px;opacity:0.5;
-webkit-transform: rotateX(10deg) rotateY(-45deg) rotateZ(0deg) translateZ(0px) translateY(0px); }
#floorBallHome { position:absolute;top:20%; left:35% ; margin-top:60px; margin-left:0px; height:35px; width:75px; opacity:0.3;
-webkit-transform: rotateX(15deg) rotateY(0deg) rotateZ(0deg) translateZ(0px) translateY(0px); }
/* #floorC { position:absolute;top:95%; left:50% ;-webkit-transform:scale(3);}
#floorR { position:absolute;top:90%; right:15% ; margin-top:0px; margin-right:0px; -webkit-transform:scale(3);}
#floorL { position:absolute;top:90%; left: 15% ; margin-top:0px; margin-left:0px ; -webkit-transform:scale(3);}*/
a:link { text-decoration: none; color:#DF1FBB; }
a:active { text-decoration: none; color:#DF1FBB; }
a:visited { text-decoration: none; color:#DF1FBB; } /* #555555 */
a:hover { text-decoration: none; color:#DF1FBB; }
li { display:inline-block; }
#floor_text{ position: absolute;
top:80%; left:-80%; height: 800px; width: 420px;
border: 0px solid white;
-webkit-box-sizing: border-box; text-align: left; font-family: Times, serif;
font-size: 20pt; font-color: white; /*font-size: 24pt; color: white; */
}
#stage { width: 100%; height: 100%; -webkit-transition: -webkit-transform 2s; -webkit-transform-style: preserve-3d; }
#shape { position: relative; top: 0px; margin: 0 auto; height: 400px; width: 204px; -webkit-transform-style: preserve-3d; }
#shapeX { margin: 0 auto; height: 200px; width: 200px; -webkit-transform-style: preserve-3d; }
.plane { position: absolute; top:-150%;
height: 400px; width: 204px; border: 0px solid white;
text-align: center; font-family: Times, serif; font-size: 124pt; color: black;
background-image: -webkit-gradient(linear, left bottom, right top,from(rgba(0,0,0,0)), to(rgba(0,0,0,1.0)));
background-repeat: no-repeat;
background-color: rgba( 0, 0, 0, 0.4); /* 0.6 */
-webkit-box-sizing: border-box;
-webkit-transition: -webkit-transform 2s, opacity 2s; -webkit-backface-visibility: hidden; /* hidden */
}
.subplane {position: absolute; width:204px;top:-335px; border: 0px; padding:0px; opacity:0.5;
-webkit-transition: -webkit-transform 2s,opacity 2s;-webkit-backface-visibility:visible;}
#shape.backfaces .plane { -webkit-backface-visibility: visible; }
@-webkit-keyframes spin { from { -webkit-transform: rotateY(0); } to { -webkit-transform: rotateY(-360deg); } }
@-webkit-keyframes spinR{ from { -webkit-transform: rotateY(0); } to { -webkit-transform: rotateY( 360deg); } }
@-webkit-keyframes spin0{ }
/* 上部の説明文の書式設定 背景は灰色で角を丸める .controls {width: 70%; height:10%; margin: 0 auto; padding: 5px 20px; */
.controls { opacity:0.6; /* width: 80%; height:40%; */
position:absolute;top:80%; left:34%; height:36px; /* bottom:1% */
margin: 0 auto; padding: 5px 10px; background-color: rgba(255, 255, 255, 0.15);
-webkit-border-radius: 48px; }
.ctlBtn { font-size:10pt; opacity:0.8; margin-bottom:7px;}
.controls > div { margin: 10px; }
/* ---------- ring2 styles ------------- */
.ring2 > .s1 { -webkit-transform: rotateY( 0deg) translateY( 0px) translateZ(-380px); }
.ring2 > .s2 { -webkit-transform: rotateY( -30deg) translateY( 0px) translateZ(-380px); }
.ring2 > .s3 { -webkit-transform: rotateY( -60deg) translateY( 0px) translateZ(-380px); }
.ring2 > .s4 { -webkit-transform: rotateY( -90deg) translateZ(-380px); }
.ring2 > .s5 { -webkit-transform: rotateY( -120deg) translateZ(-380px); }
.ring2 > .s6 { -webkit-transform: rotateY( -150deg) translateZ(-380px); }
.ring2 > .s7 { -webkit-transform: rotateY( -180deg) translateZ(-380px); }
.ring2 > .s8 { -webkit-transform: rotateY( -210deg) translateZ(-380px); }
.ring2 > .s9 { -webkit-transform: rotateY( 120deg) translateZ(-380px); }
.ring2 > .s10 { -webkit-transform: rotateY( 90deg) translateZ(-380px); }
.ring2 > .s11 { -webkit-transform: rotateY( -300deg) translateZ(-380px); }
.ring2 > .s12 { -webkit-transform: rotateY( -330deg) translateZ(-380px); }
/* .slideIn {-webkit-animation-timing-function: ease ;-webkit-animation-duration: 1500ms;-webkit-animation-name: slidein; margin-left:0px;} */
.slideIn {-webkit-animation-timing-function: ease ;-webkit-animation-duration: 1500ms;-webkit-animation-name: slidein; margin-right:0px;}
/* @-webkit-keyframes _slidein {from {margin-left:-320px; }to { margin-left:0;}} */
@-webkit-keyframes slidein {from { margin-top: 120px; opacity:0; } to { margin-top: 0px; opacity:1; } }
/* -webkit-transform:rotateX(30deg); */
.slideFloor {-webkit-animation-timing-function: ease;-webkit-animation-duration: 1000ms;-webkit-animation-name: slidein; margin-left:0px;}
@-webkit-keyframes slideFloor {from { margin-top: 120px; opacity:0; } to { margin-top: 0px; opacity:1;} }
/* #slideMenu.slideOut {-webkit-animation-timing-function: ease;-webkit-animation-duration: 350ms;-webkit-animation-name: slideout;}
@-webkit-keyframes slideout {from {margin-left:0; }to { margin-left:-320px;}} */
<!--
#jquery-ui-slider-wrap { padding: 5px; text-align: center; width: 40px;
border: 1px solid gray; border-radius: 10px; background: #f0f0f0;
}
#jquery-ui-slider-value { border: 0; color: red !important;
font-weight: bold; background-color: transparent;
margin: 5px; width: 40px; text-align: center;
}
#jquery-ui-slider { margin: 10px auto; height: 150px; width:30px;}
#jquery-ui-slider-wrap2 { padding: 5px; text-align: center; width: 40px;
border: 1px solid gray; border-radius: 10px; background: #f0f0f0;
}
#jquery-ui-slider-value2 { border: 0; color: red !important;
font-weight: bold; background-color: transparent;
margin: 5px; width: 40px; text-align: center;
}
#jquery-ui-slider2 { margin: 10px auto; height: 150px; width:30px; }
-->
</style>
<script type="text/javascript" charset="utf-8" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript">
function setCss(currentWidth){
if ( navigator.userAgent.match( /iPhone/i ) || navigator.userAgent.match( /iPod/i ) ) {
var el = document.getElementById("ctrl1");
el.style.position = 'absolute';
el.style.left = '0px';
if(window.navigator.standalone){ el.style.top = '10px'; }
}
shape.style.top='25%'; // '-12%';
floor.style.top='30%';
floor.style.left='-50%';
var tY = -1*(720-586)/2;
var tY = 0;
if (window.orientation == 90 || window.orientation == -90||currentWidth > 800){
ctrl2.style.top='60%';ctrl1.style.left='42%';
}
}
<!--
jQuery( function() {
jQuery( '#jquery-ui-slider' ) . slider( {
orientation: 'vertical', animate: 'slow', range: 'min',
value: 70, min: -100, max: 300,
slide: function( event, ui ) {
jQuery( '#jquery-ui-slider-value' ) . val( ui.value );
var top = ui.value -100;
shape.style.top= top+ '%';
}
} );
jQuery( '#jquery-ui-slider-value' ) . val( jQuery( '#jquery-ui-slider' ) . slider( 'value' ) );
} );
jQuery( function() {
jQuery( '#jquery-ui-slider2' ) . slider( {
orientation: 'vertical', animate: 'slow', range: 'min',
value: 70, min: -200, max: 300,
slide: function( event, ui ) {
jQuery( '#jquery-ui-slider-value2' ) . val( ui.value );
var top = ui.value -100;
floor.style.top= top+ '%';
}
} );
jQuery( '#jquery-ui-slider-value2' ) . val( jQuery( '#jquery-ui-slider2' ) . slider( 'value' ) );
} );
// -->
</script>
</head>
<body onload="addAnimationHandlers('/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.0/Applications/66B874B3-28C2-4259-9387-D11AE8897050/KwinTabBar2.app',90,'stop','0','800')">
<br/ >
<br />
<div id="getComment"></div>
<div id="container">
<div id="stage">
<div id="shape" class="ring2 ">
<div id="shapeX" class="ring2 ">
<img class="subplane s1 slideIn" id="sub1" style="padding:0px;"/><img class="subplane s2 slideIn" id="sub2" style="padding:0px;"/>
<img class="subplane s3 slideIn" id="sub3" style="padding:0px;"/><img class="subplane s4 slideIn" id="sub4" style="padding:0px;"/>
<img class="subplane s5 slideIn" id="sub5" style="padding:0px;"/><img class="subplane s6 slideIn" id="sub6" style="padding:0px;"/>
<img class="subplane s7 slideIn" id="sub7" style="padding:0px;"/><img class="subplane s8 slideIn" id="sub8" style="padding:0px;"/>
<img class="subplane s9 slideIn" id="sub9" style="padding:0px;"/><img class="subplane s10 slideIn" id="sub10" style="padding:0px;"/>
<img class="subplane s11 slideIn" id="sub11" style="padding:0px;"/><img class="subplane s12 slideIn" id="sub12" style="padding:0px;"/>
<div class="plane s1 slideIn" id="s1" >
<a href='#' onclick="pop('1','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-prn1/564864_10150795938766880_727371879_9653626_274829311_n.jpg#10150795938766880','1/(null)','204','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-prn1/564864_10150795938766880_727371879_9653626_274829311_n.jpg#10150795938766880','p','204','36','204','0','0')">
<img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-prn1/564864_10150795938766880_727371879_9653626_274829311_n.jpg#10150795938766880" width="204" style="margin-left:0px; margin-top:80px; padding:0px;" id="i1"></a></div>
<div class="plane s2 slideIn" id="s2" >
<a href='#' onclick="pop('2','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/529240_10150795938771880_727371879_9653628_1443134264_n.jpg#10150795938771880','2/(null)','205','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/529240_10150795938771880_727371879_9653628_1443134264_n.jpg#10150795938771880','p','204','37','205','0','0')">
<img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/529240_10150795938771880_727371879_9653628_1443134264_n.jpg#10150795938771880" width="204" style="margin-left:0px; margin-top:80px; padding:0px;" id="i2"></a></div>
<div class="plane s3 slideIn" id="s3" >
<a href='#' onclick="pop('3','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash4/485830_10150795938781880_727371879_9653629_1931350767_n.jpg#10150795938781880','3/(null)','206','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash4/485830_10150795938781880_727371879_9653629_1931350767_n.jpg#10150795938781880','p','204','38','206','0','0')">
<img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash4/485830_10150795938781880_727371879_9653629_1931350767_n.jpg#10150795938781880" width="204" style="margin-left:0px; margin-top:80px; padding:0px;" id="i3"></a></div>
<div class="plane s4 slideIn" id="s4" >
<a href='#' onclick="pop('4','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-prn1/549194_10150795938776880_727371879_9653627_808066849_n.jpg#10150795938776880','4/(null)','207','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-prn1/549194_10150795938776880_727371879_9653627_808066849_n.jpg#10150795938776880','p','204','39','207','0','0')">
<img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-prn1/549194_10150795938776880_727371879_9653627_808066849_n.jpg#10150795938776880" width="204" style="margin-left:0px; margin-top:80px; padding:0px;" id="i4"></a></div>
<div class="plane s5 slideIn" id="s5" >
<a href='#' onclick="pop('5','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/527906_10150795938951880_727371879_9653636_1134613912_n.jpg#10150795938951880','5/(null)','208','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/527906_10150795938951880_727371879_9653636_1134613912_n.jpg#10150795938951880','p','204','40','208','0','0')">
<img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/527906_10150795938951880_727371879_9653636_1134613912_n.jpg#10150795938951880" width="204" style="margin-left:0px; margin-top:80px; padding:0px;" id="i5"></a></div>
<div class="plane s6 slideIn" id="s6" >
<a href='#' onclick="pop('6','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/524318_10150795938906880_727371879_9653631_331616704_n.jpg#10150795938906880','6/(null)','209','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/524318_10150795938906880_727371879_9653631_331616704_n.jpg#10150795938906880','p','204','41','209','0','0')">
<img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/524318_10150795938906880_727371879_9653631_331616704_n.jpg#10150795938906880" width="204" style="margin-left:0px; margin-top:80px; padding:0px;" id="i6"></a></div>
<div class="plane s7 slideIn" id="s7" >
<a href='#' onclick="pop('7','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-prn1/542180_10150795938926880_727371879_9653634_2056509684_n.jpg#10150795938926880','7/(null)','210','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-prn1/542180_10150795938926880_727371879_9653634_2056509684_n.jpg#10150795938926880','p','204','42','210','0','0')">
<img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-prn1/542180_10150795938926880_727371879_9653634_2056509684_n.jpg#10150795938926880" width="204" style="margin-left:0px; margin-top:80px; padding:0px;" id="i7"></a></div>
<div class="plane s8 slideIn" id="s8" >
<a href='#' onclick="pop('8','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/546384_10150795938936880_727371879_9653635_156045322_n.jpg#10150795938936880','8/(null)','211','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/546384_10150795938936880_727371879_9653635_156045322_n.jpg#10150795938936880','p','204','43','211','0','0')">
<img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/546384_10150795938936880_727371879_9653635_156045322_n.jpg#10150795938936880" width="204" style="margin-left:0px; margin-top:80px; padding:0px;" id="i8"></a></div>
<div class="plane s9 slideIn" id="s9" >
<a href='#' onclick="pop('9','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/548474_10150795938911880_727371879_9653632_1817651998_n.jpg#10150795938911880','9/(null)','212','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/548474_10150795938911880_727371879_9653632_1817651998_n.jpg#10150795938911880','p','204','44','212','0','0')">
<img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/548474_10150795938911880_727371879_9653632_1817651998_n.jpg#10150795938911880" width="204" style="margin-left:0px; margin-top:80px; padding:0px;" id="i9"></a></div>
<div class="plane s10 slideIn" id="s10" >
<a href='#' onclick="pop('10','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/563082_10150795939096880_727371879_9653637_1000837855_n.jpg#10150795939096880','10/(null)','213','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/563082_10150795939096880_727371879_9653637_1000837855_n.jpg#10150795939096880','p','204','45','213','0','0')">
<img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/563082_10150795939096880_727371879_9653637_1000837855_n.jpg#10150795939096880" width="204" style="margin-left:0px; margin-top:80px; padding:0px;" id="i10"></a></div>
<div id="floor" class="slideFloor" align="center">
<!--<img src='@@@' id="floorImg" width="500" height="500">-->
<img src='https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/582153_10150795938796880_727371879_9653630_1813353277_n.jpg#10150795938796880' id="floorImg" width="500" height="500">
</div>
<span id="floor_text"></span>
</div>
</div>
<!-- <span id="floor_text"></span>-->
</div>
</div>
<!--
<div class="controls" id="ctrl1" style="position:absolute;top:2%; left:38%;width:180px; height:32px; ">
<button onmouseover="toggleShape1(100)" onclick="toggleShape1(200)" class="ctlBtn">-Zoom</button>
<button onmouseover="toggleShape1(-100)" onclick="toggleShape1(-200)" class="ctlBtn">Zoom+</button>
</div>
-->
<div class="controls" id="ctrl2" style="position:absolute;width:282px"><!-- style="position:absolute; top:30px;"-->
<table><tr><td style="height:32px">
<a href="#" onclick="runAction('fbAlbum','170251749687065_82296,https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/582153_10150795938796880_727371879_9653630_1813353277_n.jpg#10150795938796880,prev,0');">
<img src='file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.0/Applications/66B874B3-28C2-4259-9387-D11AE8897050/KwinTabBar2.app/gray_ball.png'
style="-webkit-transform:rotateX(10deg) rotateY(45deg);height:40px; width:48px;opacity:0.5;margin-left:-15px;margin-bottom:3px"/></a>
</td><td>
<button onclick="autoRotate('left')" class="ctlBtn">
< </button> <button onclick="autoRotate('stop');" class="ctlBtn">■</button>
<button onclick="autoRotate('right')" class="ctlBtn"> > </button>
</td><td>
<a href="#" onclick="runAction('fbAlbum','170251749687065_82296,https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/582153_10150795938796880_727371879_9653630_1813353277_n.jpg#10150795938796880,next,0');">
<img src='file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.0/Applications/66B874B3-28C2-4259-9387-D11AE8897050/KwinTabBar2.app/gray_ball.png'
style="-webkit-transform:rotateX(10deg) rotateY(-45deg);height:40px; width:48px;opacity:0.5;margin-right:-20px;margin-bottom:3px"/></a>
</td></tr>
</table>
</div>
<div id="jquery-ui-slider-wrap" style="position:absolute; top:10px;left:0px;">
<p style="color:red">plane</p> <input type="text" id="jquery-ui-slider-value" /><div id="jquery-ui-slider"></div>
</div>
<div id="jquery-ui-slider-wrap2" style="position:absolute; top:300px; left:0px;">
<p>floor</p> <input type="text" id="jquery-ui-slider-value2" /> <div id="jquery-ui-slider2"></div>
</div>
<div style="position:absolute; bottom:10px;">
<a href="#" onclick='runAction("fbtest","")'>fbtest</a><br />
<a href="#" onclick='runAction("changeCurrentTitle","0")'>Home</a><br />
<a href="#" onclick='runAction("changeCurrentTitle","0")'>parentTitle</a><br />
</div>
<input id="_type" type="hidden" value="000" />
<div id="map" style="position:absolute;left:15%; width:600px; height:300px;"></div>
<script type="text/javascript" src="file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.0/Applications/66B874B3-28C2-4259-9387-D11AE8897050/KwinTabBar2.app/alexframework/src/javascript/googleMap.js"></script>
<!--<div id="fb-root"></div>-->
<!--<script>
window.fbAsyncInit = function() {
FB.init({
appId : '142574589139226', // App ID
channelUrl : '//snsimglink.appspot.com/channel.html', // Channel File
status : false, // check login status true
cookie : false, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>-->
</body>
</html>kwin786http://www.blogger.com/profile/11636870499038520354noreply@blogger.com0tag:blogger.com,1999:blog-4631337081774196669.post-1503422993837019472012-04-30T11:40:00.001+09:002012-05-01T11:51:50.713+09:00Leda<!--<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">-->
<html lang="en">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0, user-scalable=YES" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<style type="text/css" media="screen">
body { background-color: black; color: white; font-family: 'Lucida Grande', Verdana, Arial; font-size: 12px;
background-image: -webkit-gradient(radial,50% 500,1,50% 500,400, from(rgba(255, 255, 255, 0.3)),to(rgba(255, 255, 255, 0)));
background-repeat: no-repeat; }
#container { width: 100%; height: 850px;
-webkit-perspective: 800; /* For compatibility with iPhone 3.0, we leave off the units here */
-webkit-perspective-origin: 50% 225px;
}
/* 0 -> -120 -100 -> -50 2012/02/07 */
#floor { position:absolute;top:-10%; left:-50% ; margin-top:-120px; margin-left:-50px;
-webkit-mask-image:-webkit-gradient(radial, center center, 0, center center, 350,from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
-webkit-transform: rotateX(90deg) rotateY(0deg) rotateZ(0deg) translateZ(-210px) translateY(10px);
}
#floorBallLeft { position:absolute;top:-10%; left:10% ; margin-top:0px; margin-left:-90px; height:50px; opacity:0.5;
-webkit-transform: rotateX(15deg) rotateY(45deg) rotateZ(0deg) translateZ(0px) translateY(0px); }
#floorBallRight { position:absolute;top:-10%; right:15% ; margin-top:0px; margin-right:-90px; height:50px; width:45px;opacity:0.5;
-webkit-transform: rotateX(10deg) rotateY(-45deg) rotateZ(0deg) translateZ(0px) translateY(0px); }
#floorBallHome { position:absolute;top:20%; left:35% ; margin-top:60px; margin-left:0px; height:35px; width:75px; opacity:0.3;
-webkit-transform: rotateX(15deg) rotateY(0deg) rotateZ(0deg) translateZ(0px) translateY(0px); }
/* #floorC { position:absolute;top:95%; left:50% ;-webkit-transform:scale(3);}
#floorR { position:absolute;top:90%; right:15% ; margin-top:0px; margin-right:0px; -webkit-transform:scale(3);}
#floorL { position:absolute;top:90%; left: 15% ; margin-top:0px; margin-left:0px ; -webkit-transform:scale(3);}*/
a:link { text-decoration: none; color:#DF1FBB; }
a:active { text-decoration: none; color:#DF1FBB; }
a:visited { text-decoration: none; color:#DF1FBB; } /* #555555 */
a:hover { text-decoration: none; color:#DF1FBB; }
li { display:inline-block; }
#floor_text{ position: absolute;
top:80%; left:-80%; height: 800px; width: 420px;
border: 0px solid white;
-webkit-box-sizing: border-box; text-align: left; font-family: Times, serif;
font-size: 20pt; font-color: white; /*font-size: 24pt; color: white; */
}
#stage { width: 100%; height: 100%; -webkit-transition: -webkit-transform 2s; -webkit-transform-style: preserve-3d; }
#shape { position: relative; top: 50px; margin: 0 auto; height: 400px; width: 204px; -webkit-transform-style: preserve-3d; }
#shapeX { margin: 0 auto; height: 200px; width: 200px; -webkit-transform-style: preserve-3d; }
.plane { position: absolute;
height: 400px; width: 204px; border: 0px solid white;
text-align: center; font-family: Times, serif; font-size: 124pt; color: black;
background-image: -webkit-gradient(linear, left bottom, right top,from(rgba(0,0,0,0)), to(rgba(0,0,0,1.0)));
background-repeat: no-repeat;
background-color: rgba( 0, 0, 0, 0.4); /* 0.6 */
-webkit-box-sizing: border-box;
-webkit-transition: -webkit-transform 2s, opacity 2s; -webkit-backface-visibility: hidden; /* hidden */
}
.subplane {position: absolute; width:204px;top:-335px; border: 0px; padding:0px; opacity:0.5;
-webkit-transition: -webkit-transform 2s,opacity 2s;-webkit-backface-visibility:visible;}
#shape.backfaces .plane { -webkit-backface-visibility: visible; }
@-webkit-keyframes spin { from { -webkit-transform: rotateY(0); } to { -webkit-transform: rotateY(-360deg); } }
@-webkit-keyframes spinR{ from { -webkit-transform: rotateY(0); } to { -webkit-transform: rotateY( 360deg); } }
@-webkit-keyframes spin0{ }
/* 上部の説明文の書式設定 背景は灰色で角を丸める .controls {width: 70%; height:10%; margin: 0 auto; padding: 5px 20px; */
.controls { opacity:0.6; /* width: 80%; height:40%; */
position:absolute;top:80%; left:34%; height:36px; /* bottom:1% */
margin: 0 auto; padding: 5px 10px; background-color: rgba(255, 255, 255, 0.15);
-webkit-border-radius: 48px; }
.ctlBtn { font-size:10pt; opacity:0.8; margin-bottom:7px;}
.controls > div { margin: 10px; }
/* ---------- ring2 styles ------------- */
.ring2 > .s1 { -webkit-transform: rotateY( 0deg) translateY( 0px) translateZ(-380px); }
.ring2 > .s2 { -webkit-transform: rotateY( -30deg) translateY( 0px) translateZ(-380px); }
.ring2 > .s3 { -webkit-transform: rotateY( -60deg) translateY( 0px) translateZ(-380px); }
.ring2 > .s4 { -webkit-transform: rotateY( -90deg) translateZ(-380px); }
.ring2 > .s5 { -webkit-transform: rotateY( -120deg) translateZ(-380px); }
.ring2 > .s6 { -webkit-transform: rotateY( -150deg) translateZ(-380px); }
.ring2 > .s7 { -webkit-transform: rotateY( -180deg) translateZ(-380px); }
.ring2 > .s8 { -webkit-transform: rotateY( -210deg) translateZ(-380px); }
.ring2 > .s9 { -webkit-transform: rotateY( 120deg) translateZ(-380px); }
.ring2 > .s10 { -webkit-transform: rotateY( 90deg) translateZ(-380px); }
.ring2 > .s11 { -webkit-transform: rotateY( -300deg) translateZ(-380px); }
.ring2 > .s12 { -webkit-transform: rotateY( -330deg) translateZ(-380px); }
.ring2 > .s13 { -webkit-transform: translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s14 { -webkit-transform: rotateY( -20deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s15 { -webkit-transform: rotateY( -40deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s16 { -webkit-transform: rotateY( -60deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s17 { -webkit-transform: rotateY( -80deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s18 { -webkit-transform: rotateY( -100deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s19 { -webkit-transform: rotateY( -120deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s20 { -webkit-transform: rotateY( -140deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s21 { -webkit-transform: rotateY( -160deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s22 { -webkit-transform: rotateY( -180deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s23 { -webkit-transform: rotateY( -200deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s24 { -webkit-transform: rotateY( -220deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s25 { -webkit-transform: rotateY( -240deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s26 { -webkit-transform: rotateY( -260deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s27 { -webkit-transform: rotateY( -280deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s28 { -webkit-transform: rotateY( -300deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s29 { -webkit-transform: rotateY( -320deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s30 { -webkit-transform: rotateY( -340deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
/* .slideIn {-webkit-animation-timing-function: ease ;-webkit-animation-duration: 1500ms;-webkit-animation-name: slidein; margin-left:0px;} */
.slideIn {-webkit-animation-timing-function: ease ;-webkit-animation-duration: 1500ms;-webkit-animation-name: slidein; margin-right:0px;}
/* @-webkit-keyframes _slidein {from {margin-left:-320px; }to { margin-left:0;}} */
@-webkit-keyframes slidein {from { margin-top: 120px; opacity:0; } to { margin-top: 0px; opacity:1; } }
/* -webkit-transform:rotateX(30deg); */
.slideFloor {-webkit-animation-timing-function: ease;-webkit-animation-duration: 1000ms;-webkit-animation-name: slidein; margin-left:0px;}
@-webkit-keyframes slideFloor {from { margin-top: 120px; opacity:0; } to { margin-top: 0px; opacity:1;} }
/* #slideMenu.slideOut {-webkit-animation-timing-function: ease;-webkit-animation-duration: 350ms;-webkit-animation-name: slideout;}
@-webkit-keyframes slideout {from {margin-left:0; }to { margin-left:-320px;}} */
</style>
<script type="text/javascript" src="file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.0/Applications/66B874B3-28C2-4259-9387-D11AE8897050/KwinTabBar2.app/alexframework/src/javascript/gear5.js"></script>
<script type="text/javascript" src="file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.0/Applications/66B874B3-28C2-4259-9387-D11AE8897050/KwinTabBar2.app/alexframework/src/javascript/jquery.min.js"></script>
<script type="text/javascript" src="file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.0/Applications/66B874B3-28C2-4259-9387-D11AE8897050/KwinTabBar2.app/alexframework/src/javascript/alex.core.js"></script>
<script type="text/javascript" src="file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.0/Applications/66B874B3-28C2-4259-9387-D11AE8897050/KwinTabBar2.app/alexframework/src/javascript/alex.record.js"></script>
<script type="text/javascript" src="file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.0/Applications/66B874B3-28C2-4259-9387-D11AE8897050/KwinTabBar2.app/alexframework/src/javascript/albums.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript" ></script>
<!--<script type="text/javascript" src="file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.0/Applications/66B874B3-28C2-4259-9387-D11AE8897050/KwinTabBar2.app/alexframework/src/javascript/facebook.js"></script>-->
<script type="text/javascript">
function setCss(currentWidth){
if ( navigator.userAgent.match( /iPhone/i ) || navigator.userAgent.match( /iPod/i ) ) {
var el = document.getElementById("ctrl1");
el.style.position = 'absolute';
el.style.left = '0px';
if(window.navigator.standalone){ el.style.top = '10px'; }
}
shape.style.top='25%';
floor.style.top='30%';
floor.style.left='-50%';
var tY = -1*(720-586)/2;
var tY = 0;
if (floorImg.naturalWidth > floorImg.naturalHeight ){
var tZ = 80 - (floorImg.naturalWidth - floorImg.naturalHeight );
}else{ var tZ = 80; }
// alert("setCss");
// floor.style.webkitTransform='rotateX(90deg) rotateY(0deg) rotateZ(0deg) translateZ('+tZ+'px) translateY(10px)';
// var _rotateY = 90; shape.style.webkitTransform = 'rotateY('+_rotateY+'deg)';
//alert(window.orientation+","+currentWidth);
if (window.orientation == 90 || window.orientation == -90||currentWidth > 800){
ctrl2.style.top='60%';ctrl1.style.left='42%';
}
}
</script>
<!-- <script type="text/javascript">
google.maps.event.addDomListener(window, 'load', function() {
var latlng = new google.maps.LatLng(29.988611, 52.871944); // -34.397, 150.644); 29.988611, 52.871944 37.409722, 34.1725
var myOptions = {zoom: 4,center: latlng,mapTypeId: google.maps.MapTypeId.HYBRID, // ROADMAP SATELLITE HYBRID TERRAIN
zoomControl: true,}; // scaleControl: true,
var map = new google.maps.Map(document.getElementById("map"), myOptions);
var marker = new google.maps.Marker({ position: latlng, map: map, title:"Hello World!"});
var infowindow = new google.maps.InfoWindow({content: 'test',size: new google.maps.Size(200, 100)});
google.maps.event.addListener(marker, 'click', function() {infowindow.open(map,marker); });
});
</script>-->
</head>
<body onload="addAnimationHandlers('/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.0/Applications/66B874B3-28C2-4259-9387-D11AE8897050/KwinTabBar2.app',90,'stop','0','800')">
<br/ >
<br />
<div id="getComment"></div>
<div id="container">
<div id="stage">
<div id="shape" class="ring2 ">
<div id="shapeX" class="ring2 ">
<img class="subplane s1 slideIn" id="sub1" style="padding:0px;"/><img class="subplane s2 slideIn" id="sub2" style="padding:0px;"/>
<img class="subplane s3 slideIn" id="sub3" style="padding:0px;"/><img class="subplane s4 slideIn" id="sub4" style="padding:0px;"/>
<img class="subplane s5 slideIn" id="sub5" style="padding:0px;"/><img class="subplane s6 slideIn" id="sub6" style="padding:0px;"/>
<img class="subplane s7 slideIn" id="sub7" style="padding:0px;"/><img class="subplane s8 slideIn" id="sub8" style="padding:0px;"/>
<img class="subplane s9 slideIn" id="sub9" style="padding:0px;"/><img class="subplane s10 slideIn" id="sub10" style="padding:0px;"/>
<img class="subplane s11 slideIn" id="sub11" style="padding:0px;"/><img class="subplane s12 slideIn" id="sub12" style="padding:0px;"/>
<div class="plane s16 slideIn" id="s16" style="height:204px; width:133px;">
<a href='#' onclick="pop('16','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/s720x720/562855_367581699954068_170251749687065_964623_937774309_n.jpg','Caption','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/s720x720/562855_367581699954068_170251749687065_964623_937774309_n.jpg','https://www.facebook.com/photo.php?fbid=367581699954068&set=a.367572203288351.82042.170251749687065&type=1','p','103','25','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/s720x720/562855_367581699954068_170251749687065_964623_937774309_n.jpg','0', '0')">
<img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/s720x720/562855_367581699954068_170251749687065_964623_937774309_n.jpg" width="103" id="i16"></a></div><div class="plane s4 slideIn" id="s4" >
<a href='#' onclick="pop('4','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash4/s720x720/295012_367573493288222_170251749687065_964587_165937942_n.jpg','4/16/_caption_','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash4/s720x720/295012_367573493288222_170251749687065_964587_165937942_n.jpg','https://www.facebook.com/photo.php?fbid=367573493288222&set=a.367572203288351.82042.170251749687065&type=1','p','160','26','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash4/s720x720/295012_367573493288222_170251749687065_964587_165937942_n.jpg','0','0')">
<img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash4/s720x720/295012_367573493288222_170251749687065_964587_165937942_n.jpg" width="160" style="margin-left:0px; margin-top:70px; padding:0px;" id="i4"></a></div>
<div class="plane s20 slideIn" id="s20" style="height:204px; width:133px;">
<a href='#' onclick="pop('20','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-prn1/s720x720/540212_367573839954854_170251749687065_964588_385327369_n.jpg','Caption','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-prn1/s720x720/540212_367573839954854_170251749687065_964588_385327369_n.jpg','https://www.facebook.com/photo.php?fbid=367573839954854&set=a.367572203288351.82042.170251749687065&type=1','p','103','27','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-prn1/s720x720/540212_367573839954854_170251749687065_964588_385327369_n.jpg','0', '0')">
<img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-prn1/s720x720/540212_367573839954854_170251749687065_964588_385327369_n.jpg" width="103" id="i20"></a></div><div class="plane s7 slideIn" id="s7" style="margin-left:-10px; width:408px;">
<a href='#' onclick="pop('7','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/574933_367574363288135_170251749687065_964590_1143097657_n.jpg','7/20/4/16/_caption_','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/574933_367574363288135_170251749687065_964590_1143097657_n.jpg','https://www.facebook.com/photo.php?fbid=367574363288135&set=a.367572203288351.82042.170251749687065&type=1','p','225','28','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/574933_367574363288135_170251749687065_964590_1143097657_n.jpg','0','0')">
<img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/574933_367574363288135_170251749687065_964590_1143097657_n.jpg" width="225" style="margin-left:5px; margin-top:76px; padding:0px;" id="i7"></a></div>
<div class="plane s12 slideIn" id="s12" >
<a href='#' onclick="pop('12','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/s720x720/562568_367574726621432_170251749687065_964591_1720588208_n.jpg','12/7/20/4/16/_caption_','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/s720x720/562568_367574726621432_170251749687065_964591_1720588208_n.jpg','https://www.facebook.com/photo.php?fbid=367574726621432&set=a.367572203288351.82042.170251749687065&type=1','p','160','29','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/s720x720/562568_367574726621432_170251749687065_964591_1720588208_n.jpg','0','0')">
<img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/s720x720/562568_367574726621432_170251749687065_964591_1720588208_n.jpg" width="160" style="margin-left:0px; margin-top:70px; padding:0px;" id="i12"></a></div>
<div class="plane s9 slideIn" id="s9" style="margin-left:-18px; width:408px;">
<a href='#' onclick="pop('9','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/s720x720/560451_367575946621310_170251749687065_964595_94994877_n.jpg','9/12/7/20/4/16/_caption_','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/s720x720/560451_367575946621310_170251749687065_964595_94994877_n.jpg','https://www.facebook.com/photo.php?fbid=367575946621310&set=a.367572203288351.82042.170251749687065&type=1','p','240','30','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/s720x720/560451_367575946621310_170251749687065_964595_94994877_n.jpg','0','0')">
<img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/s720x720/560451_367575946621310_170251749687065_964595_94994877_n.jpg" width="240" style="margin-left:5px; margin-top:64px; padding:0px;" id="i9"></a></div>
<div class="plane s30 slideIn" id="s30" style="height:204px; width:133px;">
<a href='#' onclick="pop('30','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/s720x720/533467_367577743287797_170251749687065_964603_182999763_n.jpg','Caption','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/s720x720/533467_367577743287797_170251749687065_964603_182999763_n.jpg','https://www.facebook.com/photo.php?fbid=367577743287797&set=a.367572203288351.82042.170251749687065&type=1','p','103','31','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/s720x720/533467_367577743287797_170251749687065_964603_182999763_n.jpg','0', '0')">
<img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/s720x720/533467_367577743287797_170251749687065_964603_182999763_n.jpg" width="103" id="i30"></a></div>
<div id="floor" class="slideFloor" align="center">
<img src='https://www.facebook.com/photo.php?fbid=367572226621682&set=a.367572203288351.82042.170251749687065&type=1' id="floorImg" width="500" height="500">
</div>
<span id="floor_text"></span>
</div>
</div>
<!-- <span id="floor_text"></span>-->
</div>
</div>
<div class="controls" id="ctrl1" style="position:absolute;top:2%; left:38%;width:180px; height:32px; ">
<button onmouseover="toggleShape1(100)" onclick="toggleShape1(200)" class="ctlBtn">-Zoom</button>
<button onmouseover="toggleShape1(-100)" onclick="toggleShape1(-200)" class="ctlBtn">Zoom+</button>
</div>
<div class="controls" id="ctrl2" style="position:absolute;width:282px"><!-- style="position:absolute; top:30px;"-->
<table><tr><td style="height:32px">
<a href="#" onclick="runAction('fbAlbum','170251749687065_82042,https://www.facebook.com/photo.php?fbid=367572226621682&set=a.367572203288351.82042.170251749687065&type=1,prev,0');">
<img src='file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.0/Applications/66B874B3-28C2-4259-9387-D11AE8897050/KwinTabBar2.app/gray_ball.png'
style="-webkit-transform:rotateX(10deg) rotateY(45deg);height:40px; width:48px;opacity:0.5;margin-left:-15px;margin-bottom:3px"/></a>
</td><td>
<button onclick="autoRotate('left')" class="ctlBtn">
< </button> <button onclick="autoRotate('stop');" class="ctlBtn">■</button>
<button onclick="autoRotate('right')" class="ctlBtn"> > </button>
</td><td>
<a href="#" onclick="runAction('fbAlbum','170251749687065_82042,https://www.facebook.com/photo.php?fbid=367572226621682&set=a.367572203288351.82042.170251749687065&type=1,next,0');">
<img src='file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.0/Applications/66B874B3-28C2-4259-9387-D11AE8897050/KwinTabBar2.app/gray_ball.png'
style="-webkit-transform:rotateX(10deg) rotateY(-45deg);height:40px; width:48px;opacity:0.5;margin-right:-20px;margin-bottom:3px"/></a>
<!--<button onclick="toggleShape1(400)">-Zoom</button> <button onclick="toggleShape1(-400)">Zoom+</button>-->
</td></tr>
</table>
</div>
<div style="position:absolute; bottom:10px;">
<a href="#" onclick='runAction("fbtest","")'>fbtest</a><br />
<a href="#" onclick='runAction("changeCurrentTitle","0")'>Home</a><br />
<a href="#" onclick='runAction("changeCurrentTitle","167")'>parentTitle</a><br />
</div>
<input id="_type" type="hidden" value="000" />
<div id="map" style="position:absolute;left:15%; width:600px; height:300px;"></div>
<script type="text/javascript" src="file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.0/Applications/66B874B3-28C2-4259-9387-D11AE8897050/KwinTabBar2.app/alexframework/src/javascript/googleMap.js"></script>
<!--<div id="fb-root"></div>-->
<!--<script>
window.fbAsyncInit = function() {
FB.init({
appId : '142574589139226', // App ID
channelUrl : '//snsimglink.appspot.com/channel.html', // Channel File
status : false, // check login status true
cookie : false, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>-->
</body>
</html>kwin786http://www.blogger.com/profile/11636870499038520354noreply@blogger.com0tag:blogger.com,1999:blog-4631337081774196669.post-23676724469314744882012-04-29T23:34:00.002+09:002012-04-29T23:34:36.456+09:00Snow panorama<!--<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">-->
<html lang="en">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0, user-scalable=YES" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<style type="text/css" media="screen">
body { background-color: black; color: white; font-family: 'Lucida Grande', Verdana, Arial; font-size: 12px;
background-image: -webkit-gradient(radial,50% 500,1,50% 500,400, from(rgba(255, 255, 255, 0.3)),to(rgba(255, 255, 255, 0)));
background-repeat: no-repeat; }
#container { width: 100%; height: 850px;
-webkit-perspective: 800; /* For compatibility with iPhone 3.0, we leave off the units here */
-webkit-perspective-origin: 50% 225px;
}
/* 0 -> -120 -100 -> -50 2012/02/07 */
#floor { position:absolute;top:-10%; left:-50% ; margin-top:-120px; margin-left:-50px;
-webkit-mask-image:-webkit-gradient(radial, center center, 0, center center, 350,from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
-webkit-transform: rotateX(90deg) rotateY(0deg) rotateZ(0deg) translateZ(-210px) translateY(10px);
}
#floorBallLeft { position:absolute;top:-10%; left:10% ; margin-top:0px; margin-left:-90px; height:50px; opacity:0.5;
-webkit-transform: rotateX(15deg) rotateY(45deg) rotateZ(0deg) translateZ(0px) translateY(0px); }
#floorBallRight { position:absolute;top:-10%; right:15% ; margin-top:0px; margin-right:-90px; height:50px; width:45px;opacity:0.5;
-webkit-transform: rotateX(10deg) rotateY(-45deg) rotateZ(0deg) translateZ(0px) translateY(0px); }
#floorBallHome { position:absolute;top:20%; left:35% ; margin-top:60px; margin-left:0px; height:35px; width:75px; opacity:0.3;
-webkit-transform: rotateX(15deg) rotateY(0deg) rotateZ(0deg) translateZ(0px) translateY(0px); }
/* #floorC { position:absolute;top:95%; left:50% ;-webkit-transform:scale(3);}
#floorR { position:absolute;top:90%; right:15% ; margin-top:0px; margin-right:0px; -webkit-transform:scale(3);}
#floorL { position:absolute;top:90%; left: 15% ; margin-top:0px; margin-left:0px ; -webkit-transform:scale(3);}*/
a:link { text-decoration: none; color:#DF1FBB; }
a:active { text-decoration: none; color:#DF1FBB; }
a:visited { text-decoration: none; color:#DF1FBB; } /* #555555 */
a:hover { text-decoration: none; color:#DF1FBB; }
li { display:inline-block; }
#floor_text{ position: absolute;
top:80%; left:-80%; height: 800px; width: 420px;
border: 0px solid white;
-webkit-box-sizing: border-box; text-align: left; font-family: Times, serif;
font-size: 20pt; font-color: white; /*font-size: 24pt; color: white; */
}
#stage { width: 100%; height: 100%; -webkit-transition: -webkit-transform 2s; -webkit-transform-style: preserve-3d; }
#shape { position: relative; top: 50px; margin: 0 auto; height: 400px; width: 204px; -webkit-transform-style: preserve-3d; }
#shapeX { margin: 0 auto; height: 200px; width: 200px; -webkit-transform-style: preserve-3d; }
.plane { position: absolute;
height: 400px; width: 204px; border: 0px solid white;
text-align: center; font-family: Times, serif; font-size: 124pt; color: black;
background-image: -webkit-gradient(linear, left bottom, right top,from(rgba(0,0,0,0)), to(rgba(0,0,0,1.0)));
background-repeat: no-repeat;
background-color: rgba( 0, 0, 0, 0.4); /* 0.6 */
-webkit-box-sizing: border-box;
-webkit-transition: -webkit-transform 2s, opacity 2s; -webkit-backface-visibility: hidden; /* hidden */
}
.subplane {position: absolute; width:204px;top:-335px; border: 0px; padding:0px; opacity:0.5;
-webkit-transition: -webkit-transform 2s,opacity 2s;-webkit-backface-visibility:visible;}
#shape.backfaces .plane { -webkit-backface-visibility: visible; }
@-webkit-keyframes spin { from { -webkit-transform: rotateY(0); } to { -webkit-transform: rotateY(-360deg); } }
@-webkit-keyframes spinR{ from { -webkit-transform: rotateY(0); } to { -webkit-transform: rotateY( 360deg); } }
@-webkit-keyframes spin0{ }
/* 上部の説明文の書式設定 背景は灰色で角を丸める .controls {width: 70%; height:10%; margin: 0 auto; padding: 5px 20px; */
.controls { opacity:0.6; /* width: 80%; height:40%; */
position:absolute;top:80%; left:34%; height:36px; /* bottom:1% */
margin: 0 auto; padding: 5px 10px; background-color: rgba(255, 255, 255, 0.15);
-webkit-border-radius: 48px; }
.ctlBtn { font-size:10pt; opacity:0.8; margin-bottom:7px;}
.controls > div { margin: 10px; }
/* ---------- ring2 styles ------------- */
.ring2 > .s1 { -webkit-transform: rotateY( 0deg) translateY( 0px) translateZ(-380px); }
.ring2 > .s2 { -webkit-transform: rotateY( -30deg) translateY( 0px) translateZ(-380px); }
.ring2 > .s3 { -webkit-transform: rotateY( -60deg) translateY( 0px) translateZ(-380px); }
.ring2 > .s4 { -webkit-transform: rotateY( -90deg) translateZ(-380px); }
.ring2 > .s5 { -webkit-transform: rotateY( -120deg) translateZ(-380px); }
.ring2 > .s6 { -webkit-transform: rotateY( -150deg) translateZ(-380px); }
.ring2 > .s7 { -webkit-transform: rotateY( -180deg) translateZ(-380px); }
.ring2 > .s8 { -webkit-transform: rotateY( -210deg) translateZ(-380px); }
.ring2 > .s9 { -webkit-transform: rotateY( 120deg) translateZ(-380px); }
.ring2 > .s10 { -webkit-transform: rotateY( 90deg) translateZ(-380px); }
.ring2 > .s11 { -webkit-transform: rotateY( -300deg) translateZ(-380px); }
.ring2 > .s12 { -webkit-transform: rotateY( -330deg) translateZ(-380px); }
.ring2 > .s13 { -webkit-transform: translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s14 { -webkit-transform: rotateY( -20deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s15 { -webkit-transform: rotateY( -40deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s16 { -webkit-transform: rotateY( -60deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s17 { -webkit-transform: rotateY( -80deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s18 { -webkit-transform: rotateY( -100deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s19 { -webkit-transform: rotateY( -120deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s20 { -webkit-transform: rotateY( -140deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s21 { -webkit-transform: rotateY( -160deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s22 { -webkit-transform: rotateY( -180deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s23 { -webkit-transform: rotateY( -200deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s24 { -webkit-transform: rotateY( -220deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s25 { -webkit-transform: rotateY( -240deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s26 { -webkit-transform: rotateY( -260deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s27 { -webkit-transform: rotateY( -280deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s28 { -webkit-transform: rotateY( -300deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s29 { -webkit-transform: rotateY( -320deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s30 { -webkit-transform: rotateY( -340deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
/* .slideIn {-webkit-animation-timing-function: ease ;-webkit-animation-duration: 1500ms;-webkit-animation-name: slidein; margin-left:0px;} */
.slideIn {-webkit-animation-timing-function: ease ;-webkit-animation-duration: 1500ms;-webkit-animation-name: slidein; margin-right:0px;}
/* @-webkit-keyframes _slidein {from {margin-left:-320px; }to { margin-left:0;}} */
@-webkit-keyframes slidein {from { margin-top: 120px; opacity:0; } to { margin-top: 0px; opacity:1; } }
/* -webkit-transform:rotateX(30deg); */
.slideFloor {-webkit-animation-timing-function: ease;-webkit-animation-duration: 1000ms;-webkit-animation-name: slidein; margin-left:0px;}
@-webkit-keyframes slideFloor {from { margin-top: 120px; opacity:0; } to { margin-top: 0px; opacity:1;} }
/* #slideMenu.slideOut {-webkit-animation-timing-function: ease;-webkit-animation-duration: 350ms;-webkit-animation-name: slideout;}
@-webkit-keyframes slideout {from {margin-left:0; }to { margin-left:-320px;}} */
</style>
<script type="text/javascript" src="file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.1/Applications/6B3E54D6-18F5-404B-A952-B255695821FE/KwinTabBar2.app/alexframework/src/javascript/gear5.js"></script>
<script type="text/javascript" src="file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.1/Applications/6B3E54D6-18F5-404B-A952-B255695821FE/KwinTabBar2.app/alexframework/src/javascript/jquery.min.js"></script>
<script type="text/javascript" src="file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.1/Applications/6B3E54D6-18F5-404B-A952-B255695821FE/KwinTabBar2.app/alexframework/src/javascript/alex.core.js"></script>
<script type="text/javascript" src="file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.1/Applications/6B3E54D6-18F5-404B-A952-B255695821FE/KwinTabBar2.app/alexframework/src/javascript/alex.record.js"></script>
<script type="text/javascript" src="file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.1/Applications/6B3E54D6-18F5-404B-A952-B255695821FE/KwinTabBar2.app/alexframework/src/javascript/albums.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript" ></script>
<!--<script type="text/javascript" src="file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.1/Applications/6B3E54D6-18F5-404B-A952-B255695821FE/KwinTabBar2.app/alexframework/src/javascript/facebook.js"></script>-->
<script type="text/javascript">
function setCss(currentWidth){
if ( navigator.userAgent.match( /iPhone/i ) || navigator.userAgent.match( /iPod/i ) ) {
var el = document.getElementById("ctrl1");
el.style.position = 'absolute';
el.style.left = '0px';
if(window.navigator.standalone){ el.style.top = '10px'; }
}
shape.style.top='25%';
floor.style.top='30%';
floor.style.left='-50%';
var tY = -1*(720-586)/2;
var tY = 0;
if (floorImg.naturalWidth > floorImg.naturalHeight ){
var tZ = 80 - (floorImg.naturalWidth - floorImg.naturalHeight );
}else{ var tZ = 80; }
// alert("setCss");
// floor.style.webkitTransform='rotateX(90deg) rotateY(0deg) rotateZ(0deg) translateZ('+tZ+'px) translateY(10px)';
// var _rotateY = 90; shape.style.webkitTransform = 'rotateY('+_rotateY+'deg)';
//alert(window.orientation+","+currentWidth);
if (window.orientation == 90 || window.orientation == -90||currentWidth > 800){
ctrl2.style.top='60%';ctrl1.style.left='42%';
}
}
</script>
<!-- <script type="text/javascript">
google.maps.event.addDomListener(window, 'load', function() {
var latlng = new google.maps.LatLng(29.988611, 52.871944); // -34.397, 150.644); 29.988611, 52.871944 37.409722, 34.1725
var myOptions = {zoom: 4,center: latlng,mapTypeId: google.maps.MapTypeId.HYBRID, // ROADMAP SATELLITE HYBRID TERRAIN
zoomControl: true,}; // scaleControl: true,
var map = new google.maps.Map(document.getElementById("map"), myOptions);
var marker = new google.maps.Marker({ position: latlng, map: map, title:"Hello World!"});
var infowindow = new google.maps.InfoWindow({content: 'test',size: new google.maps.Size(200, 100)});
google.maps.event.addListener(marker, 'click', function() {infowindow.open(map,marker); });
});
</script>-->
</head>
<body onload="addAnimationHandlers('/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.1/Applications/6B3E54D6-18F5-404B-A952-B255695821FE/KwinTabBar2.app',90,'stop','0','800')">
<br/ >
<br />
<div id="getComment"></div>
<div id="container">
<div id="stage">
<div id="shape" class="ring2 ">
<div id="shapeX" class="ring2 ">
<img class="subplane s1 slideIn" id="sub1" style="padding:0px;"/><img class="subplane s2 slideIn" id="sub2" style="padding:0px;"/>
<img class="subplane s3 slideIn" id="sub3" style="padding:0px;"/><img class="subplane s4 slideIn" id="sub4" style="padding:0px;"/>
<img class="subplane s5 slideIn" id="sub5" style="padding:0px;"/><img class="subplane s6 slideIn" id="sub6" style="padding:0px;"/>
<img class="subplane s7 slideIn" id="sub7" style="padding:0px;"/><img class="subplane s8 slideIn" id="sub8" style="padding:0px;"/>
<img class="subplane s9 slideIn" id="sub9" style="padding:0px;"/><img class="subplane s10 slideIn" id="sub10" style="padding:0px;"/>
<img class="subplane s11 slideIn" id="sub11" style="padding:0px;"/><img class="subplane s12 slideIn" id="sub12" style="padding:0px;"/>
<div class="plane s1 slideIn" id="s1" >
<a href='#' onclick="pop('1','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash4/s720x720/389676_10150706015506880_727371879_9376429_1939800978_n.jpg','_caption_','3124038432335497283','https://www.facebook.com/photo.php?fbid=10150706015506880&set=a.10150706015381880.428099.727371879&type=1','a_ios','160','23','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash4/s720x720/389676_10150706015506880_727371879_9376429_1939800978_n.jpg','0','0')">
<img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash4/s720x720/389676_10150706015506880_727371879_9376429_1939800978_n.jpg" width="160" style="margin-left:0px; margin-top:70px; padding:0px;" id="i1"></a></div>
<div class="plane s2 slideIn" id="s2" >
<a href='#' onclick="pop('2','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/s720x720/541043_10150706496096880_727371879_9377932_2124185804_n.jpg','_caption_','3124038432335464894','https://www.facebook.com/photo.php?fbid=10150706496096880&set=a.10150489666356880.395710.727371879&type=1','a_ios','160','22','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/s720x720/541043_10150706496096880_727371879_9377932_2124185804_n.jpg','0','0')">
<img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/s720x720/541043_10150706496096880_727371879_9377932_2124185804_n.jpg" width="160" style="margin-left:0px; margin-top:100px; padding:0px;" id="i2"></a></div>
<div class="plane s3 slideIn" id="s3" >
<a href='#' onclick="pop('3','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/s720x720/582621_10150755694916880_727371879_9548827_485300115_n.jpg','_caption_','3124038432335447678','https://www.facebook.com/photo.php?fbid=10150755694916880&set=a.10150371459656880.378494.727371879&type=1','a_ios','160','37','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/s720x720/582621_10150755694916880_727371879_9548827_485300115_n.jpg','0','0')">
<img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/s720x720/582621_10150755694916880_727371879_9548827_485300115_n.jpg" width="160" style="margin-left:0px; margin-top:59px; padding:0px;" id="i3"></a></div>
<div class="plane s4 slideIn" id="s4" >
<a href='#' onclick="pop('4','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash4/s720x720/425598_10150653970541880_727371879_9191133_722796232_n.jpg','_caption_','3124038432335489125','https://www.facebook.com/photo.php?fbid=10150653970541880&set=a.10150653970501880.419941.727371879&type=1','a_ios','160','29','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash4/s720x720/425598_10150653970541880_727371879_9191133_722796232_n.jpg','0','0')">
<img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash4/s720x720/425598_10150653970541880_727371879_9191133_722796232_n.jpg" width="160" style="margin-left:0px; margin-top:100px; padding:0px;" id="i4"></a></div>
<div class="plane s5 slideIn" id="s5" >
<a href='#' onclick="pop('5','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-snc7/s720x720/432023_10150666408196880_727371879_9233685_1840899720_n.jpg','_caption_','3124038432335491159','https://www.facebook.com/photo.php?fbid=10150666408196880&set=a.10150666404511880.421975.727371879&type=1','a_ios','160','27','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-snc7/s720x720/432023_10150666408196880_727371879_9233685_1840899720_n.jpg','0','0')">
<img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-snc7/s720x720/432023_10150666408196880_727371879_9233685_1840899720_n.jpg" width="160" style="margin-left:0px; margin-top:112px; padding:0px;" id="i5"></a></div>
<div class="plane s6 slideIn" id="s6" >
<a href='#' onclick="pop('6','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/s720x720/531393_10150703936576880_727371879_9371000_504525077_n.jpg','_caption_','3124038432335496999','Http://www.youtube.com/embed/Om_UdToxqqE','a_ios','160','24','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/s720x720/531393_10150703936576880_727371879_9371000_504525077_n.jpg','0','0')">
<img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/s720x720/531393_10150703936576880_727371879_9371000_504525077_n.jpg" width="160" style="margin-left:0px; margin-top:123px; padding:0px;" id="i6"></a></div>
<div class="plane s7 slideIn" id="s7" >
<a href='#' onclick="pop('7','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash4/s720x720/384859_10150467378256880_727371879_8574620_793781417_n.jpg','_caption_','3124038432335461201','https://www.facebook.com/photo.php?fbid=10150467378256880&set=a.10150467305811880.392017.727371879&type=1','a_ios','160','38','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash4/s720x720/384859_10150467378256880_727371879_8574620_793781417_n.jpg','0','0')">
<img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash4/s720x720/384859_10150467378256880_727371879_8574620_793781417_n.jpg" width="160" style="margin-left:0px; margin-top:80px; padding:0px;" id="i7"></a></div>
<div class="plane s8 slideIn" id="s8" >
<a href='#' onclick="pop('8','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-snc7/s720x720/485703_10150685024416880_727371879_9300359_991022216_n.jpg','_caption_','3124038432335447678','https://www.facebook.com/photo.php?fbid=10150685024416880&set=a.10150371459656880.378494.727371879&type=1','a_ios','160','26','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-snc7/s720x720/485703_10150685024416880_727371879_9300359_991022216_n.jpg','0','0')">
<img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-snc7/s720x720/485703_10150685024416880_727371879_9300359_991022216_n.jpg" width="160" style="margin-left:0px; margin-top:106px; padding:0px;" id="i8"></a></div>
<div class="plane s9 slideIn" id="s9" >
<a href='#' onclick="pop('9','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash4/s720x720/301936_10150370392396880_727371879_8211269_1335959076_n.jpg','_caption_','3124038432335447456','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/557734_10150784935871880_727371879_9624016_1770574780_n.jpg#10150784935871880','a_ios','160','36','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash4/s720x720/301936_10150370392396880_727371879_8211269_1335959076_n.jpg','0','0')">
<img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash4/s720x720/301936_10150370392396880_727371879_8211269_1335959076_n.jpg" width="160" style="margin-left:0px; margin-top:80px; padding:0px;" id="i9"></a></div>
<div class="plane s10 slideIn" id="s10" >
<a href='#' onclick="pop('10','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-snc7/s720x720/432123_10150655790451880_727371879_9199180_915819807_n.jpg','_caption_','3124038432335489508','https://www.facebook.com/photo.php?fbid=10150655790451880&set=a.10150655790396880.420324.727371879&type=1','a_ios','160','28','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-snc7/s720x720/432123_10150655790451880_727371879_9199180_915819807_n.jpg','0','0')">
<img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-snc7/s720x720/432123_10150655790451880_727371879_9199180_915819807_n.jpg" width="160" style="margin-left:0px; margin-top:85px; padding:0px;" id="i10"></a></div>
<div class="plane s11 slideIn" id="s11" >
<a href='#' onclick="pop('11','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/s720x720/542214_10150699300516880_727371879_9351941_1600651912_n.jpg','_caption_','3124038432335496265','https://www.facebook.com/photo.php?fbid=10150699300516880&set=a.10150699300396880.427081.727371879&type=1','a_ios','160','25','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/s720x720/542214_10150699300516880_727371879_9351941_1600651912_n.jpg','0','0')">
<img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/s720x720/542214_10150699300516880_727371879_9351941_1600651912_n.jpg" width="160" style="margin-left:0px; margin-top:81px; padding:0px;" id="i11"></a></div>
<div id="floor" class="slideFloor" align="center">
<img src='/Users/kwin786/Library/Application Support/iPhone Simulator/5.1/Applications/6B3E54D6-18F5-404B-A952-B255695821FE/Documents/img202.png' id="floorImg" width="500" height="500">
</div>
<span id="floor_text"></span>
</div>
</div>
<!-- <span id="floor_text"></span>-->
</div>
</div>
<div class="controls" id="ctrl1" style="position:absolute;top:2%; left:38%;width:180px; height:32px; ">
<button onmouseover="toggleShape1(100)" onclick="toggleShape1(200)" class="ctlBtn">-Zoom</button>
<button onmouseover="toggleShape1(-100)" onclick="toggleShape1(-200)" class="ctlBtn">Zoom+</button>
</div>
<div class="controls" id="ctrl2" style="position:absolute;width:282px"><!-- style="position:absolute; top:30px;"-->
<table><tr><td style="height:32px">
<a href="#" onclick="runAction('fbAlbum','3124038432335491159,/Users/kwin786/Library/Application Support/iPhone Simulator/5.1/Applications/6B3E54D6-18F5-404B-A952-B255695821FE/Documents/img202.png,prev,0');">
<img src='file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.1/Applications/6B3E54D6-18F5-404B-A952-B255695821FE/KwinTabBar2.app/gray_ball.png'
style="-webkit-transform:rotateX(10deg) rotateY(45deg);height:40px; width:48px;opacity:0.5;margin-left:-15px;margin-bottom:3px"/></a>
</td><td>
<button onclick="autoRotate('left')" class="ctlBtn">
< </button> <button onclick="autoRotate('stop');" class="ctlBtn">■</button>
<button onclick="autoRotate('right')" class="ctlBtn"> > </button>
</td><td>
<a href="#" onclick="runAction('fbAlbum','3124038432335491159,/Users/kwin786/Library/Application Support/iPhone Simulator/5.1/Applications/6B3E54D6-18F5-404B-A952-B255695821FE/Documents/img202.png,next,0');">
<img src='file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.1/Applications/6B3E54D6-18F5-404B-A952-B255695821FE/KwinTabBar2.app/gray_ball.png'
style="-webkit-transform:rotateX(10deg) rotateY(-45deg);height:40px; width:48px;opacity:0.5;margin-right:-20px;margin-bottom:3px"/></a>
<!--<button onclick="toggleShape1(400)">-Zoom</button> <button onclick="toggleShape1(-400)">Zoom+</button>-->
</td></tr>
</table>
</div>
<div style="position:absolute; bottom:10px;">
<a href="#" onclick='runAction("fbtest","")'>fbtest</a><br />
<a href="#" onclick='runAction("changeCurrentTitle","0")'>Home</a><br />
<a href="#" onclick='runAction("changeCurrentTitle","0")'>parentTitle</a><br />
</div>
<input id="_type" type="hidden" value="000" />
<div id="map" style="position:absolute;left:15%; width:600px; height:600px;"></div>
<script type="text/javascript" src="file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.1/Applications/6B3E54D6-18F5-404B-A952-B255695821FE/KwinTabBar2.app/alexframework/src/javascript/googleMap.js"></script>
<!--<div id="fb-root"></div>-->
<!--<script>
window.fbAsyncInit = function() {
FB.init({
appId : '142574589139226', // App ID
channelUrl : '//snsimglink.appspot.com/channel.html', // Channel File
status : false, // check login status true
cookie : false, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>-->
</body>
</html>kwin786http://www.blogger.com/profile/11636870499038520354noreply@blogger.com0tag:blogger.com,1999:blog-4631337081774196669.post-25101357281156645672012-04-29T23:33:00.001+09:002012-04-29T23:33:05.565+09:00v<!--<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">-->
<html lang="en">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0, user-scalable=YES" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<style type="text/css" media="screen">
body { background-color: black; color: white; font-family: 'Lucida Grande', Verdana, Arial; font-size: 12px;
background-image: -webkit-gradient(radial,50% 500,1,50% 500,400, from(rgba(255, 255, 255, 0.3)),to(rgba(255, 255, 255, 0)));
background-repeat: no-repeat; }
#container { width: 100%; height: 850px;
-webkit-perspective: 800; /* For compatibility with iPhone 3.0, we leave off the units here */
-webkit-perspective-origin: 50% 225px;
}
/* 0 -> -120 -100 -> -50 2012/02/07 */
#floor { position:absolute;top:-10%; left:-50% ; margin-top:-120px; margin-left:-50px;
-webkit-mask-image:-webkit-gradient(radial, center center, 0, center center, 350,from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
-webkit-transform: rotateX(90deg) rotateY(0deg) rotateZ(0deg) translateZ(-210px) translateY(10px);
}
#floorBallLeft { position:absolute;top:-10%; left:10% ; margin-top:0px; margin-left:-90px; height:50px; opacity:0.5;
-webkit-transform: rotateX(15deg) rotateY(45deg) rotateZ(0deg) translateZ(0px) translateY(0px); }
#floorBallRight { position:absolute;top:-10%; right:15% ; margin-top:0px; margin-right:-90px; height:50px; width:45px;opacity:0.5;
-webkit-transform: rotateX(10deg) rotateY(-45deg) rotateZ(0deg) translateZ(0px) translateY(0px); }
#floorBallHome { position:absolute;top:20%; left:35% ; margin-top:60px; margin-left:0px; height:35px; width:75px; opacity:0.3;
-webkit-transform: rotateX(15deg) rotateY(0deg) rotateZ(0deg) translateZ(0px) translateY(0px); }
/* #floorC { position:absolute;top:95%; left:50% ;-webkit-transform:scale(3);}
#floorR { position:absolute;top:90%; right:15% ; margin-top:0px; margin-right:0px; -webkit-transform:scale(3);}
#floorL { position:absolute;top:90%; left: 15% ; margin-top:0px; margin-left:0px ; -webkit-transform:scale(3);}*/
a:link { text-decoration: none; color:#DF1FBB; }
a:active { text-decoration: none; color:#DF1FBB; }
a:visited { text-decoration: none; color:#DF1FBB; } /* #555555 */
a:hover { text-decoration: none; color:#DF1FBB; }
li { display:inline-block; }
#floor_text{ position: absolute;
top:80%; left:-80%; height: 800px; width: 420px;
border: 0px solid white;
-webkit-box-sizing: border-box; text-align: left; font-family: Times, serif;
font-size: 20pt; font-color: white; /*font-size: 24pt; color: white; */
}
#stage { width: 100%; height: 100%; -webkit-transition: -webkit-transform 2s; -webkit-transform-style: preserve-3d; }
#shape { position: relative; top: 50px; margin: 0 auto; height: 400px; width: 204px; -webkit-transform-style: preserve-3d; }
#shapeX { margin: 0 auto; height: 200px; width: 200px; -webkit-transform-style: preserve-3d; }
.plane { position: absolute;
height: 400px; width: 204px; border: 0px solid white;
text-align: center; font-family: Times, serif; font-size: 124pt; color: black;
background-image: -webkit-gradient(linear, left bottom, right top,from(rgba(0,0,0,0)), to(rgba(0,0,0,1.0)));
background-repeat: no-repeat;
background-color: rgba( 0, 0, 0, 0.4); /* 0.6 */
-webkit-box-sizing: border-box;
-webkit-transition: -webkit-transform 2s, opacity 2s; -webkit-backface-visibility: hidden; /* hidden */
}
.subplane {position: absolute; width:204px;top:-335px; border: 0px; padding:0px; opacity:0.5;
-webkit-transition: -webkit-transform 2s,opacity 2s;-webkit-backface-visibility:visible;}
#shape.backfaces .plane { -webkit-backface-visibility: visible; }
@-webkit-keyframes spin { from { -webkit-transform: rotateY(0); } to { -webkit-transform: rotateY(-360deg); } }
@-webkit-keyframes spinR{ from { -webkit-transform: rotateY(0); } to { -webkit-transform: rotateY( 360deg); } }
@-webkit-keyframes spin0{ }
/* 上部の説明文の書式設定 背景は灰色で角を丸める .controls {width: 70%; height:10%; margin: 0 auto; padding: 5px 20px; */
.controls { opacity:0.6; /* width: 80%; height:40%; */
position:absolute;top:80%; left:34%; height:36px; /* bottom:1% */
margin: 0 auto; padding: 5px 10px; background-color: rgba(255, 255, 255, 0.15);
-webkit-border-radius: 48px; }
.ctlBtn { font-size:10pt; opacity:0.8; margin-bottom:7px;}
.controls > div { margin: 10px; }
/* ---------- ring2 styles ------------- */
.ring2 > .s1 { -webkit-transform: rotateY( 0deg) translateY( 0px) translateZ(-380px); }
.ring2 > .s2 { -webkit-transform: rotateY( -30deg) translateY( 0px) translateZ(-380px); }
.ring2 > .s3 { -webkit-transform: rotateY( -60deg) translateY( 0px) translateZ(-380px); }
.ring2 > .s4 { -webkit-transform: rotateY( -90deg) translateZ(-380px); }
.ring2 > .s5 { -webkit-transform: rotateY( -120deg) translateZ(-380px); }
.ring2 > .s6 { -webkit-transform: rotateY( -150deg) translateZ(-380px); }
.ring2 > .s7 { -webkit-transform: rotateY( -180deg) translateZ(-380px); }
.ring2 > .s8 { -webkit-transform: rotateY( -210deg) translateZ(-380px); }
.ring2 > .s9 { -webkit-transform: rotateY( 120deg) translateZ(-380px); }
.ring2 > .s10 { -webkit-transform: rotateY( 90deg) translateZ(-380px); }
.ring2 > .s11 { -webkit-transform: rotateY( -300deg) translateZ(-380px); }
.ring2 > .s12 { -webkit-transform: rotateY( -330deg) translateZ(-380px); }
.ring2 > .s13 { -webkit-transform: translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s14 { -webkit-transform: rotateY( -20deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s15 { -webkit-transform: rotateY( -40deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s16 { -webkit-transform: rotateY( -60deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s17 { -webkit-transform: rotateY( -80deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s18 { -webkit-transform: rotateY( -100deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s19 { -webkit-transform: rotateY( -120deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s20 { -webkit-transform: rotateY( -140deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s21 { -webkit-transform: rotateY( -160deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s22 { -webkit-transform: rotateY( -180deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s23 { -webkit-transform: rotateY( -200deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s24 { -webkit-transform: rotateY( -220deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s25 { -webkit-transform: rotateY( -240deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s26 { -webkit-transform: rotateY( -260deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s27 { -webkit-transform: rotateY( -280deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s28 { -webkit-transform: rotateY( -300deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s29 { -webkit-transform: rotateY( -320deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s30 { -webkit-transform: rotateY( -340deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
/* .slideIn {-webkit-animation-timing-function: ease ;-webkit-animation-duration: 1500ms;-webkit-animation-name: slidein; margin-left:0px;} */
.slideIn {-webkit-animation-timing-function: ease ;-webkit-animation-duration: 1500ms;-webkit-animation-name: slidein; margin-right:0px;}
/* @-webkit-keyframes _slidein {from {margin-left:-320px; }to { margin-left:0;}} */
@-webkit-keyframes slidein {from { margin-top: 120px; opacity:0; } to { margin-top: 0px; opacity:1; } }
/* -webkit-transform:rotateX(30deg); */
.slideFloor {-webkit-animation-timing-function: ease;-webkit-animation-duration: 1000ms;-webkit-animation-name: slidein; margin-left:0px;}
@-webkit-keyframes slideFloor {from { margin-top: 120px; opacity:0; } to { margin-top: 0px; opacity:1;} }
/* #slideMenu.slideOut {-webkit-animation-timing-function: ease;-webkit-animation-duration: 350ms;-webkit-animation-name: slideout;}
@-webkit-keyframes slideout {from {margin-left:0; }to { margin-left:-320px;}} */
</style>
<script type="text/javascript" src="file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.1/Applications/6B3E54D6-18F5-404B-A952-B255695821FE/KwinTabBar2.app/alexframework/src/javascript/gear5.js"></script>
<script type="text/javascript" src="file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.1/Applications/6B3E54D6-18F5-404B-A952-B255695821FE/KwinTabBar2.app/alexframework/src/javascript/jquery.min.js"></script>
<script type="text/javascript" src="file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.1/Applications/6B3E54D6-18F5-404B-A952-B255695821FE/KwinTabBar2.app/alexframework/src/javascript/alex.core.js"></script>
<script type="text/javascript" src="file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.1/Applications/6B3E54D6-18F5-404B-A952-B255695821FE/KwinTabBar2.app/alexframework/src/javascript/alex.record.js"></script>
<script type="text/javascript" src="file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.1/Applications/6B3E54D6-18F5-404B-A952-B255695821FE/KwinTabBar2.app/alexframework/src/javascript/albums.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript" ></script>
<!--<script type="text/javascript" src="file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.1/Applications/6B3E54D6-18F5-404B-A952-B255695821FE/KwinTabBar2.app/alexframework/src/javascript/facebook.js"></script>-->
<script type="text/javascript">
function setCss(currentWidth){
if ( navigator.userAgent.match( /iPhone/i ) || navigator.userAgent.match( /iPod/i ) ) {
var el = document.getElementById("ctrl1");
el.style.position = 'absolute';
el.style.left = '0px';
if(window.navigator.standalone){ el.style.top = '10px'; }
}
shape.style.top='25%';
floor.style.top='30%';
floor.style.left='-50%';
var tY = -1*(720-586)/2;
var tY = 0;
if (floorImg.naturalWidth > floorImg.naturalHeight ){
var tZ = 80 - (floorImg.naturalWidth - floorImg.naturalHeight );
}else{ var tZ = 80; }
// alert("setCss");
// floor.style.webkitTransform='rotateX(90deg) rotateY(0deg) rotateZ(0deg) translateZ('+tZ+'px) translateY(10px)';
// var _rotateY = 90; shape.style.webkitTransform = 'rotateY('+_rotateY+'deg)';
//alert(window.orientation+","+currentWidth);
if (window.orientation == 90 || window.orientation == -90||currentWidth > 800){
ctrl2.style.top='60%';ctrl1.style.left='42%';
}
}
</script>
<!-- <script type="text/javascript">
google.maps.event.addDomListener(window, 'load', function() {
var latlng = new google.maps.LatLng(29.988611, 52.871944); // -34.397, 150.644); 29.988611, 52.871944 37.409722, 34.1725
var myOptions = {zoom: 4,center: latlng,mapTypeId: google.maps.MapTypeId.HYBRID, // ROADMAP SATELLITE HYBRID TERRAIN
zoomControl: true,}; // scaleControl: true,
var map = new google.maps.Map(document.getElementById("map"), myOptions);
var marker = new google.maps.Marker({ position: latlng, map: map, title:"Hello World!"});
var infowindow = new google.maps.InfoWindow({content: 'test',size: new google.maps.Size(200, 100)});
google.maps.event.addListener(marker, 'click', function() {infowindow.open(map,marker); });
});
</script>-->
</head>
<body onload="addAnimationHandlers('/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.1/Applications/6B3E54D6-18F5-404B-A952-B255695821FE/KwinTabBar2.app',90,'stop','0','800')">
<br/ >
<br />
<div id="getComment"></div>
<div id="container">
<div id="stage">
<div id="shape" class="ring2 ">
<div id="shapeX" class="ring2 ">
<img class="subplane s1 slideIn" id="sub1" style="padding:0px;"/><img class="subplane s2 slideIn" id="sub2" style="padding:0px;"/>
<img class="subplane s3 slideIn" id="sub3" style="padding:0px;"/><img class="subplane s4 slideIn" id="sub4" style="padding:0px;"/>
<img class="subplane s5 slideIn" id="sub5" style="padding:0px;"/><img class="subplane s6 slideIn" id="sub6" style="padding:0px;"/>
<img class="subplane s7 slideIn" id="sub7" style="padding:0px;"/><img class="subplane s8 slideIn" id="sub8" style="padding:0px;"/>
<img class="subplane s9 slideIn" id="sub9" style="padding:0px;"/><img class="subplane s10 slideIn" id="sub10" style="padding:0px;"/>
<img class="subplane s11 slideIn" id="sub11" style="padding:0px;"/><img class="subplane s12 slideIn" id="sub12" style="padding:0px;"/>
<div class="plane s1 slideIn" id="s1" >
<a href='#' onclick="pop('1','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/s720x720/540573_364116136967291_170251749687065_956914_401851872_n.jpg','_caption_','170251749687065_81592','https://www.facebook.com/photo.php?fbid=364116136967291&set=a.364115243634047.81592.170251749687065&type=1','a_ios','160','51','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/s720x720/540573_364116136967291_170251749687065_956914_401851872_n.jpg','0','0')">
<img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/s720x720/540573_364116136967291_170251749687065_956914_401851872_n.jpg" width="160" style="margin-left:0px; margin-top:70px; padding:0px;" id="i1"></a></div>
<div class="plane s2 slideIn" id="s2" >
<a href='#' onclick="pop('2','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/s720x720/534770_367335489978689_170251749687065_963637_1100463937_n.jpg','_caption_','170251749687065_81999','https://www.facebook.com/photo.php?fbid=367335489978689&set=a.367335209978717.81999.170251749687065&type=1','a_ios','160','58','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/s720x720/534770_367335489978689_170251749687065_963637_1100463937_n.jpg','0','0')">
<img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/s720x720/534770_367335489978689_170251749687065_963637_1100463937_n.jpg" width="160" style="margin-left:0px; margin-top:70px; padding:0px;" id="i2"></a></div>
<div class="plane s3 slideIn" id="s3" >
<a href='#' onclick="pop('3','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-snc6/247035_192147500830823_170251749687065_451666_4293116_n.jpg','_caption_','170251749687065_45304','https://www.facebook.com/photo.php?fbid=192147500830823&set=a.192147124164194.45304.170251749687065&type=1','a_ios','160','55','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-snc6/247035_192147500830823_170251749687065_451666_4293116_n.jpg','0','0')">
<img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-snc6/247035_192147500830823_170251749687065_451666_4293116_n.jpg" width="160" style="margin-left:0px; margin-top:94px; padding:0px;" id="i3"></a></div>
<div class="plane s4 slideIn" id="s4" >
<a href='#' onclick="pop('4','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-snc6/247157_192145187497721_170251749687065_451578_2303316_n.jpg','_caption_','170251749687065_45303','https://www.facebook.com/photo.php?fbid=192145187497721&set=a.192144577497782.45303.170251749687065&type=1','a_ios','160','60','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-snc6/247157_192145187497721_170251749687065_451578_2303316_n.jpg','0','0')">
<img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-snc6/247157_192145187497721_170251749687065_451578_2303316_n.jpg" width="160" style="margin-left:0px; margin-top:100px; padding:0px;" id="i4"></a></div>
<div class="plane s5 slideIn" id="s5" >
<a href='#' onclick="pop('5','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash4/s720x720/313453_227147683997471_170251749687065_588106_5132583_n.jpg','_caption_','170251749687065_54182','https://www.facebook.com/photo.php?fbid=227147683997471&set=a.227147650664141.54182.170251749687065&type=1','a_ios','160','54','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash4/s720x720/313453_227147683997471_170251749687065_588106_5132583_n.jpg','0','0')">
<img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash4/s720x720/313453_227147683997471_170251749687065_588106_5132583_n.jpg" width="160" style="margin-left:0px; margin-top:96px; padding:0px;" id="i5"></a></div>
<div class="plane s6 slideIn" id="s6" >
<a href='#' onclick="pop('6','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/578678_367337533311818_170251749687065_963674_1549291493_n.jpg','_caption_','170251749687065_82000','https://www.facebook.com/photo.php?fbid=367337533311818&set=a.367337479978490.82000.170251749687065&type=1','a_ios','160','59','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/578678_367337533311818_170251749687065_963674_1549291493_n.jpg','0','0')">
<img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/578678_367337533311818_170251749687065_963674_1549291493_n.jpg" width="160" style="margin-left:0px; margin-top:115px; padding:0px;" id="i6"></a></div>
<div class="plane s7 slideIn" id="s7" >
<a href='#' onclick="pop('7','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/s720x720/540169_365109120201326_170251749687065_959261_1692796122_n.jpg','_caption_','170251749687065_81723','https://www.facebook.com/photo.php?fbid=365109120201326&set=a.365100403535531.81723.170251749687065&type=1','a_ios','160','52','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/s720x720/540169_365109120201326_170251749687065_959261_1692796122_n.jpg','0','0')">
<img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/s720x720/540169_365109120201326_170251749687065_959261_1692796122_n.jpg" width="160" style="margin-left:0px; margin-top:70px; padding:0px;" id="i7"></a></div>
<div class="plane s8 slideIn" id="s8" >
<a href='#' onclick="pop('8','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash4/247945_192150064163900_170251749687065_451769_7103373_n.jpg','_caption_','170251749687065_45305','https://www.facebook.com/photo.php?fbid=192150064163900&set=a.192149594163947.45305.170251749687065&type=1','a_ios','160','56','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash4/247945_192150064163900_170251749687065_451769_7103373_n.jpg','0','0')">
<img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash4/247945_192150064163900_170251749687065_451769_7103373_n.jpg" width="160" style="margin-left:0px; margin-top:70px; padding:0px;" id="i8"></a></div>
<div class="plane s9 slideIn" id="s9" >
<a href='#' onclick="pop('9','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-snc6/249909_192140004164906_170251749687065_451382_7191975_n.jpg','_caption_','170251749687065_45300','https://www.facebook.com/photo.php?fbid=192140004164906&set=a.192139274164979.45300.170251749687065&type=1','a_ios','160','61','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-snc6/249909_192140004164906_170251749687065_451382_7191975_n.jpg','0','0')">
<img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-snc6/249909_192140004164906_170251749687065_451382_7191975_n.jpg" width="160" style="margin-left:0px; margin-top:70px; padding:0px;" id="i9"></a></div>
<div class="plane s10 slideIn" id="s10" >
<a href='#' onclick="pop('10','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-prn1/s720x720/524154_367330693312502_170251749687065_963614_629612418_n.jpg','_caption_','170251749687065_81595','https://www.facebook.com/photo.php?fbid=367330693312502&set=a.364122320300006.81595.170251749687065&type=1','a_ios','160','50','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-prn1/s720x720/524154_367330693312502_170251749687065_963614_629612418_n.jpg','0','0')">
<img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-prn1/s720x720/524154_367330693312502_170251749687065_963614_629612418_n.jpg" width="160" style="margin-left:0px; margin-top:90px; padding:0px;" id="i10"></a></div>
<div class="plane s11 slideIn" id="s11" >
<a href='#' onclick="pop('11','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-prn1/s720x720/538507_365128310199407_170251749687065_959386_1481220093_n.jpg','_caption_','170251749687065_81727','https://www.facebook.com/photo.php?fbid=365128310199407&set=a.365126280199610.81727.170251749687065&type=1','a_ios','160','57','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-prn1/s720x720/538507_365128310199407_170251749687065_959386_1481220093_n.jpg','0','0')">
<img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-prn1/s720x720/538507_365128310199407_170251749687065_959386_1481220093_n.jpg" width="160" style="margin-left:0px; margin-top:70px; padding:0px;" id="i11"></a></div>
<div class="plane s12 slideIn" id="s12" >
<a href='#' onclick="pop('12','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-snc6/168355_170252239687016_170251749687065_328030_1708631_n.jpg','_caption_','170251749687065_33930','https://www.facebook.com/photo.php?fbid=170252239687016&set=a.170252233020350.33930.170251749687065&type=1','a_ios','160','64','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-snc6/168355_170252239687016_170251749687065_328030_1708631_n.jpg','0','0')">
<img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-snc6/168355_170252239687016_170251749687065_328030_1708631_n.jpg" width="160" style="margin-left:0px; margin-top:109px; padding:0px;" id="i12"></a></div>
<div class="plane s13 slideIn" id="s13" style="height:204px; width:133px;">
<a href='#' onclick="pop('13','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/180297_170699769642263_170251749687065_330236_610381_n.jpg','Caption','170251749687065_33929','https://www.facebook.com/photo.php?fbid=170699769642263&set=a.170251943020379.33929.170251749687065&type=1','a_ios','103','62','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/180297_170699769642263_170251749687065_330236_610381_n.jpg','0', '0')">
<img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/180297_170699769642263_170251749687065_330236_610381_n.jpg" width="103" id="i13"></a></div>
<div id="floor" class="slideFloor" align="center">
<img src='http://blog-reader.appspot.com/imgurl?rsssheetkey=site:Johannes_Vermeer,startRSS,limitRSS,1' id="floorImg" width="500" height="500">
</div>
<span id="floor_text"></span>
</div>
</div>
<!-- <span id="floor_text"></span>-->
</div>
</div>
<div class="controls" id="ctrl1" style="position:absolute;top:2%; left:38%;width:180px; height:32px; ">
<button onmouseover="toggleShape1(100)" onclick="toggleShape1(200)" class="ctlBtn">-Zoom</button>
<button onmouseover="toggleShape1(-100)" onclick="toggleShape1(-200)" class="ctlBtn">Zoom+</button>
</div>
<div class="controls" id="ctrl2" style="position:absolute;width:282px"><!-- style="position:absolute; top:30px;"-->
<table><tr><td style="height:32px">
<a href="#" onclick="runAction('fbAlbum','170251749687065_82000,http://blog-reader.appspot.com/imgurl?rsssheetkey=site:Johannes_Vermeer,startRSS,limitRSS,1,prev,0');">
<img src='file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.1/Applications/6B3E54D6-18F5-404B-A952-B255695821FE/KwinTabBar2.app/gray_ball.png'
style="-webkit-transform:rotateX(10deg) rotateY(45deg);height:40px; width:48px;opacity:0.5;margin-left:-15px;margin-bottom:3px"/></a>
</td><td>
<button onclick="autoRotate('left')" class="ctlBtn">
< </button> <button onclick="autoRotate('stop');" class="ctlBtn">■</button>
<button onclick="autoRotate('right')" class="ctlBtn"> > </button>
</td><td>
<a href="#" onclick="runAction('fbAlbum','170251749687065_82000,http://blog-reader.appspot.com/imgurl?rsssheetkey=site:Johannes_Vermeer,startRSS,limitRSS,1,next,0');">
<img src='file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.1/Applications/6B3E54D6-18F5-404B-A952-B255695821FE/KwinTabBar2.app/gray_ball.png'
style="-webkit-transform:rotateX(10deg) rotateY(-45deg);height:40px; width:48px;opacity:0.5;margin-right:-20px;margin-bottom:3px"/></a>
<!--<button onclick="toggleShape1(400)">-Zoom</button> <button onclick="toggleShape1(-400)">Zoom+</button>-->
</td></tr>
</table>
</div>
<div style="position:absolute; bottom:10px;">
<a href="#" onclick='runAction("fbtest","")'>fbtest</a><br />
<a href="#" onclick='runAction("changeCurrentTitle","0")'>Home</a><br />
<a href="#" onclick='runAction("changeCurrentTitle","0")'>parentTitle</a><br />
</div>
<input id="_type" type="hidden" value="000" />
<div id="map" style="position:absolute;left:15%; width:600px; height:600px;"></div>
<script type="text/javascript" src="file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.1/Applications/6B3E54D6-18F5-404B-A952-B255695821FE/KwinTabBar2.app/alexframework/src/javascript/googleMap.js"></script>
<!--<div id="fb-root"></div>-->
<!--<script>
window.fbAsyncInit = function() {
FB.init({
appId : '142574589139226', // App ID
channelUrl : '//snsimglink.appspot.com/channel.html', // Channel File
status : false, // check login status true
cookie : false, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>-->
</body>
</html>kwin786http://www.blogger.com/profile/11636870499038520354noreply@blogger.com0tag:blogger.com,1999:blog-4631337081774196669.post-68242176305053565222012-04-29T23:24:00.000+09:002012-04-29T23:29:23.784+09:00G<!--<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">-->
<html lang="en">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0, user-scalable=YES" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<style type="text/css" media="screen">
body { background-color: black; color: white; font-family: 'Lucida Grande', Verdana, Arial; font-size: 12px;
background-image: -webkit-gradient(radial,50% 500,1,50% 500,400, from(rgba(255, 255, 255, 0.3)),to(rgba(255, 255, 255, 0)));
background-repeat: no-repeat; }
#container { width: 100%; height: 850px;
-webkit-perspective: 800; /* For compatibility with iPhone 3.0, we leave off the units here */
-webkit-perspective-origin: 50% 225px;
}
/* 0 -> -120 -100 -> -50 2012/02/07 */
#floor { position:absolute;top:-10%; left:-50% ; margin-top:-120px; margin-left:-50px;
-webkit-mask-image:-webkit-gradient(radial, center center, 0, center center, 350,from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
-webkit-transform: rotateX(90deg) rotateY(0deg) rotateZ(0deg) translateZ(-210px) translateY(10px);
}
#floorBallLeft { position:absolute;top:-10%; left:10% ; margin-top:0px; margin-left:-90px; height:50px; opacity:0.5;
-webkit-transform: rotateX(15deg) rotateY(45deg) rotateZ(0deg) translateZ(0px) translateY(0px); }
#floorBallRight { position:absolute;top:-10%; right:15% ; margin-top:0px; margin-right:-90px; height:50px; width:45px;opacity:0.5;
-webkit-transform: rotateX(10deg) rotateY(-45deg) rotateZ(0deg) translateZ(0px) translateY(0px); }
#floorBallHome { position:absolute;top:20%; left:35% ; margin-top:60px; margin-left:0px; height:35px; width:75px; opacity:0.3;
-webkit-transform: rotateX(15deg) rotateY(0deg) rotateZ(0deg) translateZ(0px) translateY(0px); }
/* #floorC { position:absolute;top:95%; left:50% ;-webkit-transform:scale(3);}
#floorR { position:absolute;top:90%; right:15% ; margin-top:0px; margin-right:0px; -webkit-transform:scale(3);}
#floorL { position:absolute;top:90%; left: 15% ; margin-top:0px; margin-left:0px ; -webkit-transform:scale(3);}*/
a:link { text-decoration: none; color:#DF1FBB; }
a:active { text-decoration: none; color:#DF1FBB; }
a:visited { text-decoration: none; color:#DF1FBB; } /* #555555 */
a:hover { text-decoration: none; color:#DF1FBB; }
li { display:inline-block; }
#floor_text{ position: absolute;
top:80%; left:-80%; height: 800px; width: 420px;
border: 0px solid white;
-webkit-box-sizing: border-box; text-align: left; font-family: Times, serif;
font-size: 20pt; font-color: white; /*font-size: 24pt; color: white; */
}
#stage { width: 100%; height: 100%; -webkit-transition: -webkit-transform 2s; -webkit-transform-style: preserve-3d; }
#shape { position: relative; top: 50px; margin: 0 auto; height: 400px; width: 204px; -webkit-transform-style: preserve-3d; }
#shapeX { margin: 0 auto; height: 200px; width: 200px; -webkit-transform-style: preserve-3d; }
.plane { position: absolute;
height: 400px; width: 204px; border: 0px solid white;
text-align: center; font-family: Times, serif; font-size: 124pt; color: black;
background-image: -webkit-gradient(linear, left bottom, right top,from(rgba(0,0,0,0)), to(rgba(0,0,0,1.0)));
background-repeat: no-repeat;
background-color: rgba( 0, 0, 0, 0.4); /* 0.6 */
-webkit-box-sizing: border-box;
-webkit-transition: -webkit-transform 2s, opacity 2s; -webkit-backface-visibility: hidden; /* hidden */
}
.subplane {position: absolute; width:204px;top:-335px; border: 0px; padding:0px; opacity:0.5;
-webkit-transition: -webkit-transform 2s,opacity 2s;-webkit-backface-visibility:visible;}
#shape.backfaces .plane { -webkit-backface-visibility: visible; }
@-webkit-keyframes spin { from { -webkit-transform: rotateY(0); } to { -webkit-transform: rotateY(-360deg); } }
@-webkit-keyframes spinR{ from { -webkit-transform: rotateY(0); } to { -webkit-transform: rotateY( 360deg); } }
@-webkit-keyframes spin0{ }
/* 上部の説明文の書式設定 背景は灰色で角を丸める .controls {width: 70%; height:10%; margin: 0 auto; padding: 5px 20px; */
.controls { opacity:0.6; /* width: 80%; height:40%; */
position:absolute;top:80%; left:34%; height:36px; /* bottom:1% */
margin: 0 auto; padding: 5px 10px; background-color: rgba(255, 255, 255, 0.15);
-webkit-border-radius: 48px; }
.ctlBtn { font-size:10pt; opacity:0.8; margin-bottom:7px;}
.controls > div { margin: 10px; }
/* ---------- ring2 styles ------------- */
.ring2 > .s1 { -webkit-transform: rotateY( 0deg) translateY( 0px) translateZ(-380px); }
.ring2 > .s2 { -webkit-transform: rotateY( -30deg) translateY( 0px) translateZ(-380px); }
.ring2 > .s3 { -webkit-transform: rotateY( -60deg) translateY( 0px) translateZ(-380px); }
.ring2 > .s4 { -webkit-transform: rotateY( -90deg) translateZ(-380px); }
.ring2 > .s5 { -webkit-transform: rotateY( -120deg) translateZ(-380px); }
.ring2 > .s6 { -webkit-transform: rotateY( -150deg) translateZ(-380px); }
.ring2 > .s7 { -webkit-transform: rotateY( -180deg) translateZ(-380px); }
.ring2 > .s8 { -webkit-transform: rotateY( -210deg) translateZ(-380px); }
.ring2 > .s9 { -webkit-transform: rotateY( 120deg) translateZ(-380px); }
.ring2 > .s10 { -webkit-transform: rotateY( 90deg) translateZ(-380px); }
.ring2 > .s11 { -webkit-transform: rotateY( -300deg) translateZ(-380px); }
.ring2 > .s12 { -webkit-transform: rotateY( -330deg) translateZ(-380px); }
.ring2 > .s13 { -webkit-transform: translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s14 { -webkit-transform: rotateY( -20deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s15 { -webkit-transform: rotateY( -40deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s16 { -webkit-transform: rotateY( -60deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s17 { -webkit-transform: rotateY( -80deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s18 { -webkit-transform: rotateY( -100deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s19 { -webkit-transform: rotateY( -120deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s20 { -webkit-transform: rotateY( -140deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s21 { -webkit-transform: rotateY( -160deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s22 { -webkit-transform: rotateY( -180deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s23 { -webkit-transform: rotateY( -200deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s24 { -webkit-transform: rotateY( -220deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s25 { -webkit-transform: rotateY( -240deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s26 { -webkit-transform: rotateY( -260deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s27 { -webkit-transform: rotateY( -280deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s28 { -webkit-transform: rotateY( -300deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s29 { -webkit-transform: rotateY( -320deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s30 { -webkit-transform: rotateY( -340deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
/* .slideIn {-webkit-animation-timing-function: ease ;-webkit-animation-duration: 1500ms;-webkit-animation-name: slidein; margin-left:0px;} */
.slideIn {-webkit-animation-timing-function: ease ;-webkit-animation-duration: 1500ms;-webkit-animation-name: slidein; margin-right:0px;}
/* @-webkit-keyframes _slidein {from {margin-left:-320px; }to { margin-left:0;}} */
@-webkit-keyframes slidein {from { margin-top: 120px; opacity:0; } to { margin-top: 0px; opacity:1; } }
/* -webkit-transform:rotateX(30deg); */
.slideFloor {-webkit-animation-timing-function: ease;-webkit-animation-duration: 1000ms;-webkit-animation-name: slidein; margin-left:0px;}
@-webkit-keyframes slideFloor {from { margin-top: 120px; opacity:0; } to { margin-top: 0px; opacity:1;} }
/* #slideMenu.slideOut {-webkit-animation-timing-function: ease;-webkit-animation-duration: 350ms;-webkit-animation-name: slideout;}
@-webkit-keyframes slideout {from {margin-left:0; }to { margin-left:-320px;}} */
</style>
<script type="text/javascript" src="file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.1/Applications/6B3E54D6-18F5-404B-A952-B255695821FE/KwinTabBar2.app/alexframework/src/javascript/gear5.js"></script>
<script type="text/javascript" src="file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.1/Applications/6B3E54D6-18F5-404B-A952-B255695821FE/KwinTabBar2.app/alexframework/src/javascript/jquery.min.js"></script>
<script type="text/javascript" src="file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.1/Applications/6B3E54D6-18F5-404B-A952-B255695821FE/KwinTabBar2.app/alexframework/src/javascript/alex.core.js"></script>
<script type="text/javascript" src="file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.1/Applications/6B3E54D6-18F5-404B-A952-B255695821FE/KwinTabBar2.app/alexframework/src/javascript/alex.record.js"></script>
<script type="text/javascript" src="file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.1/Applications/6B3E54D6-18F5-404B-A952-B255695821FE/KwinTabBar2.app/alexframework/src/javascript/albums.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript" ></script>
<!--<script type="text/javascript" src="file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.1/Applications/6B3E54D6-18F5-404B-A952-B255695821FE/KwinTabBar2.app/alexframework/src/javascript/facebook.js"></script>-->
<script type="text/javascript">
function setCss(currentWidth){
if ( navigator.userAgent.match( /iPhone/i ) || navigator.userAgent.match( /iPod/i ) ) {
var el = document.getElementById("ctrl1");
el.style.position = 'absolute';
el.style.left = '0px';
if(window.navigator.standalone){ el.style.top = '10px'; }
}
shape.style.top='25%';
floor.style.top='30%';
floor.style.left='-50%';
var tY = -1*(720-586)/2;
var tY = 0;
if (floorImg.naturalWidth > floorImg.naturalHeight ){
var tZ = 80 - (floorImg.naturalWidth - floorImg.naturalHeight );
}else{ var tZ = 80; }
// alert("setCss");
// floor.style.webkitTransform='rotateX(90deg) rotateY(0deg) rotateZ(0deg) translateZ('+tZ+'px) translateY(10px)';
// var _rotateY = 90; shape.style.webkitTransform = 'rotateY('+_rotateY+'deg)';
//alert(window.orientation+","+currentWidth);
if (window.orientation == 90 || window.orientation == -90||currentWidth > 800){
ctrl2.style.top='60%';ctrl1.style.left='42%';
}
}
</script>
<!-- <script type="text/javascript">
google.maps.event.addDomListener(window, 'load', function() {
var latlng = new google.maps.LatLng(29.988611, 52.871944); // -34.397, 150.644); 29.988611, 52.871944 37.409722, 34.1725
var myOptions = {zoom: 4,center: latlng,mapTypeId: google.maps.MapTypeId.HYBRID, // ROADMAP SATELLITE HYBRID TERRAIN
zoomControl: true,}; // scaleControl: true,
var map = new google.maps.Map(document.getElementById("map"), myOptions);
var marker = new google.maps.Marker({ position: latlng, map: map, title:"Hello World!"});
var infowindow = new google.maps.InfoWindow({content: 'test',size: new google.maps.Size(200, 100)});
google.maps.event.addListener(marker, 'click', function() {infowindow.open(map,marker); });
});
</script>-->
</head>
<body onload="addAnimationHandlers('/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.1/Applications/6B3E54D6-18F5-404B-A952-B255695821FE/KwinTabBar2.app',90,'stop','0','800')">
<br/ >
<br />
<div id="getComment"></div>
<div id="container">
<div id="stage">
<div id="shape" class="ring2 ">
<div id="shapeX" class="ring2 ">
<img class="subplane s1 slideIn" id="sub1" style="padding:0px;"/><img class="subplane s2 slideIn" id="sub2" style="padding:0px;"/>
<img class="subplane s3 slideIn" id="sub3" style="padding:0px;"/><img class="subplane s4 slideIn" id="sub4" style="padding:0px;"/>
<img class="subplane s5 slideIn" id="sub5" style="padding:0px;"/><img class="subplane s6 slideIn" id="sub6" style="padding:0px;"/>
<img class="subplane s7 slideIn" id="sub7" style="padding:0px;"/><img class="subplane s8 slideIn" id="sub8" style="padding:0px;"/>
<img class="subplane s9 slideIn" id="sub9" style="padding:0px;"/><img class="subplane s10 slideIn" id="sub10" style="padding:0px;"/>
<img class="subplane s11 slideIn" id="sub11" style="padding:0px;"/><img class="subplane s12 slideIn" id="sub12" style="padding:0px;"/>
<div class="plane s1 slideIn" id="s1" >
<a href='#' onclick="pop('1','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/s720x720/540573_364116136967291_170251749687065_956914_401851872_n.jpg','_caption_','170251749687065_81592','https://www.facebook.com/photo.php?fbid=364116136967291&set=a.364115243634047.81592.170251749687065&type=1','a_ios','160','51','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/s720x720/540573_364116136967291_170251749687065_956914_401851872_n.jpg','0','0')">
<img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/s720x720/540573_364116136967291_170251749687065_956914_401851872_n.jpg" width="160" style="margin-left:0px; margin-top:70px; padding:0px;" id="i1"></a></div>
<div class="plane s2 slideIn" id="s2" >
<a href='#' onclick="pop('2','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/s720x720/534770_367335489978689_170251749687065_963637_1100463937_n.jpg','_caption_','170251749687065_81999','https://www.facebook.com/photo.php?fbid=367335489978689&set=a.367335209978717.81999.170251749687065&type=1','a_ios','160','58','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/s720x720/534770_367335489978689_170251749687065_963637_1100463937_n.jpg','0','0')">
<img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/s720x720/534770_367335489978689_170251749687065_963637_1100463937_n.jpg" width="160" style="margin-left:0px; margin-top:70px; padding:0px;" id="i2"></a></div>
<div class="plane s3 slideIn" id="s3" >
<a href='#' onclick="pop('3','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-snc6/247035_192147500830823_170251749687065_451666_4293116_n.jpg','_caption_','170251749687065_45304','https://www.facebook.com/photo.php?fbid=192147500830823&set=a.192147124164194.45304.170251749687065&type=1','a_ios','160','55','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-snc6/247035_192147500830823_170251749687065_451666_4293116_n.jpg','0','0')">
<img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-snc6/247035_192147500830823_170251749687065_451666_4293116_n.jpg" width="160" style="margin-left:0px; margin-top:94px; padding:0px;" id="i3"></a></div>
<div class="plane s4 slideIn" id="s4" >
<a href='#' onclick="pop('4','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-snc6/247157_192145187497721_170251749687065_451578_2303316_n.jpg','_caption_','170251749687065_45303','https://www.facebook.com/photo.php?fbid=192145187497721&set=a.192144577497782.45303.170251749687065&type=1','a_ios','160','60','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-snc6/247157_192145187497721_170251749687065_451578_2303316_n.jpg','0','0')">
<img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-snc6/247157_192145187497721_170251749687065_451578_2303316_n.jpg" width="160" style="margin-left:0px; margin-top:100px; padding:0px;" id="i4"></a></div>
<div class="plane s5 slideIn" id="s5" >
<a href='#' onclick="pop('5','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash4/s720x720/313453_227147683997471_170251749687065_588106_5132583_n.jpg','_caption_','170251749687065_54182','https://www.facebook.com/photo.php?fbid=227147683997471&set=a.227147650664141.54182.170251749687065&type=1','a_ios','160','54','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash4/s720x720/313453_227147683997471_170251749687065_588106_5132583_n.jpg','0','0')">
<img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash4/s720x720/313453_227147683997471_170251749687065_588106_5132583_n.jpg" width="160" style="margin-left:0px; margin-top:96px; padding:0px;" id="i5"></a></div>
<div class="plane s6 slideIn" id="s6" >
<a href='#' onclick="pop('6','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/578678_367337533311818_170251749687065_963674_1549291493_n.jpg','_caption_','170251749687065_82000','https://www.facebook.com/photo.php?fbid=367337533311818&set=a.367337479978490.82000.170251749687065&type=1','a_ios','160','59','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/578678_367337533311818_170251749687065_963674_1549291493_n.jpg','0','0')">
<img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/578678_367337533311818_170251749687065_963674_1549291493_n.jpg" width="160" style="margin-left:0px; margin-top:115px; padding:0px;" id="i6"></a></div>
<div class="plane s7 slideIn" id="s7" >
<a href='#' onclick="pop('7','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/s720x720/540169_365109120201326_170251749687065_959261_1692796122_n.jpg','_caption_','170251749687065_81723','https://www.facebook.com/photo.php?fbid=365109120201326&set=a.365100403535531.81723.170251749687065&type=1','a_ios','160','52','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/s720x720/540169_365109120201326_170251749687065_959261_1692796122_n.jpg','0','0')">
<img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/s720x720/540169_365109120201326_170251749687065_959261_1692796122_n.jpg" width="160" style="margin-left:0px; margin-top:70px; padding:0px;" id="i7"></a></div>
<div class="plane s8 slideIn" id="s8" >
<a href='#' onclick="pop('8','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash4/247945_192150064163900_170251749687065_451769_7103373_n.jpg','_caption_','170251749687065_45305','https://www.facebook.com/photo.php?fbid=192150064163900&set=a.192149594163947.45305.170251749687065&type=1','a_ios','160','56','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash4/247945_192150064163900_170251749687065_451769_7103373_n.jpg','0','0')">
<img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash4/247945_192150064163900_170251749687065_451769_7103373_n.jpg" width="160" style="margin-left:0px; margin-top:70px; padding:0px;" id="i8"></a></div>
<div class="plane s9 slideIn" id="s9" >
<a href='#' onclick="pop('9','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-snc6/249909_192140004164906_170251749687065_451382_7191975_n.jpg','_caption_','170251749687065_45300','https://www.facebook.com/photo.php?fbid=192140004164906&set=a.192139274164979.45300.170251749687065&type=1','a_ios','160','61','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-snc6/249909_192140004164906_170251749687065_451382_7191975_n.jpg','0','0')">
<img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-snc6/249909_192140004164906_170251749687065_451382_7191975_n.jpg" width="160" style="margin-left:0px; margin-top:70px; padding:0px;" id="i9"></a></div>
<div class="plane s10 slideIn" id="s10" >
<a href='#' onclick="pop('10','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-prn1/s720x720/524154_367330693312502_170251749687065_963614_629612418_n.jpg','_caption_','170251749687065_81595','https://www.facebook.com/photo.php?fbid=367330693312502&set=a.364122320300006.81595.170251749687065&type=1','a_ios','160','50','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-prn1/s720x720/524154_367330693312502_170251749687065_963614_629612418_n.jpg','0','0')">
<img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-prn1/s720x720/524154_367330693312502_170251749687065_963614_629612418_n.jpg" width="160" style="margin-left:0px; margin-top:90px; padding:0px;" id="i10"></a></div>
<div class="plane s11 slideIn" id="s11" >
<a href='#' onclick="pop('11','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-prn1/s720x720/538507_365128310199407_170251749687065_959386_1481220093_n.jpg','_caption_','170251749687065_81727','https://www.facebook.com/photo.php?fbid=365128310199407&set=a.365126280199610.81727.170251749687065&type=1','a_ios','160','57','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-prn1/s720x720/538507_365128310199407_170251749687065_959386_1481220093_n.jpg','0','0')">
<img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-prn1/s720x720/538507_365128310199407_170251749687065_959386_1481220093_n.jpg" width="160" style="margin-left:0px; margin-top:70px; padding:0px;" id="i11"></a></div>
<div class="plane s12 slideIn" id="s12" >
<a href='#' onclick="pop('12','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-snc6/168355_170252239687016_170251749687065_328030_1708631_n.jpg','_caption_','170251749687065_33930','https://www.facebook.com/photo.php?fbid=170252239687016&set=a.170252233020350.33930.170251749687065&type=1','a_ios','160','64','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-snc6/168355_170252239687016_170251749687065_328030_1708631_n.jpg','0','0')">
<img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-snc6/168355_170252239687016_170251749687065_328030_1708631_n.jpg" width="160" style="margin-left:0px; margin-top:109px; padding:0px;" id="i12"></a></div>
<div class="plane s13 slideIn" id="s13" style="height:204px; width:133px;">
<a href='#' onclick="pop('13','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/180297_170699769642263_170251749687065_330236_610381_n.jpg','Caption','170251749687065_33929','https://www.facebook.com/photo.php?fbid=170699769642263&set=a.170251943020379.33929.170251749687065&type=1','a_ios','103','62','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/180297_170699769642263_170251749687065_330236_610381_n.jpg','0', '0')">
<img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/180297_170699769642263_170251749687065_330236_610381_n.jpg" width="103" id="i13"></a></div>
<div id="floor" class="slideFloor" align="center">
<img src='http://blog-reader.appspot.com/imgurl?rsssheetkey=site:Johannes_Vermeer,startRSS,limitRSS,1' id="floorImg" width="500" height="500">
</div>
<span id="floor_text"></span>
</div>
</div>
<!-- <span id="floor_text"></span>-->
</div>
</div>
<div class="controls" id="ctrl1" style="position:absolute;top:2%; left:38%;width:180px; height:32px; ">
<button onmouseover="toggleShape1(100)" onclick="toggleShape1(200)" class="ctlBtn">-Zoom</button>
<button onmouseover="toggleShape1(-100)" onclick="toggleShape1(-200)" class="ctlBtn">Zoom+</button>
</div>
<div class="controls" id="ctrl2" style="position:absolute;width:282px"><!-- style="position:absolute; top:30px;"-->
<table><tr><td style="height:32px">
<a href="#" onclick="runAction('fbAlbum','170251749687065_81723,http://blog-reader.appspot.com/imgurl?rsssheetkey=site:Johannes_Vermeer,startRSS,limitRSS,1,prev,0');">
<img src='file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.1/Applications/6B3E54D6-18F5-404B-A952-B255695821FE/KwinTabBar2.app/gray_ball.png'
style="-webkit-transform:rotateX(10deg) rotateY(45deg);height:40px; width:48px;opacity:0.5;margin-left:-15px;margin-bottom:3px"/></a>
</td><td>
<button onclick="autoRotate('left')" class="ctlBtn">
< </button> <button onclick="autoRotate('stop');" class="ctlBtn">■</button>
<button onclick="autoRotate('right')" class="ctlBtn"> > </button>
</td><td>
<a href="#" onclick="runAction('fbAlbum','170251749687065_81723,http://blog-reader.appspot.com/imgurl?rsssheetkey=site:Johannes_Vermeer,startRSS,limitRSS,1,next,0');">
<img src='file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.1/Applications/6B3E54D6-18F5-404B-A952-B255695821FE/KwinTabBar2.app/gray_ball.png'
style="-webkit-transform:rotateX(10deg) rotateY(-45deg);height:40px; width:48px;opacity:0.5;margin-right:-20px;margin-bottom:3px"/></a>
<!--<button onclick="toggleShape1(400)">-Zoom</button> <button onclick="toggleShape1(-400)">Zoom+</button>-->
</td></tr>
</table>
</div>
<div style="position:absolute; bottom:10px;">
<a href="#" onclick='runAction("fbtest","")'>fbtest</a><br />
<a href="#" onclick='runAction("changeCurrentTitle","0")'>Home</a><br />
<a href="#" onclick='runAction("changeCurrentTitle","0")'>parentTitle</a><br />
</div>
<input id="_type" type="hidden" value="000" />
<div id="map" style="position:absolute;left:15%; width:600px; height:600px;"></div>
<script type="text/javascript" src="file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.1/Applications/6B3E54D6-18F5-404B-A952-B255695821FE/KwinTabBar2.app/alexframework/src/javascript/googleMap.js"></script>
<!--<div id="fb-root"></div>-->
<!--<script>
window.fbAsyncInit = function() {
FB.init({
appId : '142574589139226', // App ID
channelUrl : '//snsimglink.appspot.com/channel.html', // Channel File
status : false, // check login status true
cookie : false, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>-->
</body>
</html>kwin786http://www.blogger.com/profile/11636870499038520354noreply@blogger.com0tag:blogger.com,1999:blog-4631337081774196669.post-52991194379768696222012-04-29T21:50:00.001+09:002012-04-29T22:01:25.353+09:00Art<!--<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">-->
<html lang="en">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0, user-scalable=YES" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<style type="text/css" media="screen">
body { background-color: black; color: white; font-family: 'Lucida Grande', Verdana, Arial; font-size: 12px;
background-image: -webkit-gradient(radial,50% 500,1,50% 500,400, from(rgba(255, 255, 255, 0.3)),to(rgba(255, 255, 255, 0)));
background-repeat: no-repeat; }
#container { width: 100%; height: 850px;
-webkit-perspective: 800; /* For compatibility with iPhone 3.0, we leave off the units here */
-webkit-perspective-origin: 50% 225px;
}
/* 0 -> -120 -100 -> -50 2012/02/07 */
#floor { position:absolute;top:-10%; left:-50% ; margin-top:-120px; margin-left:-50px;
-webkit-mask-image:-webkit-gradient(radial, center center, 0, center center, 350,from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
-webkit-transform: rotateX(90deg) rotateY(0deg) rotateZ(0deg) translateZ(-210px) translateY(10px);
}
#floorBallLeft { position:absolute;top:-10%; left:10% ; margin-top:0px; margin-left:-90px; height:50px; opacity:0.5;
-webkit-transform: rotateX(15deg) rotateY(45deg) rotateZ(0deg) translateZ(0px) translateY(0px); }
#floorBallRight { position:absolute;top:-10%; right:15% ; margin-top:0px; margin-right:-90px; height:50px; width:45px;opacity:0.5;
-webkit-transform: rotateX(10deg) rotateY(-45deg) rotateZ(0deg) translateZ(0px) translateY(0px); }
#floorBallHome { position:absolute;top:20%; left:35% ; margin-top:60px; margin-left:0px; height:35px; width:75px; opacity:0.3;
-webkit-transform: rotateX(15deg) rotateY(0deg) rotateZ(0deg) translateZ(0px) translateY(0px); }
/* #floorC { position:absolute;top:95%; left:50% ;-webkit-transform:scale(3);}
#floorR { position:absolute;top:90%; right:15% ; margin-top:0px; margin-right:0px; -webkit-transform:scale(3);}
#floorL { position:absolute;top:90%; left: 15% ; margin-top:0px; margin-left:0px ; -webkit-transform:scale(3);}*/
a:link { text-decoration: none; color:#DF1FBB; }
a:active { text-decoration: none; color:#DF1FBB; }
a:visited { text-decoration: none; color:#DF1FBB; } /* #555555 */
a:hover { text-decoration: none; color:#DF1FBB; }
li { display:inline-block; }
#floor_text{ position: absolute;
top:80%; left:-80%; height: 800px; width: 420px;
border: 0px solid white;
-webkit-box-sizing: border-box; text-align: left; font-family: Times, serif;
font-size: 20pt; font-color: white; /*font-size: 24pt; color: white; */
}
#stage { width: 100%; height: 100%; -webkit-transition: -webkit-transform 2s; -webkit-transform-style: preserve-3d; }
#shape { position: relative; top: 50px; margin: 0 auto; height: 400px; width: 204px; -webkit-transform-style: preserve-3d; }
#shapeX { margin: 0 auto; height: 200px; width: 200px; -webkit-transform-style: preserve-3d; }
.plane { position: absolute;
height: 400px; width: 204px; border: 0px solid white;
text-align: center; font-family: Times, serif; font-size: 124pt; color: black;
background-image: -webkit-gradient(linear, left bottom, right top,from(rgba(0,0,0,0)), to(rgba(0,0,0,1.0)));
background-repeat: no-repeat;
background-color: rgba( 0, 0, 0, 0.4); /* 0.6 */
-webkit-box-sizing: border-box;
-webkit-transition: -webkit-transform 2s, opacity 2s; -webkit-backface-visibility: hidden; /* hidden */
}
.subplane {position: absolute; width:204px;top:-335px; border: 0px; padding:0px; opacity:0.5;
-webkit-transition: -webkit-transform 2s,opacity 2s;-webkit-backface-visibility:visible;}
#shape.backfaces .plane { -webkit-backface-visibility: visible; }
@-webkit-keyframes spin { from { -webkit-transform: rotateY(0); } to { -webkit-transform: rotateY(-360deg); } }
@-webkit-keyframes spinR{ from { -webkit-transform: rotateY(0); } to { -webkit-transform: rotateY( 360deg); } }
@-webkit-keyframes spin0{ }
/* 上部の説明文の書式設定 背景は灰色で角を丸める .controls {width: 70%; height:10%; margin: 0 auto; padding: 5px 20px; */
.controls { opacity:0.6; /* width: 80%; height:40%; */
position:absolute;top:80%; left:34%; height:36px; /* bottom:1% */
margin: 0 auto; padding: 5px 10px; background-color: rgba(255, 255, 255, 0.15);
-webkit-border-radius: 48px; }
.ctlBtn { font-size:10pt; opacity:0.8; margin-bottom:7px;}
.controls > div { margin: 10px; }
/* ---------- ring2 styles ------------- */
.ring2 > .s1 { -webkit-transform: rotateY( 0deg) translateY( 0px) translateZ(-380px); }
.ring2 > .s2 { -webkit-transform: rotateY( -30deg) translateY( 0px) translateZ(-380px); }
.ring2 > .s3 { -webkit-transform: rotateY( -60deg) translateY( 0px) translateZ(-380px); }
.ring2 > .s4 { -webkit-transform: rotateY( -90deg) translateZ(-380px); }
.ring2 > .s5 { -webkit-transform: rotateY( -120deg) translateZ(-380px); }
.ring2 > .s6 { -webkit-transform: rotateY( -150deg) translateZ(-380px); }
.ring2 > .s7 { -webkit-transform: rotateY( -180deg) translateZ(-380px); }
.ring2 > .s8 { -webkit-transform: rotateY( -210deg) translateZ(-380px); }
.ring2 > .s9 { -webkit-transform: rotateY( 120deg) translateZ(-380px); }
.ring2 > .s10 { -webkit-transform: rotateY( 90deg) translateZ(-380px); }
.ring2 > .s11 { -webkit-transform: rotateY( -300deg) translateZ(-380px); }
.ring2 > .s12 { -webkit-transform: rotateY( -330deg) translateZ(-380px); }
.ring2 > .s13 { -webkit-transform: translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s14 { -webkit-transform: rotateY( -20deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s15 { -webkit-transform: rotateY( -40deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s16 { -webkit-transform: rotateY( -60deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s17 { -webkit-transform: rotateY( -80deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s18 { -webkit-transform: rotateY( -100deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s19 { -webkit-transform: rotateY( -120deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s20 { -webkit-transform: rotateY( -140deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s21 { -webkit-transform: rotateY( -160deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s22 { -webkit-transform: rotateY( -180deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s23 { -webkit-transform: rotateY( -200deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s24 { -webkit-transform: rotateY( -220deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s25 { -webkit-transform: rotateY( -240deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s26 { -webkit-transform: rotateY( -260deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s27 { -webkit-transform: rotateY( -280deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s28 { -webkit-transform: rotateY( -300deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s29 { -webkit-transform: rotateY( -320deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s30 { -webkit-transform: rotateY( -340deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
/* .slideIn {-webkit-animation-timing-function: ease ;-webkit-animation-duration: 1500ms;-webkit-animation-name: slidein; margin-left:0px;} */
.slideIn {-webkit-animation-timing-function: ease ;-webkit-animation-duration: 1500ms;-webkit-animation-name: slidein; margin-right:0px;}
/* @-webkit-keyframes _slidein {from {margin-left:-320px; }to { margin-left:0;}} */
@-webkit-keyframes slidein {from { margin-top: 120px; opacity:0; } to { margin-top: 0px; opacity:1; } }
/* -webkit-transform:rotateX(30deg); */
.slideFloor {-webkit-animation-timing-function: ease;-webkit-animation-duration: 1000ms;-webkit-animation-name: slidein; margin-left:0px;}
@-webkit-keyframes slideFloor {from { margin-top: 120px; opacity:0; } to { margin-top: 0px; opacity:1;} }
/* #slideMenu.slideOut {-webkit-animation-timing-function: ease;-webkit-animation-duration: 350ms;-webkit-animation-name: slideout;}
@-webkit-keyframes slideout {from {margin-left:0; }to { margin-left:-320px;}} */
</style>
<script type="text/javascript" src="file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.1/Applications/6B3E54D6-18F5-404B-A952-B255695821FE/KwinTabBar2.app/alexframework/src/javascript/gear5.js"></script>
<script type="text/javascript" src="file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.1/Applications/6B3E54D6-18F5-404B-A952-B255695821FE/KwinTabBar2.app/alexframework/src/javascript/jquery.min.js"></script>
<script type="text/javascript" src="file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.1/Applications/6B3E54D6-18F5-404B-A952-B255695821FE/KwinTabBar2.app/alexframework/src/javascript/alex.core.js"></script>
<script type="text/javascript" src="file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.1/Applications/6B3E54D6-18F5-404B-A952-B255695821FE/KwinTabBar2.app/alexframework/src/javascript/alex.record.js"></script>
<script type="text/javascript" src="file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.1/Applications/6B3E54D6-18F5-404B-A952-B255695821FE/KwinTabBar2.app/alexframework/src/javascript/albums.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript" ></script>
<!--<script type="text/javascript" src="file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.1/Applications/6B3E54D6-18F5-404B-A952-B255695821FE/KwinTabBar2.app/alexframework/src/javascript/facebook.js"></script>-->
<script type="text/javascript">
function setCss(currentWidth){
if ( navigator.userAgent.match( /iPhone/i ) || navigator.userAgent.match( /iPod/i ) ) {
var el = document.getElementById("ctrl1");
el.style.position = 'absolute';
el.style.left = '0px';
if(window.navigator.standalone){ el.style.top = '10px'; }
}
shape.style.top='25%';
floor.style.top='30%';
floor.style.left='-50%';
var tY = -1*(720-586)/2;
var tY = 0;
if (floorImg.naturalWidth > floorImg.naturalHeight ){
var tZ = 80 - (floorImg.naturalWidth - floorImg.naturalHeight );
}else{ var tZ = 80; }
// alert("setCss");
// floor.style.webkitTransform='rotateX(90deg) rotateY(0deg) rotateZ(0deg) translateZ('+tZ+'px) translateY(10px)';
// var _rotateY = 90; shape.style.webkitTransform = 'rotateY('+_rotateY+'deg)';
//alert(window.orientation+","+currentWidth);
if (window.orientation == 90 || window.orientation == -90||currentWidth > 800){
ctrl2.style.top='60%';ctrl1.style.left='42%';
}
}
</script>
<!-- <script type="text/javascript">
google.maps.event.addDomListener(window, 'load', function() {
var latlng = new google.maps.LatLng(29.988611, 52.871944); // -34.397, 150.644); 29.988611, 52.871944 37.409722, 34.1725
var myOptions = {zoom: 4,center: latlng,mapTypeId: google.maps.MapTypeId.HYBRID, // ROADMAP SATELLITE HYBRID TERRAIN
zoomControl: true,}; // scaleControl: true,
var map = new google.maps.Map(document.getElementById("map"), myOptions);
var marker = new google.maps.Marker({ position: latlng, map: map, title:"Hello World!"});
var infowindow = new google.maps.InfoWindow({content: 'test',size: new google.maps.Size(200, 100)});
google.maps.event.addListener(marker, 'click', function() {infowindow.open(map,marker); });
});
</script>-->
</head>
<body onload="addAnimationHandlers('/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.1/Applications/6B3E54D6-18F5-404B-A952-B255695821FE/KwinTabBar2.app',90,'stop','0','800')">
<br/ >
<br />
<div id="getComment"></div>
<div id="container">
<div id="stage">
<div id="shape" class="ring2 ">
<div id="shapeX" class="ring2 ">
<img class="subplane s1 slideIn" id="sub1" style="padding:0px;"/><img class="subplane s2 slideIn" id="sub2" style="padding:0px;"/>
<img class="subplane s3 slideIn" id="sub3" style="padding:0px;"/><img class="subplane s4 slideIn" id="sub4" style="padding:0px;"/>
<img class="subplane s5 slideIn" id="sub5" style="padding:0px;"/><img class="subplane s6 slideIn" id="sub6" style="padding:0px;"/>
<img class="subplane s7 slideIn" id="sub7" style="padding:0px;"/><img class="subplane s8 slideIn" id="sub8" style="padding:0px;"/>
<img class="subplane s9 slideIn" id="sub9" style="padding:0px;"/><img class="subplane s10 slideIn" id="sub10" style="padding:0px;"/>
<img class="subplane s11 slideIn" id="sub11" style="padding:0px;"/><img class="subplane s12 slideIn" id="sub12" style="padding:0px;"/>
<div class="plane s1 slideIn" id="s1" >
<a href='#' onclick="pop('1','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/s720x720/540573_364116136967291_170251749687065_956914_401851872_n.jpg','_caption_','170251749687065_81592','https://www.facebook.com/photo.php?fbid=364116136967291&set=a.364115243634047.81592.170251749687065&type=1','a_ios','160','51','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/s720x720/540573_364116136967291_170251749687065_956914_401851872_n.jpg','0','0')">
<img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/s720x720/540573_364116136967291_170251749687065_956914_401851872_n.jpg" width="160" style="margin-left:0px; margin-top:70px; padding:0px;" id="i1"></a></div>
<div class="plane s2 slideIn" id="s2" >
<a href='#' onclick="pop('2','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/s720x720/534770_367335489978689_170251749687065_963637_1100463937_n.jpg','_caption_','170251749687065_81999','https://www.facebook.com/photo.php?fbid=367335489978689&set=a.367335209978717.81999.170251749687065&type=1','a_ios','160','58','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/s720x720/534770_367335489978689_170251749687065_963637_1100463937_n.jpg','0','0')">
<img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/s720x720/534770_367335489978689_170251749687065_963637_1100463937_n.jpg" width="160" style="margin-left:0px; margin-top:70px; padding:0px;" id="i2"></a></div>
<div class="plane s3 slideIn" id="s3" >
<a href='#' onclick="pop('3','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-snc6/247035_192147500830823_170251749687065_451666_4293116_n.jpg','_caption_','170251749687065_45304','https://www.facebook.com/photo.php?fbid=192147500830823&set=a.192147124164194.45304.170251749687065&type=1','a_ios','160','55','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-snc6/247035_192147500830823_170251749687065_451666_4293116_n.jpg','0','0')">
<img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-snc6/247035_192147500830823_170251749687065_451666_4293116_n.jpg" width="160" style="margin-left:0px; margin-top:94px; padding:0px;" id="i3"></a></div>
<div class="plane s4 slideIn" id="s4" >
<a href='#' onclick="pop('4','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-snc6/247157_192145187497721_170251749687065_451578_2303316_n.jpg','_caption_','170251749687065_45303','https://www.facebook.com/photo.php?fbid=192145187497721&set=a.192144577497782.45303.170251749687065&type=1','a_ios','160','60','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-snc6/247157_192145187497721_170251749687065_451578_2303316_n.jpg','0','0')">
<img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-snc6/247157_192145187497721_170251749687065_451578_2303316_n.jpg" width="160" style="margin-left:0px; margin-top:94px; padding:0px;" id="i4"></a></div>
<div class="plane s5 slideIn" id="s5" >
<a href='#' onclick="pop('5','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash4/s720x720/313453_227147683997471_170251749687065_588106_5132583_n.jpg','_caption_','170251749687065_54182','https://www.facebook.com/photo.php?fbid=227147683997471&set=a.227147650664141.54182.170251749687065&type=1','a_ios','160','54','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash4/s720x720/313453_227147683997471_170251749687065_588106_5132583_n.jpg','0','0')">
<img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash4/s720x720/313453_227147683997471_170251749687065_588106_5132583_n.jpg" width="160" style="margin-left:0px; margin-top:96px; padding:0px;" id="i5"></a></div>
<div class="plane s6 slideIn" id="s6" >
<a href='#' onclick="pop('6','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/578678_367337533311818_170251749687065_963674_1549291493_n.jpg','_caption_','170251749687065_82000','https://www.facebook.com/photo.php?fbid=367337533311818&set=a.367337479978490.82000.170251749687065&type=1','a_ios','160','59','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/578678_367337533311818_170251749687065_963674_1549291493_n.jpg','0','0')">
<img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/578678_367337533311818_170251749687065_963674_1549291493_n.jpg" width="160" style="margin-left:0px; margin-top:115px; padding:0px;" id="i6"></a></div>
<div class="plane s7 slideIn" id="s7" >
<a href='#' onclick="pop('7','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/s720x720/540169_365109120201326_170251749687065_959261_1692796122_n.jpg','_caption_','170251749687065_81723','https://www.facebook.com/photo.php?fbid=365109120201326&set=a.365100403535531.81723.170251749687065&type=1','a_ios','160','52','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/s720x720/540169_365109120201326_170251749687065_959261_1692796122_n.jpg','0','0')">
<img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/s720x720/540169_365109120201326_170251749687065_959261_1692796122_n.jpg" width="160" style="margin-left:0px; margin-top:70px; padding:0px;" id="i7"></a></div>
<div class="plane s8 slideIn" id="s8" >
<a href='#' onclick="pop('8','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash4/247945_192150064163900_170251749687065_451769_7103373_n.jpg','_caption_','170251749687065_45305','https://www.facebook.com/photo.php?fbid=192150064163900&set=a.192149594163947.45305.170251749687065&type=1','a_ios','160','56','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash4/247945_192150064163900_170251749687065_451769_7103373_n.jpg','0','0')">
<img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash4/247945_192150064163900_170251749687065_451769_7103373_n.jpg" width="160" style="margin-left:0px; margin-top:70px; padding:0px;" id="i8"></a></div>
<div class="plane s9 slideIn" id="s9" >
<a href='#' onclick="pop('9','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-snc6/249909_192140004164906_170251749687065_451382_7191975_n.jpg','_caption_','170251749687065_45300','https://www.facebook.com/photo.php?fbid=192140004164906&set=a.192139274164979.45300.170251749687065&type=1','a_ios','160','61','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-snc6/249909_192140004164906_170251749687065_451382_7191975_n.jpg','0','0')">
<img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-snc6/249909_192140004164906_170251749687065_451382_7191975_n.jpg" width="160" style="margin-left:0px; margin-top:70px; padding:0px;" id="i9"></a></div>
<div class="plane s10 slideIn" id="s10" >
<a href='#' onclick="pop('10','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-prn1/s720x720/524154_367330693312502_170251749687065_963614_629612418_n.jpg','_caption_','170251749687065_81595','https://www.facebook.com/photo.php?fbid=367330693312502&set=a.364122320300006.81595.170251749687065&type=1','a_ios','160','50','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-prn1/s720x720/524154_367330693312502_170251749687065_963614_629612418_n.jpg','0','0')">
<img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-prn1/s720x720/524154_367330693312502_170251749687065_963614_629612418_n.jpg" width="160" style="margin-left:0px; margin-top:90px; padding:0px;" id="i10"></a></div>
<div class="plane s11 slideIn" id="s11" >
<a href='#' onclick="pop('11','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-prn1/s720x720/538507_365128310199407_170251749687065_959386_1481220093_n.jpg','_caption_','170251749687065_81727','https://www.facebook.com/photo.php?fbid=365128310199407&set=a.365126280199610.81727.170251749687065&type=1','a_ios','160','57','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-prn1/s720x720/538507_365128310199407_170251749687065_959386_1481220093_n.jpg','0','0')">
<img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-prn1/s720x720/538507_365128310199407_170251749687065_959386_1481220093_n.jpg" width="160" style="margin-left:0px; margin-top:70px; padding:0px;" id="i11"></a></div>
<div class="plane s12 slideIn" id="s12" >
<a href='#' onclick="pop('12','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-snc6/168355_170252239687016_170251749687065_328030_1708631_n.jpg','_caption_','170251749687065_33930','https://www.facebook.com/photo.php?fbid=170252239687016&set=a.170252233020350.33930.170251749687065&type=1','a_ios','160','64','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-snc6/168355_170252239687016_170251749687065_328030_1708631_n.jpg','0','0')">
<img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-snc6/168355_170252239687016_170251749687065_328030_1708631_n.jpg" width="160" style="margin-left:0px; margin-top:109px; padding:0px;" id="i12"></a></div>
<div class="plane s13 slideIn" id="s13" style="height:204px; width:133px;">
<a href='#' onclick="pop('13','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/180297_170699769642263_170251749687065_330236_610381_n.jpg','Caption','170251749687065_33929','https://www.facebook.com/photo.php?fbid=170699769642263&set=a.170251943020379.33929.170251749687065&type=1','a_ios','103','62','https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/180297_170699769642263_170251749687065_330236_610381_n.jpg','0', '0')">
<img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/180297_170699769642263_170251749687065_330236_610381_n.jpg" width="103" id="i13"></a></div>
<div id="floor" class="slideFloor" align="center">
<img src='http://blog-reader.appspot.com/imgurl?rsssheetkey=site:Johannes_Vermeer,startRSS,limitRSS,1' id="floorImg" width="500" height="500">
</div>
<span id="floor_text"></span>
</div>
</div>
<!-- <span id="floor_text"></span>-->
</div>
</div>
<div class="controls" id="ctrl1" style="position:absolute;top:2%; left:38%;width:180px; height:32px; ">
<button onmouseover="toggleShape1(100)" onclick="toggleShape1(200)" class="ctlBtn">-Zoom</button>
<button onmouseover="toggleShape1(-100)" onclick="toggleShape1(-200)" class="ctlBtn">Zoom+</button>
</div>
<div class="controls" id="ctrl2" style="position:absolute;width:262px"><!-- style="position:absolute; top:30px;"-->
<table><tr><td style="height:32px">
<a href="#" onclick="runAction('fbAlbum','170251749687065_81999,http://blog-reader.appspot.com/imgurl?rsssheetkey=site:Johannes_Vermeer,startRSS,limitRSS,1,prev,0');">
<img src='file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.1/Applications/6B3E54D6-18F5-404B-A952-B255695821FE/KwinTabBar2.app/gray_ball.png'
style="-webkit-transform:rotateX(10deg) rotateY(45deg);height:40px; width:48px;opacity:0.5;margin-left:-15px;margin-bottom:3px"/></a>
</td><td>
<button onclick="autoRotate('left')" class="ctlBtn">
< </button> <button onclick="autoRotate('stop');" class="ctlBtn">■</button>
<button onclick="autoRotate('right')" class="ctlBtn"> > </button>
</td><td>
<a href="#" onclick="runAction('fbAlbum','170251749687065_81999,http://blog-reader.appspot.com/imgurl?rsssheetkey=site:Johannes_Vermeer,startRSS,limitRSS,1,next,0');">
<img src='file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.1/Applications/6B3E54D6-18F5-404B-A952-B255695821FE/KwinTabBar2.app/gray_ball.png'
style="-webkit-transform:rotateX(10deg) rotateY(-45deg);height:40px; width:48px;opacity:0.5;margin-right:-20px;margin-bottom:3px"/></a>
<!--<button onclick="toggleShape1(400)">-Zoom</button> <button onclick="toggleShape1(-400)">Zoom+</button>-->
</td></tr>
</table>
</div>
<div style="position:absolute; bottom:10px;">
<a href="#" onclick='runAction("fbtest","")'>fbtest</a><br />
<a href="#" onclick='runAction("changeCurrentTitle","0")'>Home</a><br />
<a href="#" onclick='runAction("changeCurrentTitle","0")'>parentTitle</a><br />
</div>
<input id="_type" type="hidden" value="000" />
<div id="map" style="position:absolute;left:15%; width:600px; height:600px;"></div>
<script type="text/javascript" src="file:/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/5.1/Applications/6B3E54D6-18F5-404B-A952-B255695821FE/KwinTabBar2.app/alexframework/src/javascript/googleMap.js"></script>
<!--<div id="fb-root"></div>-->
<!--<script>
window.fbAsyncInit = function() {
FB.init({
appId : '142574589139226', // App ID
channelUrl : '//snsimglink.appspot.com/channel.html', // Channel File
status : false, // check login status true
cookie : false, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>-->
</body>
</html>kwin786http://www.blogger.com/profile/11636870499038520354noreply@blogger.com0tag:blogger.com,1999:blog-4631337081774196669.post-90192638621148835602012-04-10T21:20:00.001+09:002013-01-07T14:31:13.196+09:00交しょう<!--<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">-->
<html lang="en">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0, user-scalable=YES" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<style type="text/css" media="screen">
body { background-color: black; color: white; font-family: 'Lucida Grande', Verdana, Arial; font-size: 12px;
background-image: -webkit-gradient(radial,50% 500,1,50% 500,400, from(rgba(255, 255, 255, 0.3)),to(rgba(255, 255, 255, 0)));
background-repeat: no-repeat;
}
#container { width: 100%; height: 850px;
-webkit-perspective: 800; /* For compatibility with iPhone 3.0, we leave off the units here */
-webkit-perspective-origin: 50% 225px;
}
/* 0 -> -120 -100 -> -50 2012/02/07 */
#floor { position:absolute;top:-10%; left:-50% ; margin-top:-120px; margin-left:-50px;
-webkit-mask-image:-webkit-gradient(radial, center center, 0, center center, 350,from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
-webkit-transform: rotateX(90deg) rotateY(0deg) rotateZ(90deg) translateZ(-210px) translateY(10px);
}
.mapCss { position:absolute;top:0%; left:0% ; margin-top:0px; margin-left:-0px; width:500px; height:500px;/* 2012/11/27 */
-webkit-mask-image:-webkit-gradient(radial, center center, 0, center center, 350,from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
-webkit-transform: rotateX(90deg) rotateY(0deg) rotateZ(90deg) translateZ(-210px) translateY(10px);
opacity:0.8; /* translateY などはきいていないが webkit-transform はきいている これをなくすと opacity の値を小さくする必要がある */
}
#floorBallLeft { position:absolute;top:-10%; left:10% ; margin-top:0px; margin-left:-90px; height:50px; opacity:0.5;
-webkit-transform: rotateX(15deg) rotateY(45deg) rotateZ(0deg) translateZ(0px) translateY(0px); }
#floorBallRight { position:absolute;top:-10%; right:15% ; margin-top:0px; margin-right:-90px; height:50px; width:45px;opacity:0.5;
-webkit-transform: rotateX(10deg) rotateY(-45deg) rotateZ(0deg) translateZ(0px) translateY(0px); }
#floorBallHome { position:absolute;top:20%; left:35% ; margin-top:60px; margin-left:0px; height:35px; width:75px; opacity:0.3;
-webkit-transform: rotateX(15deg) rotateY(0deg) rotateZ(0deg) translateZ(0px) translateY(0px); }
/* #floorC { position:absolute;top:95%; left:50% ;-webkit-transform:scale(3);}
#floorR { position:absolute;top:90%; right:15% ; margin-top:0px; margin-right:0px; -webkit-transform:scale(3);}
#floorL { position:absolute;top:90%; left: 15% ; margin-top:0px; margin-left:0px ; -webkit-transform:scale(3);}*/
a:link { text-decoration: none; color:#DF1FBB; }
a:active { text-decoration: none; color:#DF1FBB; }
a:visited { text-decoration: none; color:#DF1FBB; } /* #555555 */
a:hover { text-decoration: none; color:#DF1FBB; }
li { display:inline-block; }
#floor_text{ position: absolute;
top:80%; left:-80%; height: 800px; width: 420px;
border: 0px solid white;
-webkit-box-sizing: border-box; text-align: left; font-family: Times, serif;
font-size: 20pt; font-color: white; /*font-size: 24pt; color: white; */
}
#stage { width: 100%; height: 100%; -webkit-transition: -webkit-transform 2s; -webkit-transform-style: preserve-3d; }
#shape { position: relative; top: 50px; margin: 0 auto; height: 400px; width: 204px; -webkit-transform-style: preserve-3d; }
#shapeX { margin: 0 auto; height: 200px; width: 200px; -webkit-transform-style: preserve-3d; }
.plane { position: absolute; top:0%; /*top:-150%; */
height: 400px; width: 204px; border: 0px solid white;
text-align: center; font-family: Times, serif; font-size: 124pt; color: black;
background-image: -webkit-gradient(linear, left bottom, right top,from(rgba(0,0,0,0)), to(rgba(0,0,0,1.0)));
background-repeat: no-repeat;
background-color: rgba( 0, 0, 0, 0.4); /* 0.6 */
-webkit-box-sizing: border-box;
-webkit-transition: -webkit-transform 2s, opacity 2s; -webkit-backface-visibility: hidden; /* hidden */
}
.subplane {position: absolute; width:204px;top:-335px; border: 0px; padding:0px; opacity:0.5;
-webkit-transition: -webkit-transform 2s,opacity 2s;-webkit-backface-visibility:visible;}
#shape.backfaces .plane { -webkit-backface-visibility: visible; }
@-webkit-keyframes spin { from { -webkit-transform: rotateY(0); } to { -webkit-transform: rotateY(-360deg); } }
@-webkit-keyframes spinR{ from { -webkit-transform: rotateY(0); } to { -webkit-transform: rotateY( 360deg); } }
@-webkit-keyframes spin0{ }
/* 上部の説明文の書式設定 背景は灰色で角を丸める .controls {width: 70%; height:10%; margin: 0 auto; padding: 5px 20px; */
.controls { opacity:0.6; /* width: 80%; height:40%; */
position:absolute;top:80%; left:34%; height:36px; /* bottom:1% */
margin: 0 auto; padding: 5px 10px; background-color: rgba(255, 255, 255, 0.15);
-webkit-border-radius: 48px;
/* -webkit-touch-callout: none;きかない */
}
.ctlBtn { font-size:10pt; opacity:0.8; margin-bottom:7px;}
.ctlBtn2 { font-size:10pt; opacity:0.8; margin-bottom:15px; font-family:Curier;}
.controls > div { margin: 10px; }
/* ---------- ring2 styles ------------- */
.ring2 > .s1 { -webkit-transform: rotateY( 0deg) translateY( 0px) translateZ(-380px); }
.ring2 > .s2 { -webkit-transform: rotateY( -30deg) translateY( 0px) translateZ(-380px); }
.ring2 > .s3 { -webkit-transform: rotateY( -60deg) translateY( 0px) translateZ(-380px); }
.ring2 > .s4 { -webkit-transform: rotateY( -90deg) translateZ(-380px); }
.ring2 > .s5 { -webkit-transform: rotateY( -120deg) translateZ(-380px); }
.ring2 > .s6 { -webkit-transform: rotateY( -150deg) translateZ(-380px); }
.ring2 > .s7 { -webkit-transform: rotateY( -180deg) translateZ(-380px); }
.ring2 > .s8 { -webkit-transform: rotateY( -210deg) translateZ(-380px); }
.ring2 > .s9 { -webkit-transform: rotateY( 120deg) translateZ(-380px); }
.ring2 > .s10 { -webkit-transform: rotateY( 90deg) translateZ(-380px); }
.ring2 > .s11 { -webkit-transform: rotateY( -300deg) translateZ(-380px); }
.ring2 > .s12 { -webkit-transform: rotateY( -330deg) translateZ(-380px); }
.ring2 > .s13 { -webkit-transform: translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s14 { -webkit-transform: rotateY( -20deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s15 { -webkit-transform: rotateY( -40deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s16 { -webkit-transform: rotateY( -60deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s17 { -webkit-transform: rotateY( -80deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s18 { -webkit-transform: rotateY( -100deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s19 { -webkit-transform: rotateY( -120deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s20 { -webkit-transform: rotateY( -140deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s21 { -webkit-transform: rotateY( -160deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s22 { -webkit-transform: rotateY( -180deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s23 { -webkit-transform: rotateY( -200deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s24 { -webkit-transform: rotateY( -220deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s25 { -webkit-transform: rotateY( -240deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s26 { -webkit-transform: rotateY( -260deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s27 { -webkit-transform: rotateY( -280deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s28 { -webkit-transform: rotateY( -300deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s29 { -webkit-transform: rotateY( -320deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.ring2 > .s30 { -webkit-transform: rotateY( -340deg) translateZ(-380px) translateY(-210px) rotateX(-5deg); }
.slideIn {-webkit-animation-timing-function: ease ;-webkit-animation-duration: 1500ms;-webkit-animation-name: slidein; margin-right:0px;}
@-webkit-keyframes slidein {from { margin-top: 120px; opacity:0; } to { margin-top: 0px; opacity:1; } }
.slideFloor {-webkit-animation-timing-function: ease;-webkit-animation-duration: 1000ms;-webkit-animation-name: slidein; margin-left:0px;}
@-webkit-keyframes slideFloor {from { margin-top: 120px; opacity:0; } to { margin-top: 0px; opacity:1;} }
.blur, .blur > img {margin: 0; padding: 0; border: 0; }
.blur { position: relative;display: inline-block;font-size: 0; line-height: 0; }
.blur:after { position: absolute;left: 0; top: 0; right: 0; bottom: 0;
-webkit-box-shadow: inset 0px 0px 15px 15px #fff;
box-shadow: inset 0px 0px 15px 15px #fff;
content: " ";
}
<!--
#jquery-ui-slider-wrap {padding:0px;text-align: center; width: 38px;border: 0px;border-radius:20px; background-color: rgba(255, 255, 255, 0.15);opacity:0.4; }
#jquery-ui-slider-value {border:0; color: red !important; font-weight: bold; background-color: transparent;margin: 5px; width: 40px; text-align: center; }
#jquery-ui-slider {height: 150px; width:25px;background-color:rgba(255, 255, 255, 0.15); opacity:0.2;opacity:0.2;}
#jquery-ui-slider-wrap2 {padding:0px;text-align: center;width: 38px; border: 0px;border-radius:10px; background-color: rgba(255, 255, 255, 0.15); opacity:0.4; }
#jquery-ui-slider-value2{ border: 0; color: red !important; font-weight: bold; background-color: transparent;margin: 5px;width: 40px; text-align: center; }
#jquery-ui-slider2 { height: 150px; width:25px; background-color:rgba(255, 255, 255, 0.15); opacity:0.2;}
-->
</style>
<link rel="stylesheet" href="alexframework/src/javascript/jquery-ui-1.7.1.custom.css" type="text/css">
<script type="text/javascript" src="alexframework/src/javascript/gear5.js"></script>
<script type="text/javascript" src="alexframework/src/javascript/jquery.min.js"></script>
<script type="text/javascript" src="alexframework/src/javascript/alex.core.js"></script>
<script type="text/javascript" src="alexframework/src/javascript/alex.record.js"></script>
<script type="text/javascript" src="alexframework/src/javascript/albums.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript" ></script>
<script type="text/javascript" src="alexframework/src/javascript/googleMap.js"></script>
<!--<script src="http://code.jquery.com/jquery.min.js"></script>-->
<!--<script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script>-->
<script type="text/javascript" src="alexframework/src/javascript/facebook.js"></script>
<script type="text/javascript" src="alexframework/src/javascript/jquery.ui.min.js"></script>
<script type="text/javascript" src="alexframework/src/javascript/jquery.ui.touch-punch.min.js"></script>
<script type="text/javascript">
function setCss(currentWidth,startDeg, panoramaMode){ // 2012/11/26 add startDeg, panoramaMode
if ( navigator.userAgent.match( /iPhone/i ) || navigator.userAgent.match( /iPod/i ) ) {
alert(navigator.userAgent)
var el = document.getElementById("ctrl1");
el.style.position = 'absolute';
el.style.left = '60px';
el.style.width = '180px';
if(window.navigator.standalone){ el.style.top = '10px'; }
}
shape.style.top='25%';
floor.style.top='30%';
floor.style.left='-50%';
var tY = -1*(720-586)/2;
var tY = 0;
if (window.orientation == 90 || window.orientation == -90||currentWidth > 800){
ctrl2.style.top='60%';ctrl1.style.left='42%';
}
if ( panoramaMode === "3DWall"){ // 2012/11/26
showWall(-1200,startDeg -120); // 20 -> -110
}
$("#getComment").hide();
}
function showWall(x0,rY){ // 2012/11/26
for (var s = 1; s < 13 ; s++){
$("div#s"+ s ).css("top","20%");
tX = x0 + s*204;
$("div#s"+ s ).css("-webkit-transform","rotateY("+rY+"deg)"
+ "translateX("+tX+"px) "
);
}
//$("div#shape").css("-webkit-transform","translateX(500px)");
}
// $.browser.mobileSafari = /webkit.*mobile/i.test(navigator.userAgent)
// if ($.browser.mobileSafari) {
// $.getScript('/public/javascripts/jquery.ui.touch-punch.min.js');
// }
function ctrlToggle(){
$('#jquery-ui-slider-wrap').toggle();
$('#jquery-ui-slider-wrap2').toggle();
$('#ctrl2').toggle();
$('#ctrl1').toggle();
}
<!--
jQuery( function() {
jQuery( '#jquery-ui-slider' ) . slider( {
orientation: 'vertical', animate: 'slow', range: 'min', value: 70, min: -100, max: 300,
slide: function( event, ui ) {
jQuery( '#jquery-ui-slider-value' ) . val( ui.value );
var top = ui.value -100;
shape.style.top= top+ '%';
}
} );
jQuery( '#jquery-ui-slider-value' ) . val( jQuery( '#jquery-ui-slider' ) . slider( 'value' ) );
} );
jQuery( function() {
jQuery( '#jquery-ui-slider2' ) . slider( {
orientation: 'vertical', animate: 'slow', range: 'min', value: 70, min: -200, max: 300,
slide: function( event, ui ) {
jQuery( '#jquery-ui-slider-value2' ) . val( ui.value );
var top = ui.value -100; floor.style.top= top+ '%';
}
} );
jQuery( '#jquery-ui-slider-value2' ) . val( jQuery( '#jquery-ui-slider2' ) . slider( 'value' ) );
} );
jQuery( function() {
jQuery( '#jquery-ui-slider3' ).slider( {
animate:'slow', range: 'min', value: staticRotationY, min: -180, max: 360,
slide: function( event, ui ) {
staticRotationY = ui.value*Math.PI/180;
shape.style.webkitTransform = 'rotateY('+staticRotationY+'rad)';
}
});
} );
-->
</script>
</head>
<body onload="addAnimationHandlers('/Users/kwin786/Library/Application%20Support/iPhone%20Simulator/6.0/Applications/265AB680-9D44-48B1-A4F3-D59E7649A88B/KwinTabBar2.app',90,'stop','0','768',15,'0')"><!-- 2012/11/26 add panorama 12/24 aZoom-->
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1&appId=231699360296504";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<br/ >
<br />
<div id="container">
<div id="stage">
<div id="shape" class="ring2 ">
<div id="shapeX" class="ring2 ">
<img class="subplane s1 slideIn" id="sub1" style="padding:0px;"/><img class="subplane s2 slideIn" id="sub2" style="padding:0px;"/>
<img class="subplane s3 slideIn" id="sub3" style="padding:0px;"/><img class="subplane s4 slideIn" id="sub4" style="padding:0px;"/>
<img class="subplane s5 slideIn" id="sub5" style="padding:0px;"/><img class="subplane s6 slideIn" id="sub6" style="padding:0px;"/>
<img class="subplane s7 slideIn" id="sub7" style="padding:0px;"/><img class="subplane s8 slideIn" id="sub8" style="padding:0px;"/>
<img class="subplane s9 slideIn" id="sub9" style="padding:0px;"/><img class="subplane s10 slideIn" id="sub10" style="padding:0px;"/>
<img class="subplane s11 slideIn" id="sub11" style="padding:0px;"/><img class="subplane s12 slideIn" id="sub12" style="padding:0px;"/>
<div class="plane s1 slideIn" id="s1" >
<a href='#' onclick="pop('1','https://lh5.googleusercontent.com/-gPFXToLHAFc/UOo9S6kXOfI/AAAAAAAAE5k/fyjmztj4jys/test%252520title.jpg','1/0','https://lh5.googleusercontent.com/-gPFXToLHAFc/UOo9S6kXOfI/AAAAAAAAE5k/fyjmztj4jys/test%252520title.jpg','https://picasaweb.google.com/102448397019191874652/NrceJK#5830540062753241586','p','160','187','https://lh5.googleusercontent.com/-gPFXToLHAFc/UOo9S6kXOfI/AAAAAAAAE5k/fyjmztj4jys/test%252520title.jpg','0','0','0')">
<img src="https://lh5.googleusercontent.com/-gPFXToLHAFc/UOo9S6kXOfI/AAAAAAAAE5k/fyjmztj4jys/test%252520title.jpg" width="160" style="margin-left:0px; margin-top:100px; padding:0px;" id="i1"></a></div>
<div class="plane s2 slideIn" id="s2" >
<a href='#' onclick="pop('2','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnEhKfEVD1TL1z2PJ9Jk1zT0sMzuvxvvXtSCpBU1dpbL9xpvYYGBN9BaZ-N2gqW0h-iMESK6XTU1qXDER9rXTz5oVyMdhLVd3zjkCvQdn7ywIQnP_deYnYUN0pHnHyf5irVVQamUKHABFn/','2/0','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnEhKfEVD1TL1z2PJ9Jk1zT0sMzuvxvvXtSCpBU1dpbL9xpvYYGBN9BaZ-N2gqW0h-iMESK6XTU1qXDER9rXTz5oVyMdhLVd3zjkCvQdn7ywIQnP_deYnYUN0pHnHyf5irVVQamUKHABFn/','https://picasaweb.google.com/102448397019191874652/NrceJK#5830542525723402658','p','160','188','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnEhKfEVD1TL1z2PJ9Jk1zT0sMzuvxvvXtSCpBU1dpbL9xpvYYGBN9BaZ-N2gqW0h-iMESK6XTU1qXDER9rXTz5oVyMdhLVd3zjkCvQdn7ywIQnP_deYnYUN0pHnHyf5irVVQamUKHABFn/','0','0','0')">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnEhKfEVD1TL1z2PJ9Jk1zT0sMzuvxvvXtSCpBU1dpbL9xpvYYGBN9BaZ-N2gqW0h-iMESK6XTU1qXDER9rXTz5oVyMdhLVd3zjkCvQdn7ywIQnP_deYnYUN0pHnHyf5irVVQamUKHABFn/" width="160" style="margin-left:0px; margin-top:100px; padding:0px;" id="i2"></a></div>
<div class="plane s3 slideIn" id="s3" >
<a href='#' onclick="pop('3','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiIf-ZQcGcw6uiSNLj-1BCNISpJR1SUyt2lDKi2rML4WFLw89LGUD2owoalW9vlYSO3_zcm_SWKkPgb39Aq7x0xJDhdtW5TXU61SM70t0sRPIGQNnvdIIaQEeUsBm2YZ1UxZKVwmu61fJ_/','3/0','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiIf-ZQcGcw6uiSNLj-1BCNISpJR1SUyt2lDKi2rML4WFLw89LGUD2owoalW9vlYSO3_zcm_SWKkPgb39Aq7x0xJDhdtW5TXU61SM70t0sRPIGQNnvdIIaQEeUsBm2YZ1UxZKVwmu61fJ_/','https://picasaweb.google.com/102448397019191874652/NrceJK#5830542562299401906','p','160','189','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiIf-ZQcGcw6uiSNLj-1BCNISpJR1SUyt2lDKi2rML4WFLw89LGUD2owoalW9vlYSO3_zcm_SWKkPgb39Aq7x0xJDhdtW5TXU61SM70t0sRPIGQNnvdIIaQEeUsBm2YZ1UxZKVwmu61fJ_/','0','0','0')">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiIf-ZQcGcw6uiSNLj-1BCNISpJR1SUyt2lDKi2rML4WFLw89LGUD2owoalW9vlYSO3_zcm_SWKkPgb39Aq7x0xJDhdtW5TXU61SM70t0sRPIGQNnvdIIaQEeUsBm2YZ1UxZKVwmu61fJ_/" width="160" style="margin-left:0px; margin-top:100px; padding:0px;" id="i3"></a></div>
<div class="plane s4 slideIn" id="s4" >
<a href='#' onclick="pop('4','https://lh4.googleusercontent.com/-wODc3Oqb_U0/UOo_gaQoVmI/AAAAAAAAE_Q/-1qbQh6HB3U/test%252520title.jpg','4/0','https://lh4.googleusercontent.com/-wODc3Oqb_U0/UOo_gaQoVmI/AAAAAAAAE_Q/-1qbQh6HB3U/test%252520title.jpg','https://picasaweb.google.com/102448397019191874652/NrceJK#5830542493621966434','p','160','190','https://lh4.googleusercontent.com/-wODc3Oqb_U0/UOo_gaQoVmI/AAAAAAAAE_Q/-1qbQh6HB3U/test%252520title.jpg','0','0','0')">
<img src="https://lh4.googleusercontent.com/-wODc3Oqb_U0/UOo_gaQoVmI/AAAAAAAAE_Q/-1qbQh6HB3U/test%252520title.jpg" width="160" style="margin-left:0px; margin-top:100px; padding:0px;" id="i4"></a></div>
<div class="plane s5 slideIn" id="s5" >
<a href='#' onclick="pop('5','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlCL4KX-MoFYuTYkn0zFUf_OQm08BHbPUjiOHhVRudegJy6b388clwi0yoGQfkVaxItaBq65GnrlPVZqRv-XN88Z13dvAqPRR1bxcDh3YA_6r0Qr_Me8JZKq4ns1MbxRk7p_fHAGjGPaCq/','5/0','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlCL4KX-MoFYuTYkn0zFUf_OQm08BHbPUjiOHhVRudegJy6b388clwi0yoGQfkVaxItaBq65GnrlPVZqRv-XN88Z13dvAqPRR1bxcDh3YA_6r0Qr_Me8JZKq4ns1MbxRk7p_fHAGjGPaCq/','https://picasaweb.google.com/102448397019191874652/NrceJK#5830540091454492290','p','160','191','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlCL4KX-MoFYuTYkn0zFUf_OQm08BHbPUjiOHhVRudegJy6b388clwi0yoGQfkVaxItaBq65GnrlPVZqRv-XN88Z13dvAqPRR1bxcDh3YA_6r0Qr_Me8JZKq4ns1MbxRk7p_fHAGjGPaCq/','0','0','0')">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlCL4KX-MoFYuTYkn0zFUf_OQm08BHbPUjiOHhVRudegJy6b388clwi0yoGQfkVaxItaBq65GnrlPVZqRv-XN88Z13dvAqPRR1bxcDh3YA_6r0Qr_Me8JZKq4ns1MbxRk7p_fHAGjGPaCq/" width="160" style="margin-left:0px; margin-top:100px; padding:0px;" id="i5"></a></div>
<div class="plane s6 slideIn" id="s6" >
<a href='#' onclick="pop('6','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIhvLIgphPSouRD-Q37RvWMdvgMH8LNF4x_bgxaQUYQhyphenhyphenEzDSCMgouJeW3qaSp0NKNVb6_5mmr3BL55inbP99bls8oRGlyvlaXuEBjp1tnYbWP0vCh3rgxAfDguA1mu951YLdlFkHYJLq_/','6/0','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIhvLIgphPSouRD-Q37RvWMdvgMH8LNF4x_bgxaQUYQhyphenhyphenEzDSCMgouJeW3qaSp0NKNVb6_5mmr3BL55inbP99bls8oRGlyvlaXuEBjp1tnYbWP0vCh3rgxAfDguA1mu951YLdlFkHYJLq_/','https://picasaweb.google.com/102448397019191874652/NrceJK#5830540128581678322','p','160','192','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIhvLIgphPSouRD-Q37RvWMdvgMH8LNF4x_bgxaQUYQhyphenhyphenEzDSCMgouJeW3qaSp0NKNVb6_5mmr3BL55inbP99bls8oRGlyvlaXuEBjp1tnYbWP0vCh3rgxAfDguA1mu951YLdlFkHYJLq_/','0','0','0')">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIhvLIgphPSouRD-Q37RvWMdvgMH8LNF4x_bgxaQUYQhyphenhyphenEzDSCMgouJeW3qaSp0NKNVb6_5mmr3BL55inbP99bls8oRGlyvlaXuEBjp1tnYbWP0vCh3rgxAfDguA1mu951YLdlFkHYJLq_/" width="160" style="margin-left:0px; margin-top:100px; padding:0px;" id="i6"></a></div>
<div class="plane s7 slideIn" id="s7" >
<a href='#' onclick="pop('7','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvPB8gpDmtCcfh3OpMTPO_ihwmL0luKktwwbu-5PpL7JmNkdqrTbBlvKyEVabYluCEIZeHnPDoJfb44zroB6kT8RQezNIN8PUYzKvinE5KmpsDk07kdWOOUza1lyyNLIOqLe9nPvi2Hgi3/','7/0','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvPB8gpDmtCcfh3OpMTPO_ihwmL0luKktwwbu-5PpL7JmNkdqrTbBlvKyEVabYluCEIZeHnPDoJfb44zroB6kT8RQezNIN8PUYzKvinE5KmpsDk07kdWOOUza1lyyNLIOqLe9nPvi2Hgi3/','https://picasaweb.google.com/102448397019191874652/NrceJK#5830540152391630450','p','160','193','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvPB8gpDmtCcfh3OpMTPO_ihwmL0luKktwwbu-5PpL7JmNkdqrTbBlvKyEVabYluCEIZeHnPDoJfb44zroB6kT8RQezNIN8PUYzKvinE5KmpsDk07kdWOOUza1lyyNLIOqLe9nPvi2Hgi3/','0','0','0')">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvPB8gpDmtCcfh3OpMTPO_ihwmL0luKktwwbu-5PpL7JmNkdqrTbBlvKyEVabYluCEIZeHnPDoJfb44zroB6kT8RQezNIN8PUYzKvinE5KmpsDk07kdWOOUza1lyyNLIOqLe9nPvi2Hgi3/" width="160" style="margin-left:0px; margin-top:100px; padding:0px;" id="i7"></a></div>
<div class="plane s8 slideIn" id="s8" >
<a href='#' onclick="pop('8','https://lh4.googleusercontent.com/-cqFIc1ldMYI/UOo9Zuu3u-I/AAAAAAAAE6E/ZPF44J5GNjA/test%252520title.jpg','8/0','https://lh4.googleusercontent.com/-cqFIc1ldMYI/UOo9Zuu3u-I/AAAAAAAAE6E/ZPF44J5GNjA/test%252520title.jpg','https://picasaweb.google.com/102448397019191874652/NrceJK#5830540179835173858','p','160','194','https://lh4.googleusercontent.com/-cqFIc1ldMYI/UOo9Zuu3u-I/AAAAAAAAE6E/ZPF44J5GNjA/test%252520title.jpg','0','0','0')">
<img src="https://lh4.googleusercontent.com/-cqFIc1ldMYI/UOo9Zuu3u-I/AAAAAAAAE6E/ZPF44J5GNjA/test%252520title.jpg" width="160" style="margin-left:0px; margin-top:100px; padding:0px;" id="i8"></a></div>
<div class="plane s9 slideIn" id="s9" >
<a href='#' onclick="pop('9','https://lh3.googleusercontent.com/-D4TvEqPXVMw/UOo9cCZwJdI/AAAAAAAAE6M/k4Vcwzm6kR0/test%252520title.jpg','9/0','https://lh3.googleusercontent.com/-D4TvEqPXVMw/UOo9cCZwJdI/AAAAAAAAE6M/k4Vcwzm6kR0/test%252520title.jpg','https://picasaweb.google.com/102448397019191874652/NrceJK#5830540219475043794','p','160','195','https://lh3.googleusercontent.com/-D4TvEqPXVMw/UOo9cCZwJdI/AAAAAAAAE6M/k4Vcwzm6kR0/test%252520title.jpg','0','0','0')">
<img src="https://lh3.googleusercontent.com/-D4TvEqPXVMw/UOo9cCZwJdI/AAAAAAAAE6M/k4Vcwzm6kR0/test%252520title.jpg" width="160" style="margin-left:0px; margin-top:100px; padding:0px;" id="i9"></a></div>
<div class="plane s10 slideIn" id="s10" >
<a href='#' onclick="pop('10','https://lh3.googleusercontent.com/-aspA8Kt6b5g/UOo9d9SBWmI/AAAAAAAAE6U/ycLyYk4tM8E/test%252520title.jpg','10/0','https://lh3.googleusercontent.com/-aspA8Kt6b5g/UOo9d9SBWmI/AAAAAAAAE6U/ycLyYk4tM8E/test%252520title.jpg','https://picasaweb.google.com/102448397019191874652/NrceJK#5830540252460178018','p','160','196','https://lh3.googleusercontent.com/-aspA8Kt6b5g/UOo9d9SBWmI/AAAAAAAAE6U/ycLyYk4tM8E/test%252520title.jpg','0','0','0')">
<img src="https://lh3.googleusercontent.com/-aspA8Kt6b5g/UOo9d9SBWmI/AAAAAAAAE6U/ycLyYk4tM8E/test%252520title.jpg" width="160" style="margin-left:0px; margin-top:100px; padding:0px;" id="i10"></a></div>
<div class="plane s11 slideIn" id="s11" >
<a href='#' onclick="pop('11','https://lh4.googleusercontent.com/-mq3tOdMII_8/UOo9gbcMfeI/AAAAAAAAE6c/d4Mpxzmvwqs/test%252520title.jpg','11/0','https://lh4.googleusercontent.com/-mq3tOdMII_8/UOo9gbcMfeI/AAAAAAAAE6c/d4Mpxzmvwqs/test%252520title.jpg','https://picasaweb.google.com/102448397019191874652/NrceJK#5830540294915653090','p','160','197','https://lh4.googleusercontent.com/-mq3tOdMII_8/UOo9gbcMfeI/AAAAAAAAE6c/d4Mpxzmvwqs/test%252520title.jpg','0','0','0')">
<img src="https://lh4.googleusercontent.com/-mq3tOdMII_8/UOo9gbcMfeI/AAAAAAAAE6c/d4Mpxzmvwqs/test%252520title.jpg" width="160" style="margin-left:0px; margin-top:100px; padding:0px;" id="i11"></a></div>
<div class="plane s12 slideIn" id="s12" >
<a href='#' onclick="pop('12','https://lh4.googleusercontent.com/-azbV63v4Cyk/UOo9irOzieI/AAAAAAAAE6k/ljJw_09OdDI/test%252520title.jpg','12/0','https://lh4.googleusercontent.com/-azbV63v4Cyk/UOo9irOzieI/AAAAAAAAE6k/ljJw_09OdDI/test%252520title.jpg','https://picasaweb.google.com/102448397019191874652/NrceJK#5830540333514197474','p','160','198','https://lh4.googleusercontent.com/-azbV63v4Cyk/UOo9irOzieI/AAAAAAAAE6k/ljJw_09OdDI/test%252520title.jpg','0','0','0')">
<img src="https://lh4.googleusercontent.com/-azbV63v4Cyk/UOo9irOzieI/AAAAAAAAE6k/ljJw_09OdDI/test%252520title.jpg" width="160" style="margin-left:0px; margin-top:100px; padding:0px;" id="i12"></a></div>
<div class="plane s13 slideIn" id="s13" style="height:204px; width:133px;">
<a href='#' onclick="pop('13','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLFmZN54MXhh7OyP5hRSqxusAypPWlhzEI91NppMO_LmGwjW3lindn4_Z_31g69JoIWqGslsLqgRQGjsd-I8HRXvnucWT9-LzTFDvqMTFRQShPIKNwA9CK5JLOL8CHPpE1_FSAjkZ_234a/','13/0','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLFmZN54MXhh7OyP5hRSqxusAypPWlhzEI91NppMO_LmGwjW3lindn4_Z_31g69JoIWqGslsLqgRQGjsd-I8HRXvnucWT9-LzTFDvqMTFRQShPIKNwA9CK5JLOL8CHPpE1_FSAjkZ_234a/','https://picasaweb.google.com/102448397019191874652/NrceJK#5830540372187968082','p','103','199','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLFmZN54MXhh7OyP5hRSqxusAypPWlhzEI91NppMO_LmGwjW3lindn4_Z_31g69JoIWqGslsLqgRQGjsd-I8HRXvnucWT9-LzTFDvqMTFRQShPIKNwA9CK5JLOL8CHPpE1_FSAjkZ_234a/','0', '0','0')">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLFmZN54MXhh7OyP5hRSqxusAypPWlhzEI91NppMO_LmGwjW3lindn4_Z_31g69JoIWqGslsLqgRQGjsd-I8HRXvnucWT9-LzTFDvqMTFRQShPIKNwA9CK5JLOL8CHPpE1_FSAjkZ_234a/" width="103" style="padding:0px;" id="i13"></a></div><div class="plane s14 slideIn" id="s14" style="height:204px; width:133px;">
<a href='#' onclick="pop('14','https://lh3.googleusercontent.com/-lENlVJGelQk/UOo9mvL6aRI/AAAAAAAAE60/RF1CFXutJX0/test%252520title.jpg','14/0','https://lh3.googleusercontent.com/-lENlVJGelQk/UOo9mvL6aRI/AAAAAAAAE60/RF1CFXutJX0/test%252520title.jpg','https://picasaweb.google.com/102448397019191874652/NrceJK#5830540403295283474','p','103','200','https://lh3.googleusercontent.com/-lENlVJGelQk/UOo9mvL6aRI/AAAAAAAAE60/RF1CFXutJX0/test%252520title.jpg','0', '0','0')">
<img src="https://lh3.googleusercontent.com/-lENlVJGelQk/UOo9mvL6aRI/AAAAAAAAE60/RF1CFXutJX0/test%252520title.jpg" width="103" style="padding:0px;" id="i14"></a></div><div class="plane s15 slideIn" id="s15" style="height:204px; width:133px;">
<a href='#' onclick="pop('15','https://lh6.googleusercontent.com/-Odgqjck98-4/UOo9oQr63pI/AAAAAAAAE68/_PFbfIlUoxE/test%252520title.jpg','15/0','https://lh6.googleusercontent.com/-Odgqjck98-4/UOo9oQr63pI/AAAAAAAAE68/_PFbfIlUoxE/test%252520title.jpg','https://picasaweb.google.com/102448397019191874652/NrceJK#5830540429467770514','p','103','201','https://lh6.googleusercontent.com/-Odgqjck98-4/UOo9oQr63pI/AAAAAAAAE68/_PFbfIlUoxE/test%252520title.jpg','0', '0','0')">
<img src="https://lh6.googleusercontent.com/-Odgqjck98-4/UOo9oQr63pI/AAAAAAAAE68/_PFbfIlUoxE/test%252520title.jpg" width="103" style="padding:0px;" id="i15"></a></div><div class="plane s16 slideIn" id="s16" style="height:204px; width:133px;">
<a href='#' onclick="pop('16','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg72NzBsdLkHOm6yMX9MqezCLUusLb9_XxapgK0nGHW36uXdrp6Qqy_oCuLkOXVZIG7o4ZlGvwdzn3k7dRJPFtDu82qyGTQPGXp82xHioCelYp_0ZWqtuEQK43_l9OJTQtFsgpVpYhAObnI/','16/0','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg72NzBsdLkHOm6yMX9MqezCLUusLb9_XxapgK0nGHW36uXdrp6Qqy_oCuLkOXVZIG7o4ZlGvwdzn3k7dRJPFtDu82qyGTQPGXp82xHioCelYp_0ZWqtuEQK43_l9OJTQtFsgpVpYhAObnI/','https://picasaweb.google.com/102448397019191874652/NrceJK#5830540463834190258','p','103','202','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg72NzBsdLkHOm6yMX9MqezCLUusLb9_XxapgK0nGHW36uXdrp6Qqy_oCuLkOXVZIG7o4ZlGvwdzn3k7dRJPFtDu82qyGTQPGXp82xHioCelYp_0ZWqtuEQK43_l9OJTQtFsgpVpYhAObnI/','0', '0','0')">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg72NzBsdLkHOm6yMX9MqezCLUusLb9_XxapgK0nGHW36uXdrp6Qqy_oCuLkOXVZIG7o4ZlGvwdzn3k7dRJPFtDu82qyGTQPGXp82xHioCelYp_0ZWqtuEQK43_l9OJTQtFsgpVpYhAObnI/" width="103" style="padding:0px;" id="i16"></a></div><div class="plane s17 slideIn" id="s17" style="height:204px; width:133px;">
<a href='#' onclick="pop('17','https://lh4.googleusercontent.com/-5hthxVwgMJ4/UOo9sYCcnAI/AAAAAAAAE7I/QdYQKTSv06E/test%252520title.jpg','17/0','https://lh4.googleusercontent.com/-5hthxVwgMJ4/UOo9sYCcnAI/AAAAAAAAE7I/QdYQKTSv06E/test%252520title.jpg','https://picasaweb.google.com/102448397019191874652/NrceJK#5830540500160781314','p','103','203','https://lh4.googleusercontent.com/-5hthxVwgMJ4/UOo9sYCcnAI/AAAAAAAAE7I/QdYQKTSv06E/test%252520title.jpg','0', '0','0')">
<img src="https://lh4.googleusercontent.com/-5hthxVwgMJ4/UOo9sYCcnAI/AAAAAAAAE7I/QdYQKTSv06E/test%252520title.jpg" width="103" style="padding:0px;" id="i17"></a></div><div class="plane s18 slideIn" id="s18" style="height:204px; width:133px;">
<a href='#' onclick="pop('18','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEzrrQfTsCHzagifT_PmyHN3n53Bq3uSfqtipBg7ICsYYYsFNRSWLvJCSW9vqNKJtSRcItSFnBQlfJT2OmDHzokFkywl1SuQyJGu4bFxzyeXQBUg9aAKycTc6Uxl2xzsivUzbAPQJMF1X8/','18/0','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEzrrQfTsCHzagifT_PmyHN3n53Bq3uSfqtipBg7ICsYYYsFNRSWLvJCSW9vqNKJtSRcItSFnBQlfJT2OmDHzokFkywl1SuQyJGu4bFxzyeXQBUg9aAKycTc6Uxl2xzsivUzbAPQJMF1X8/','https://picasaweb.google.com/102448397019191874652/NrceJK#5830540543793030498','p','103','204','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEzrrQfTsCHzagifT_PmyHN3n53Bq3uSfqtipBg7ICsYYYsFNRSWLvJCSW9vqNKJtSRcItSFnBQlfJT2OmDHzokFkywl1SuQyJGu4bFxzyeXQBUg9aAKycTc6Uxl2xzsivUzbAPQJMF1X8/','0', '0','0')">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEzrrQfTsCHzagifT_PmyHN3n53Bq3uSfqtipBg7ICsYYYsFNRSWLvJCSW9vqNKJtSRcItSFnBQlfJT2OmDHzokFkywl1SuQyJGu4bFxzyeXQBUg9aAKycTc6Uxl2xzsivUzbAPQJMF1X8/" width="103" style="padding:0px;" id="i18"></a></div><div class="plane s19 slideIn" id="s19" style="height:204px; width:133px;">
<a href='#' onclick="pop('19','https://lh5.googleusercontent.com/-DEDNZ_Qhf30/UOo9xGtieOI/AAAAAAAAE7c/yoZhc3LAv3I/test%252520title.jpg','19/0','https://lh5.googleusercontent.com/-DEDNZ_Qhf30/UOo9xGtieOI/AAAAAAAAE7c/yoZhc3LAv3I/test%252520title.jpg','https://picasaweb.google.com/102448397019191874652/NrceJK#5830540581409028322','p','103','205','https://lh5.googleusercontent.com/-DEDNZ_Qhf30/UOo9xGtieOI/AAAAAAAAE7c/yoZhc3LAv3I/test%252520title.jpg','0', '0','0')">
<img src="https://lh5.googleusercontent.com/-DEDNZ_Qhf30/UOo9xGtieOI/AAAAAAAAE7c/yoZhc3LAv3I/test%252520title.jpg" width="103" style="padding:0px;" id="i19"></a></div><div class="plane s20 slideIn" id="s20" style="height:204px; width:133px;">
<a href='#' onclick="pop('20','https://lh4.googleusercontent.com/-gVSUgLgo0so/UOo9zITt40I/AAAAAAAAE7k/gN0bXL-AVsE/test%252520title.jpg','20/0','https://lh4.googleusercontent.com/-gVSUgLgo0so/UOo9zITt40I/AAAAAAAAE7k/gN0bXL-AVsE/test%252520title.jpg','https://picasaweb.google.com/102448397019191874652/NrceJK#5830540616197333826','p','103','206','https://lh4.googleusercontent.com/-gVSUgLgo0so/UOo9zITt40I/AAAAAAAAE7k/gN0bXL-AVsE/test%252520title.jpg','0', '0','0')">
<img src="https://lh4.googleusercontent.com/-gVSUgLgo0so/UOo9zITt40I/AAAAAAAAE7k/gN0bXL-AVsE/test%252520title.jpg" width="103" style="padding:0px;" id="i20"></a></div><div class="plane s21 slideIn" id="s21" style="height:204px; width:133px;">
<a href='#' onclick="pop('21','https://lh4.googleusercontent.com/-broT_ce2Lpo/UOo91hH7iiI/AAAAAAAAE7s/mweaww1AazM/test%252520title.jpg','21/0','https://lh4.googleusercontent.com/-broT_ce2Lpo/UOo91hH7iiI/AAAAAAAAE7s/mweaww1AazM/test%252520title.jpg','https://picasaweb.google.com/102448397019191874652/NrceJK#5830540657218521634','p','103','207','https://lh4.googleusercontent.com/-broT_ce2Lpo/UOo91hH7iiI/AAAAAAAAE7s/mweaww1AazM/test%252520title.jpg','0', '0','0')">
<img src="https://lh4.googleusercontent.com/-broT_ce2Lpo/UOo91hH7iiI/AAAAAAAAE7s/mweaww1AazM/test%252520title.jpg" width="103" style="padding:0px;" id="i21"></a></div><div class="plane s22 slideIn" id="s22" style="height:204px; width:133px;">
<a href='#' onclick="pop('22','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnM9hggBfGK3snpkcbToP0MrtudhhESqdJhzF3K1Q_zOaN5T7fDTFYeivnXtiT9SdRgUbc3UTKtlBVC6JZASz51OzUUYitgh2GlUeg1fcQNVKVmRREhtW_wVeMA1xYQg7rpCKpYPDLJ2GH/','22/0','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnM9hggBfGK3snpkcbToP0MrtudhhESqdJhzF3K1Q_zOaN5T7fDTFYeivnXtiT9SdRgUbc3UTKtlBVC6JZASz51OzUUYitgh2GlUeg1fcQNVKVmRREhtW_wVeMA1xYQg7rpCKpYPDLJ2GH/','https://picasaweb.google.com/102448397019191874652/NrceJK#5830540687178190210','p','103','208','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnM9hggBfGK3snpkcbToP0MrtudhhESqdJhzF3K1Q_zOaN5T7fDTFYeivnXtiT9SdRgUbc3UTKtlBVC6JZASz51OzUUYitgh2GlUeg1fcQNVKVmRREhtW_wVeMA1xYQg7rpCKpYPDLJ2GH/','0', '0','0')">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnM9hggBfGK3snpkcbToP0MrtudhhESqdJhzF3K1Q_zOaN5T7fDTFYeivnXtiT9SdRgUbc3UTKtlBVC6JZASz51OzUUYitgh2GlUeg1fcQNVKVmRREhtW_wVeMA1xYQg7rpCKpYPDLJ2GH/" width="103" style="padding:0px;" id="i22"></a></div><div class="plane s23 slideIn" id="s23" style="height:204px; width:133px;">
<a href='#' onclick="pop('23','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgM8rIWpik4aTJHd-z0zSqauxQ_aIeQynUCs9oVn0BPiHQMajgpbbQy_edgCl5qIZ2-K1kJ6cxsvinyBwJj9RwTOUPFHr68sFNPh_YN7frpQctm_ndg4JdNvwT7E5__pNCwWUDkIx8BWYQm/','23/0','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgM8rIWpik4aTJHd-z0zSqauxQ_aIeQynUCs9oVn0BPiHQMajgpbbQy_edgCl5qIZ2-K1kJ6cxsvinyBwJj9RwTOUPFHr68sFNPh_YN7frpQctm_ndg4JdNvwT7E5__pNCwWUDkIx8BWYQm/','https://picasaweb.google.com/102448397019191874652/NrceJK#5830540716239067106','p','103','209','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgM8rIWpik4aTJHd-z0zSqauxQ_aIeQynUCs9oVn0BPiHQMajgpbbQy_edgCl5qIZ2-K1kJ6cxsvinyBwJj9RwTOUPFHr68sFNPh_YN7frpQctm_ndg4JdNvwT7E5__pNCwWUDkIx8BWYQm/','0', '0','0')">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgM8rIWpik4aTJHd-z0zSqauxQ_aIeQynUCs9oVn0BPiHQMajgpbbQy_edgCl5qIZ2-K1kJ6cxsvinyBwJj9RwTOUPFHr68sFNPh_YN7frpQctm_ndg4JdNvwT7E5__pNCwWUDkIx8BWYQm/" width="103" style="padding:0px;" id="i23"></a></div><div class="plane s24 slideIn" id="s24" style="height:204px; width:133px;">
<a href='#' onclick="pop('24','https://lh5.googleusercontent.com/-QC0NJ6-gPeg/UOo97XdZaDI/AAAAAAAAE8E/jO6WoSLY88A/test%252520title.jpg','24/0','https://lh5.googleusercontent.com/-QC0NJ6-gPeg/UOo97XdZaDI/AAAAAAAAE8E/jO6WoSLY88A/test%252520title.jpg','https://picasaweb.google.com/102448397019191874652/NrceJK#5830540757703419954','p','103','210','https://lh5.googleusercontent.com/-QC0NJ6-gPeg/UOo97XdZaDI/AAAAAAAAE8E/jO6WoSLY88A/test%252520title.jpg','0', '0','0')">
<img src="https://lh5.googleusercontent.com/-QC0NJ6-gPeg/UOo97XdZaDI/AAAAAAAAE8E/jO6WoSLY88A/test%252520title.jpg" width="103" style="padding:0px;" id="i24"></a></div><div class="plane s25 slideIn" id="s25" style="height:204px; width:133px;">
<a href='#' onclick="pop('25','https://lh6.googleusercontent.com/-Z8_1dY_gIf8/UOo99FhDJxI/AAAAAAAAE8I/2mrYyrXpW2o/test%252520title.jpg','25/0','https://lh6.googleusercontent.com/-Z8_1dY_gIf8/UOo99FhDJxI/AAAAAAAAE8I/2mrYyrXpW2o/test%252520title.jpg','https://picasaweb.google.com/102448397019191874652/NrceJK#5830540787246638866','p','103','211','https://lh6.googleusercontent.com/-Z8_1dY_gIf8/UOo99FhDJxI/AAAAAAAAE8I/2mrYyrXpW2o/test%252520title.jpg','0', '0','0')">
<img src="https://lh6.googleusercontent.com/-Z8_1dY_gIf8/UOo99FhDJxI/AAAAAAAAE8I/2mrYyrXpW2o/test%252520title.jpg" width="103" style="padding:0px;" id="i25"></a></div><div class="plane s26 slideIn" id="s26" style="height:204px; width:133px;">
<a href='#' onclick="pop('26','https://lh6.googleusercontent.com/-gL2tjkXOSM8/UOo9_lBJmZI/AAAAAAAAE8Y/WLCuMVPyrus/test%252520title.jpg','26/0','https://lh6.googleusercontent.com/-gL2tjkXOSM8/UOo9_lBJmZI/AAAAAAAAE8Y/WLCuMVPyrus/test%252520title.jpg','https://picasaweb.google.com/102448397019191874652/NrceJK#5830540830062516626','p','103','212','https://lh6.googleusercontent.com/-gL2tjkXOSM8/UOo9_lBJmZI/AAAAAAAAE8Y/WLCuMVPyrus/test%252520title.jpg','0', '0','0')">
<img src="https://lh6.googleusercontent.com/-gL2tjkXOSM8/UOo9_lBJmZI/AAAAAAAAE8Y/WLCuMVPyrus/test%252520title.jpg" width="103" style="padding:0px;" id="i26"></a></div><div class="plane s27 slideIn" id="s27" style="height:204px; width:133px;">
<a href='#' onclick="pop('27','https://lh4.googleusercontent.com/-Up3FcHijIis/UOo-D1mm8QI/AAAAAAAAE80/IaEinFGjOPI/test%252520title.jpg','27/0','https://lh4.googleusercontent.com/-Up3FcHijIis/UOo-D1mm8QI/AAAAAAAAE80/IaEinFGjOPI/test%252520title.jpg','https://picasaweb.google.com/102448397019191874652/NrceJK#5830540903234072834','p','103','213','https://lh4.googleusercontent.com/-Up3FcHijIis/UOo-D1mm8QI/AAAAAAAAE80/IaEinFGjOPI/test%252520title.jpg','0', '0','0')">
<img src="https://lh4.googleusercontent.com/-Up3FcHijIis/UOo-D1mm8QI/AAAAAAAAE80/IaEinFGjOPI/test%252520title.jpg" width="103" style="padding:0px;" id="i27"></a></div><div class="plane s28 slideIn" id="s28" style="height:204px; width:133px;">
<a href='#' onclick="pop('28','https://lh3.googleusercontent.com/-QqZRZ4TL9_4/UOo-Fqr6oCI/AAAAAAAAE88/kd3JeqWcej0/test%252520title.jpg','28/0','https://lh3.googleusercontent.com/-QqZRZ4TL9_4/UOo-Fqr6oCI/AAAAAAAAE88/kd3JeqWcej0/test%252520title.jpg','https://picasaweb.google.com/102448397019191874652/NrceJK#5830540934663282722','p','103','214','https://lh3.googleusercontent.com/-QqZRZ4TL9_4/UOo-Fqr6oCI/AAAAAAAAE88/kd3JeqWcej0/test%252520title.jpg','0', '0','0')">
<img src="https://lh3.googleusercontent.com/-QqZRZ4TL9_4/UOo-Fqr6oCI/AAAAAAAAE88/kd3JeqWcej0/test%252520title.jpg" width="103" style="padding:0px;" id="i28"></a></div><div class="plane s29 slideIn" id="s29" style="height:204px; width:133px;">
<a href='#' onclick="pop('29','https://lh5.googleusercontent.com/-9F5-ZHEDHjU/UOo-HQeVoSI/AAAAAAAAE9E/aN3jPbP8lDo/test%252520title.jpg','29/0','https://lh5.googleusercontent.com/-9F5-ZHEDHjU/UOo-HQeVoSI/AAAAAAAAE9E/aN3jPbP8lDo/test%252520title.jpg','https://picasaweb.google.com/102448397019191874652/NrceJK#5830540961986748706','p','103','215','https://lh5.googleusercontent.com/-9F5-ZHEDHjU/UOo-HQeVoSI/AAAAAAAAE9E/aN3jPbP8lDo/test%252520title.jpg','0', '0','0')">
<img src="https://lh5.googleusercontent.com/-9F5-ZHEDHjU/UOo-HQeVoSI/AAAAAAAAE9E/aN3jPbP8lDo/test%252520title.jpg" width="103" style="padding:0px;" id="i29"></a></div><div class="plane s30 slideIn" id="s30" style="height:204px; width:133px;">
<a href='#' onclick="pop('30','https://lh6.googleusercontent.com/-v3RUdjQ3kC0/UOo-Jcr-PTI/AAAAAAAAE9M/QMVx3bvgpZA/test%252520title.jpg','30/0','https://lh6.googleusercontent.com/-v3RUdjQ3kC0/UOo-Jcr-PTI/AAAAAAAAE9M/QMVx3bvgpZA/test%252520title.jpg','https://picasaweb.google.com/102448397019191874652/NrceJK#5830540999624899890','p','103','216','https://lh6.googleusercontent.com/-v3RUdjQ3kC0/UOo-Jcr-PTI/AAAAAAAAE9M/QMVx3bvgpZA/test%252520title.jpg','0', '0','0')">
<img src="https://lh6.googleusercontent.com/-v3RUdjQ3kC0/UOo-Jcr-PTI/AAAAAAAAE9M/QMVx3bvgpZA/test%252520title.jpg" width="103" style="padding:0px;" id="i30"></a></div><div class="plane s31 slideIn" id="s31" style="height:204px; width:133px;">
<a href='#' onclick="pop('31','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJev6b6lTQo4svUj_19MUSS9wCK1kXygHXKEezB2WBEWzYalxJUmrC0PxoHWvMaawvCkiEluxKUL4-3Q7q2nqJZfbSSydGGAEUjf4_YO_Prktl7XEg1gJl_QwktU4pBOtfhlcKnV-FU6WO/','31/0','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJev6b6lTQo4svUj_19MUSS9wCK1kXygHXKEezB2WBEWzYalxJUmrC0PxoHWvMaawvCkiEluxKUL4-3Q7q2nqJZfbSSydGGAEUjf4_YO_Prktl7XEg1gJl_QwktU4pBOtfhlcKnV-FU6WO/','https://picasaweb.google.com/102448397019191874652/NrceJK#5830541045485897906','p','103','217','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJev6b6lTQo4svUj_19MUSS9wCK1kXygHXKEezB2WBEWzYalxJUmrC0PxoHWvMaawvCkiEluxKUL4-3Q7q2nqJZfbSSydGGAEUjf4_YO_Prktl7XEg1gJl_QwktU4pBOtfhlcKnV-FU6WO/','0', '0','0')">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJev6b6lTQo4svUj_19MUSS9wCK1kXygHXKEezB2WBEWzYalxJUmrC0PxoHWvMaawvCkiEluxKUL4-3Q7q2nqJZfbSSydGGAEUjf4_YO_Prktl7XEg1gJl_QwktU4pBOtfhlcKnV-FU6WO/" width="103" style="padding:0px;" id="i31"></a></div><div class="plane s32 slideIn" id="s32" style="height:204px; width:133px;">
<a href='#' onclick="pop('32','https://lh6.googleusercontent.com/-rKMnQbtCrX4/UOo-OKJP8oI/AAAAAAAAE9c/2HyDVki0DRo/test%252520title.jpg','32/0','https://lh6.googleusercontent.com/-rKMnQbtCrX4/UOo-OKJP8oI/AAAAAAAAE9c/2HyDVki0DRo/test%252520title.jpg','https://picasaweb.google.com/102448397019191874652/NrceJK#5830541080546767490','p','103','218','https://lh6.googleusercontent.com/-rKMnQbtCrX4/UOo-OKJP8oI/AAAAAAAAE9c/2HyDVki0DRo/test%252520title.jpg','0', '0','0')">
<img src="https://lh6.googleusercontent.com/-rKMnQbtCrX4/UOo-OKJP8oI/AAAAAAAAE9c/2HyDVki0DRo/test%252520title.jpg" width="103" style="padding:0px;" id="i32"></a></div><div class="plane s33 slideIn" id="s33" style="height:204px; width:133px;">
<a href='#' onclick="pop('33','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiryGnTNgNClRGh08xTf0591JiesXTDN0QcZUT7tKzH18PRD-7Ri87BtqQD8q32OZkIx2Dc55BU7SXFiWl07BIanbHwZHwsG6urTuxhuvPWGLYHQW7BuyINk9y93YVIwP34BP8WAwCYSsSR/','33/0','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiryGnTNgNClRGh08xTf0591JiesXTDN0QcZUT7tKzH18PRD-7Ri87BtqQD8q32OZkIx2Dc55BU7SXFiWl07BIanbHwZHwsG6urTuxhuvPWGLYHQW7BuyINk9y93YVIwP34BP8WAwCYSsSR/','https://picasaweb.google.com/102448397019191874652/NrceJK#5830541111277545058','p','103','219','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiryGnTNgNClRGh08xTf0591JiesXTDN0QcZUT7tKzH18PRD-7Ri87BtqQD8q32OZkIx2Dc55BU7SXFiWl07BIanbHwZHwsG6urTuxhuvPWGLYHQW7BuyINk9y93YVIwP34BP8WAwCYSsSR/','0', '0','0')">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiryGnTNgNClRGh08xTf0591JiesXTDN0QcZUT7tKzH18PRD-7Ri87BtqQD8q32OZkIx2Dc55BU7SXFiWl07BIanbHwZHwsG6urTuxhuvPWGLYHQW7BuyINk9y93YVIwP34BP8WAwCYSsSR/" width="103" style="padding:0px;" id="i33"></a></div><div class="plane s34 slideIn" id="s34" style="height:204px; width:133px;">
<a href='#' onclick="pop('34','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSaREZsTTZxGqXK_wYfkGk0lQqx_6nMuQxvwilTSPScgBGy3v3ovOmJ1e7XmXQomcXaX9QFPvqU6jfQTSqKdRyRV3-o_f_u0BrsLQOyB0Xztp_hkcyw-KSdTj9H_bH5l99wxjR5ayglcMw/','34/0','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSaREZsTTZxGqXK_wYfkGk0lQqx_6nMuQxvwilTSPScgBGy3v3ovOmJ1e7XmXQomcXaX9QFPvqU6jfQTSqKdRyRV3-o_f_u0BrsLQOyB0Xztp_hkcyw-KSdTj9H_bH5l99wxjR5ayglcMw/','https://picasaweb.google.com/102448397019191874652/NrceJK#5830541170205584002','p','103','220','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSaREZsTTZxGqXK_wYfkGk0lQqx_6nMuQxvwilTSPScgBGy3v3ovOmJ1e7XmXQomcXaX9QFPvqU6jfQTSqKdRyRV3-o_f_u0BrsLQOyB0Xztp_hkcyw-KSdTj9H_bH5l99wxjR5ayglcMw/','0', '0','0')">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSaREZsTTZxGqXK_wYfkGk0lQqx_6nMuQxvwilTSPScgBGy3v3ovOmJ1e7XmXQomcXaX9QFPvqU6jfQTSqKdRyRV3-o_f_u0BrsLQOyB0Xztp_hkcyw-KSdTj9H_bH5l99wxjR5ayglcMw/" width="103" style="padding:0px;" id="i34"></a></div><div class="plane s35 slideIn" id="s35" style="height:204px; width:133px;">
<a href='#' onclick="pop('35','https://lh4.googleusercontent.com/-G8hlHhRFD1Y/UOo-WDwlfMI/AAAAAAAAE98/9uhVJk8rCiM/test%252520title.jpg','35/0','https://lh4.googleusercontent.com/-G8hlHhRFD1Y/UOo-WDwlfMI/AAAAAAAAE98/9uhVJk8rCiM/test%252520title.jpg','https://picasaweb.google.com/102448397019191874652/NrceJK#5830541216271662274','p','103','221','https://lh4.googleusercontent.com/-G8hlHhRFD1Y/UOo-WDwlfMI/AAAAAAAAE98/9uhVJk8rCiM/test%252520title.jpg','0', '0','0')">
<img src="https://lh4.googleusercontent.com/-G8hlHhRFD1Y/UOo-WDwlfMI/AAAAAAAAE98/9uhVJk8rCiM/test%252520title.jpg" width="103" style="padding:0px;" id="i35"></a></div><div class="plane s36 slideIn" id="s36" style="height:204px; width:133px;">
<a href='#' onclick="pop('36','https://lh5.googleusercontent.com/-1ElvNW8LpWM/UOo-YNTSoBI/AAAAAAAAE-E/iV7osz0SyNE/test%252520title.jpg','36/0','https://lh5.googleusercontent.com/-1ElvNW8LpWM/UOo-YNTSoBI/AAAAAAAAE-E/iV7osz0SyNE/test%252520title.jpg','https://picasaweb.google.com/102448397019191874652/NrceJK#5830541253192884242','p','103','222','https://lh5.googleusercontent.com/-1ElvNW8LpWM/UOo-YNTSoBI/AAAAAAAAE-E/iV7osz0SyNE/test%252520title.jpg','0', '0','0')">
<img src="https://lh5.googleusercontent.com/-1ElvNW8LpWM/UOo-YNTSoBI/AAAAAAAAE-E/iV7osz0SyNE/test%252520title.jpg" width="103" style="padding:0px;" id="i36"></a></div><div class="plane s37 slideIn" id="s37" style="height:204px; width:133px;">
<a href='#' onclick="pop('37','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVPHryAfvmhP9PlXyVMiSGNUd4w2D94x_hlMDqPA-L39YggwURj7TQ0hnhgpOjlEl-mp_j5Oqega9NYppKWYsHRb9F0OilZiFtvguRxf-uMASAt1xeEuks0pvhG909MIHPccojRzcCm72S/','37/0','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVPHryAfvmhP9PlXyVMiSGNUd4w2D94x_hlMDqPA-L39YggwURj7TQ0hnhgpOjlEl-mp_j5Oqega9NYppKWYsHRb9F0OilZiFtvguRxf-uMASAt1xeEuks0pvhG909MIHPccojRzcCm72S/','https://picasaweb.google.com/102448397019191874652/NrceJK#5830541289809127858','p','103','223','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVPHryAfvmhP9PlXyVMiSGNUd4w2D94x_hlMDqPA-L39YggwURj7TQ0hnhgpOjlEl-mp_j5Oqega9NYppKWYsHRb9F0OilZiFtvguRxf-uMASAt1xeEuks0pvhG909MIHPccojRzcCm72S/','0', '0','0')">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVPHryAfvmhP9PlXyVMiSGNUd4w2D94x_hlMDqPA-L39YggwURj7TQ0hnhgpOjlEl-mp_j5Oqega9NYppKWYsHRb9F0OilZiFtvguRxf-uMASAt1xeEuks0pvhG909MIHPccojRzcCm72S/" width="103" style="padding:0px;" id="i37"></a></div><div class="plane s38 slideIn" id="s38" style="height:204px; width:133px;">
<a href='#' onclick="pop('38','https://lh3.googleusercontent.com/-RmXcWpafoYQ/UOo-cd6va_I/AAAAAAAAE-U/GSdWCXhwAsY/test%252520title.jpg','38/0','https://lh3.googleusercontent.com/-RmXcWpafoYQ/UOo-cd6va_I/AAAAAAAAE-U/GSdWCXhwAsY/test%252520title.jpg','https://picasaweb.google.com/102448397019191874652/NrceJK#5830541326372793330','p','103','224','https://lh3.googleusercontent.com/-RmXcWpafoYQ/UOo-cd6va_I/AAAAAAAAE-U/GSdWCXhwAsY/test%252520title.jpg','0', '0','0')">
<img src="https://lh3.googleusercontent.com/-RmXcWpafoYQ/UOo-cd6va_I/AAAAAAAAE-U/GSdWCXhwAsY/test%252520title.jpg" width="103" style="padding:0px;" id="i38"></a></div><div class="plane s39 slideIn" id="s39" style="height:204px; width:133px;">
<a href='#' onclick="pop('39','https://lh3.googleusercontent.com/-Bte3KygRam0/UOo-emf67gI/AAAAAAAAE-g/eGLVN7Wk3PY/test%252520title.jpg','39/0','https://lh3.googleusercontent.com/-Bte3KygRam0/UOo-emf67gI/AAAAAAAAE-g/eGLVN7Wk3PY/test%252520title.jpg','https://picasaweb.google.com/102448397019191874652/NrceJK#5830541363035958786','p','103','225','https://lh3.googleusercontent.com/-Bte3KygRam0/UOo-emf67gI/AAAAAAAAE-g/eGLVN7Wk3PY/test%252520title.jpg','0', '0','0')">
<img src="https://lh3.googleusercontent.com/-Bte3KygRam0/UOo-emf67gI/AAAAAAAAE-g/eGLVN7Wk3PY/test%252520title.jpg" width="103" style="padding:0px;" id="i39"></a></div>
<div id="floor" class="slideFloor" align="center">
<!--<img src='@@@' id="floorImg" width="500" height="500">-->
<img src='https://picasaweb.google.com/data/feed/base/user/102448397019191874652/albumid/5830540820290122353?alt=rss&kind=photo&hl=ja&start-index=startRSS&max-results=limitRSS' id="floorImg" width="500" height="500">
</div>
<span id="floor_text"></span>
</div>
</div>
<!-- <span id="floor_text"></span>-->
</div>
</div>
<div class="controls" id="ctrl1" style="position:absolute;top:2%; left:38%;width:180px; height:32px; ">
<button onmouseover="toggleShape1(100)" onclick="toggleShape1(200)" class="ctlBtn">-Zoom</button>
<button onmouseover="toggleShape1(-100)" onclick="toggleShape1(-200)" class="ctlBtn">Zoom+</button>
</div>
<div class="controls" id="ctrl2" style="position:absolute;width:282px"><!-- style="position:absolute; top:30px;"-->
<table><tr><td style="height:32px">
<!-- west 左画面--><a href="#" onclick="runAction('changeCurrentTitle','0');">
<img src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRUPoV8HgDosuP_l5BqIkXQNdoa7GYp27kpfCqh3NTcxvfh3yrF1AIfz5NUH7j_tv0UizLv1MJNDfkIXbV44181el-z_TW8oykABWSoUnw2S_aBylT1NZhtb57UCyNHy56b2vM8LImcGNT/s1600/gray_ball2.png style="position:absolute;top:-20%;margin-left:-100px; opacity:0.5; padding:0px;width:70px;height:40px;
-webkit-transform:rotateX(10deg) rotateY(50deg); background:none">
</a>
<a href="#" onclick="runAction('fbAlbum','https://picasaweb.google.com/data/feed/base/user/102448397019191874652/albumid/5243668162180262017?alt=rss&kind=photo&start-index=47,https://picasaweb.google.com/data/feed/base/user/102448397019191874652/albumid/5830540820290122353?alt=rss&kind=photo&hl=ja&start-index=startRSS&max-results=limitRSS,prev,0');">
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSLuj4s0z2FJRXkAlK4ivFl9uDiVwCajiX4G6Uy2cvO2yB5B5kLIZlInUUQFBjkNYHfXGH4GDF6gP8RNZPFdKknQR-zZyF-Cb-oWkNqofsD8MJ6NnhXLO6tovfOdkFuT_WebwqHKFEcSUv/s1600/gray_ball.png'
style="-webkit-transform:rotateX(10deg) rotateY(45deg);height:40px; width:48px;opacity:0.5;margin-left:-15px;margin-bottom:3px;background:none"/></a>
</td><td>
<button onclick="autoRotate('left')" class="ctlBtn">
< </button> <button onclick="autoRotate('stop');" class="ctlBtn2">■</button>
<button onclick="autoRotate('right')" class="ctlBtn"> > </button>
</td><td>
<a href="#" onclick="runAction('fbAlbum','https://picasaweb.google.com/data/feed/base/user/102448397019191874652/albumid/5243668162180262017?alt=rss&kind=photo&start-index=47,https://picasaweb.google.com/data/feed/base/user/102448397019191874652/albumid/5830540820290122353?alt=rss&kind=photo&hl=ja&start-index=startRSS&max-results=limitRSS,next,0');">
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSLuj4s0z2FJRXkAlK4ivFl9uDiVwCajiX4G6Uy2cvO2yB5B5kLIZlInUUQFBjkNYHfXGH4GDF6gP8RNZPFdKknQR-zZyF-Cb-oWkNqofsD8MJ6NnhXLO6tovfOdkFuT_WebwqHKFEcSUv/s1600/gray_ball.png'
style="-webkit-transform:rotateX(10deg) rotateY(-45deg);height:40px; width:48px;opacity:0.5;margin-right:-20px;margin-bottom:3px;background:none"/></a>
<!--<button onclick="toggleShape1(400)">-Zoom</button> <button onclick="toggleShape1(-400)">Zoom+</button>-->
</td></tr>
</table>
<!--east 右画面--><a href="#" onclick="runAction('changeCurrentTitle','0');">
<img src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRUPoV8HgDosuP_l5BqIkXQNdoa7GYp27kpfCqh3NTcxvfh3yrF1AIfz5NUH7j_tv0UizLv1MJNDfkIXbV44181el-z_TW8oykABWSoUnw2S_aBylT1NZhtb57UCyNHy56b2vM8LImcGNT/s1600/gray_ball2.png style="position:absolute;top:-20%; right:-28%;opacity:0.5; margin-bottom:3px; width:70px;height:40px;
-webkit-transform:rotateX(10deg) rotateY(-50deg);background:none " />
</a>
<!-- slider -->
<div id="jquery-ui-slider3"></div>
</div>
<!--
@movieUrl@
<div style="position:absolute; bottom:10px;">
<a href="#" onclick='runAction("fbtest","")'>fbtest</a><br />
<a href="#" onclick='runAction("changeCurrentTitle","0")'>Home</a><br />
<a href="#" onclick='runAction("changeCurrentTitle","0")'>parentTitle</a><br />
</div>-->
<input id="_type" type="hidden" value="000" />
<!-- map
<div id="map" style="position:absolute;left:15%; top:0%; margin-top:0px; opacity:0.5; width:600px; height:300px;"></div>
-->
<!-- slider -->
<div id="jquery-ui-slider-wrap" style="position:absolute; top:80px;left:-15px;">
<!--<p style="color:red">plane</p>-->
<input type="text" id="jquery-ui-slider-value" /><div id="jquery-ui-slider"></div>
</div>
<div id="jquery-ui-slider-wrap2" style="position:absolute; top:465px; left:-15px;">
<!--<pstyle="color:red">floor</p>-->
<input type="text" id="jquery-ui-slider-value2" /> <div id="jquery-ui-slider2"></div>
</div>
<!-- hideControl -->
<table><tr><td>
<a href="#" onClick="ctrlToggle();">
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRUPoV8HgDosuP_l5BqIkXQNdoa7GYp27kpfCqh3NTcxvfh3yrF1AIfz5NUH7j_tv0UizLv1MJNDfkIXbV44181el-z_TW8oykABWSoUnw2S_aBylT1NZhtb57UCyNHy56b2vM8LImcGNT/s1600/gray_ball2.png' style='opacity:0.3;width:40px;height:40px;background:none'/>
</a></td><td><br /><br />
<a href="#" onClick="ctrlToggle2();">
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRUPoV8HgDosuP_l5BqIkXQNdoa7GYp27kpfCqh3NTcxvfh3yrF1AIfz5NUH7j_tv0UizLv1MJNDfkIXbV44181el-z_TW8oykABWSoUnw2S_aBylT1NZhtb57UCyNHy56b2vM8LImcGNT/s1600/gray_ball2.png' style='opacity:0.3;width:40px;height:40px;background:none'/>
</a></td></tr></table>
<div id="getComment" style="font-size:16px;position:absolute;
top:50%;right:0%;width:480px;padding:30px;height:250px;overflow:scroll;background-color:rgba(0,0,0,0.8);opacity:0.8;">
<!-- <a href="#" onclick="$('#getComment').hide('slow');")>X</a><br />-->
</div>
<!-- <a href="#" onclick="fbLogin();">fbLogin</a><p />-->
</body>
</html>
kwin786http://www.blogger.com/profile/11636870499038520354noreply@blogger.com0