** ³µÍ× [#p2f7f552]
¤È¤Æ¤â¤ªµ×¤·¤Ö¤ê¤Ç¤¹¡£Ãݼ¤Ç¤¹¡£
2007ǯ¤ÎÏäǤ¹¤¬¡¢Åö»þ¡Ö¤Ä¤¯¤ë¤Ö¡¡¥¬¥¤¥É¥Ö¥í¥°¡×¤È¤¤¤¦¥Ö¥í¥°¤ÎJavaScriptôÅö¤ò¤·¤Æ¤¤¤Þ¤·¤¿¡£
¸½ºß¤ÏÊĺ¿¤·¤Æ¤·¤Þ¤Ã¤Æ¤¤¤Þ¤¹¤¬¡¢µ»ö¤Ïľ¥ê¥ó¥¯¤Ç¸«¤ë¤³¤È¤¬²Äǽ¤Ç¤¹¡£
¤½¤ÎºÝ¤Ë¡¢Âè1²óÌܤ˽ñ¤¤¤¿µ»ö [[¡ÖZooomr¡×¤Î¡Ö¼Ì¿¿¤Î¾å¤ËÊ̤μ̿¿¤Î¥ì¥¤¥ä¡¼¤òÇÛÃÖ¤¹¤ë¡×Éôʬ¤ò¥¯¥é¥¹¥é¥¤¥Ö¥é¥ê²½¤·¤Æ¤ß¤Þ¤·¤¿:http://www.tkrb.jp/guide/2007/10/javascript_photograph_on_another_layer_of_photograph.html]]
¤Î¥µ¥ó¥×¥ë¤¬¾Ã¤¨¤Æ¤·¤Þ¤Ã¤Æ¤¤¤ë¤Î¤ò³Îǧ¤·¤Þ¤·¤Æ^^; Åö»þ¤Ï prototype.js ¤òÍøÍѤ·¤¿¼ÂÁõ¤ò½ñ¤¤¤Æ¤¤¤¿¤Î¤Ç¤¹¤¬¡¢
¤Á¤ç¤Ã¤È jQuery ¤Ç¼ÂÁõ¤·¤Ê¤ª¤·¤Æ¤ß¤Þ¤·¤¿¡ª
*** Zooomr¤Ë¤Ä¤¤¤Æ¤ÎÊä [#peae8c4d]
¢¨µ»öÃæ¤ÎZooomr¤Î¥ê¥ó¥¯¤¬ÀÚ¤ì¤Æ¤¤¤ë¤Ã¤Ý¤¤¤Î¤Ç¤¹¤¬¡¢[[Zooomr:http://jp.zooomr.com/]]¼«ÂΤϤޤÀ¸ºß¤·¤Æ¤¤¤ë¤è¤¦¤Ç¤¹¡£
¤¿¤À¡¢¸½ºß¤Ç¤ÏÉáÄ̤Υե©¥È¥¹¥È¥ì¡¼¥¸Åª¤Ê¥µ¡¼¥Ó¥¹¤Ë¤Ê¤Ã¤Æ¤¤¤ë¤è¤¦¤Ç¤¹¡£
¼Ì¿¿¾å¤ËÊ̤μ̿¿¤òÇÛÃÖ¤·¤Æ¡¢¥¯¥ê¥Ã¥¯¤Ç¤½¤ì¤òɽ¼¨¤¹¤ë¤è¤¦¤ÊUI¤Ï¢¤³¤Îµ»ö¤Î¥Ó¥Ç¥ª¤ÇÅö»þ¤ÎµóÆ°¤¬³Îǧ¤Ç¤¤ë¤È»×¤¤¤Þ¤¹¡£
[[Zooomr¡¢¼Ì¿¿¤Ë¥º¡¼¥à²Äǽ¤Êµ¡Ç½¥¹¥¿¡¼¥È:http://jp.techcrunch.com/archives/zooomr-launches-zoomable-picture-in-picture-feat/]]
** Æ°ºîÀâÌÀ [#v839eeac]
´ðËÜŪ¤Ë¼ÂÁõÊý¿Ë¤Ïµ»ö¤Ë½ñ¤¤¤Æ¤¢¤Ã¤¿Ä̤ê¤Ç¤¹¡£
¡Ø1.ÇطʲèÁü¥ì¥¤¥ä¡¼¡Ù¤Î¾å¤Ë¡Ø2.·ê¥ì¥¤¥ä¡¼¡Ù¤¬¤¢¤Ã¤Æ¡¢¤½¤³¤«¤é¡Ø3.·ê¥ì¥¤¥ä¡¼Æâ¤Î²èÁü¥ì¥¤¥ä¡¼¡Ù¤¬¤Î¤¾¤¤¤Æ¤¤¤ë·Á¤Ç¤¹¡£
¤È¤ê¤¢¤¨¤º¡¢Æ°¤¯¥µ¥ó¥×¥ë¤ò¤É¤¦¤¾¡£
http://okra.ark-web.jp/~takemura/public/js/crosslayer/index2.html
[[&ref(sample.png,nolink);>http://okra.ark-web.jp/~takemura/public/js/crosslayer/index2.html]]
+ ¼Ì¿¿¤Î¾å¤ËÀÖÏȤΤ¬¤¢¤ê¡¢¥Þ¥¦¥¹¥Û¥Ð¡¼¤ÇÃæ¤Î¼Ì¿¿¥ì¥¤¥ä¡¼¤¬¥°¥ê¥°¥êÆ°¤¤Þ¤¹¡£
+ ¥¯¥ê¥Ã¥¯¤ÇÊ̤μ̿¿¤Ë²èÌÌÁ«°Ü¡Ä¤Ï¡¢¤·¤Ê¤¤¤Ç³ºÅö¼Ì¿¿¤òÁ°Ì̤Ëɽ¼¨¤¹¤ëUI¤Ë¤·¤Æ¤¢¤ê¤Þ¤¹¡£
+ ɽ¼¨¤·¤¿¤é¡¢¼¡¤Î¥Ç¡¼¥¿¤Ë´ð¤¤¤Æ¡Ø2.·ê¥ì¥¤¥ä¡¼¡Ù¤È¡Ø3.·ê¥ì¥¤¥ä¡¼Æâ¤Î²èÁü¥ì¥¤¥ä¡¼¡Ù¤ò¹¹¿·¤·¤Þ¤¹¡£
#blikimore()
*** »È¤¤Êý [#f9e0bbc5]
¥µ¥ó¥×¥ëÆâ¤Ë½ñ¤¤¤¿¤è¤¦¤ËºÇÄã¸Â¢¥³¥ì¤À¤±¤ÇÆ°¤¤Þ¤¹¡£
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/crosslayer.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#crosslayer').crosslayer({
layerDataFile : "jsonLayerData.txt"
});
});
</script>
¡§Ãæά
<ul id="crosslayer">
<li>
<div style="position: relative; width: 320px; height: 320px;" class="back-image">
<img src="samples/img01.jpg" height="320" width="320">
<!-- #back-image --></div>
<h3>²èÁü¤Î¾ÜºÙÀâÌÀ</h3>
<div class="description"></div>
</li>
<li>
<div style="position: relative; width: 320px; height: 320px;" class="back-image">
<img src="samples/img02.jpg" height="320" width="320">
<!-- #back-image --></div>
<h3>²èÁü¤Î¾ÜºÙÀâÌÀ</h3>
<div class="description"></div>
</li>
<li>
ά
</li>
<li>
ά
</li>
<li>
ά
</li>
<li>
ά
</li>
<li>
ά
</li>
<!-- #back-image --></div>
¤¢¤È¤Ï¡¢layerDataFile¥ª¥×¥·¥ç¥ó¤ËÅϤ·¤Æ¤¤¤ë jsonLayerData.txt ¤È¤¤¤¦¥Õ¥¡¥¤¥ë¤Ë¥Ç¡¼¥¿¤òÍÑ°Õ¤¹¤ë¤À¤±¤Ç¤¹¡£
json·Á¼°¤Ï¡¢¥µ¥ó¥×¥ë¤Ë½ñ¤¤¤Æ¤¢¤ëÆâÍƤò¤´Í÷¤¯¤À¤µ¤¤¡£
¾åµ¤ÎHTMLÉôʬ¤ò¸«¤Æ¤¤¤¿¤À¤¯¤Èʬ¤«¤ë¤è¤¦¤Ë¡¢JavaScript¤¬¥ª¥Õ¤Ë¤Ê¤Ã¤Æ¤¤¤ë¾ì¹ç¤Ç¤â
²èÁü°ìÍ÷¼«ÂΤϸ«¤é¤ì¤ë¤è¤¦¤Ë¤·¤Æ¤ª¤¯¤è¤¦¤Ë¤·¤Þ¤·¤¿¡£JavaScriptŪ¤Ë¤Ï°ìÈÖ½é¤á¤Î<li>¤Î
ÆâÍƤ¬¤¢¤ì¤ÐÆ°¤¯¤è¤¦¤Ë¤Ï¤Ê¤Ã¤Æ¤Þ¤¹¡£
** ¥³¡¼¥ÉÇÛÉÛ [#da3207e6]
¥½¡¼¥¹¤Ï¡¢github¤Ç¸ø³«¤·¤Þ¤·¤¿¡£
¥é¥¤¥»¥ó¥¹¤Ï¡¢MIT License ¤Ç¤¹¡£
[[²èÁü¤Î¤¢¤ëÉôʬ¤ò¥¯¥ê¥Ã¥¯¤¹¤ë¤È¾¤Î²èÁü¤Ë¥Á¥§¥ó¥¸¤¹¤ëJavaScript¤ÎjQueryÍѥ饤¥Ö¥é¥ê:https://github.com/tiadeen2/crosslayer]]
https://github.com/tiadeen2/crosslayer
** ÍøÍÑ¥·¡¼¥ó [#k63976bd]
¤³¤ÎUI¤ò»È¤¦Îã¤È¤·¤Æ¤Ï¡¢¥¢¥¯¥»¥¹¥Þ¥Ã¥×¤Ç¹Ô¤Êý¤ÎÀâÌÀ¤ò¤¹¤ë¤È¤¤Ë¥á¥¤¥ó¼Ì¿¿¤ÎÀè¤Ë¼¡¤Î¼Ì¿¿¤¬¸«¤¨¤Æ¤Æ¡¢¥¯¥ê¥Ã¥¯¤¹¤ë¤È¤½¤³¤Þ¤Ç¿Ê¤à¡£
¥¯¥ê¥Ã¥¯¤·Â³¤±¤ë¤³¤È¤Ç²ñ¼Ò¤Ë¤Ä¤¯¡Ä¤È¤¤¤¦»È¤¤Êý¤¬¤¢¤ê¤Þ¤¹¡£
¤½¤³¤Ë¤â¤¦¾¯¤·µ¡Ç½¤òÄɲ䷤ơ¢¢¤³¤ó¤ÊÄó°Æ¤âÌÌÇò¤½¤¦¤Ç¤¹¡£
- GoogleMap ¤òɽ¼¨¤·¤Æ¡¢¥¯¥ê¥Ã¥¯¤¹¤ë¤È¥Ô¥ó¤â¤½¤Î¼Ì¿¿¤ò»£¤Ã¤¿°ÌÃ֤˰ÜÆ°¤·¤Æ¤¤¤¯
- ÀŻ߲è¤À¤±¤Ç¤Ê¤¯¥¯¥ê¥Ã¥¯¤¹¤ë¤È¼¡¤Î¥Ô¥ó¤Þ¤Ç°ÜÆ°¤¹¤ëÆ°²è¤Ëº¹¤·Âؤï¤Ã¤Æ
°ÜÆ°¤·½ª¤¨¤¿¤éÀŻ߲è¤ËÌá¤ë¢ª¼¡¤Î¼Ì¿¿¥¯¥ê¥Ã¥¯¢ªÆ°²è¢ªÀŻ߲è¡Ä¤ß¤¿¤¤¤Ê¡£
Google¤Î¥¹¥È¥ê¡¼¥È¥Ó¥å¡¼¡Ü¦Á¤ß¤¿¤¤¤Ê»È¤¤Êý¤â¤Ç¤¤½¤¦¤Ç¤¹¤Í¡£
** ºÇ¸å [#hbe9e7f9]
** ºÇ¸å¤Ë [#hbe9e7f9]
¤Ä¤¯¤ë¤Ö¤Ç½ñ¤¤¤¿¤½¤Î¾¤Îµ»ö°ìÍ÷¤Ï¢¤³¤Á¤é¤«¤é¸«¤é¤ì¤Þ¤¹¡£
[[JavaScript/¤Ä¤¯¤ë¤Öµ»ö°ìÍ÷]]
2007ǯ¡Á2008ǯ¤Î¥Í¥¿¤Ç¤¹¤¬¡¢¤è¤í¤·¤±¤ì¤Ð¤´Í÷¤¯¤À¤µ¤¤ m(_ _)m
#blikifooter(Ãݼ)
----
tag:[[JavaScript>tag/JavaScript]], [[jQuery>tag/jQuery]]