mixiのFlash広告、こういうの流行ってるのかねぇ

2009年12月2日

カテゴリー: Flash — admin @ 12:41 AM

これこれ。またmixiのあしあとページのFlash広告。
流行ってるのかねぇ、こういう見せ方。

google_ad

クリックでくるくるコンテンツが変わるJavaScript

2009年12月1日

カテゴリー: JavaScript — admin @ 11:25 AM

久しぶりにJavaScript書いた。最近はもっぱらRubyばかり。
けっこうよく使ったりするので、メモっとく。いつもソースを残しておかないからゼロから作り直すのめんどくさい。

▽完成イメージ（ソースコピペで動作確認してください。）
kurukuru

HTMLはこんな感じ。displayの、noneとblockを切り替えるだけ。

PLAIN TEXT
HTML:
  1. <div id="col_1" class="colDes">コンテンツ1だよー</div>
  2. <div id="col_2" class="colDes" style="display:none;">コンテンツ2だよー</div>
  3. <div id="col_3" class="colDes" style="display:none;">コンテンツ3だよー</div>
  4. <div id="col_4" class="colDes" style="display:none;">コンテンツ4だよー</div>
  5. <div id="col_5" class="colDes" style="display:none;">コンテンツ5だよー</div>
  6. <div id="col_6" class="colDes" style="display:none;">コンテンツ6だよー</div>
  7.  
  9. <span id="to_back">戻る</span>
  10. <span id="to_next">次へ</span>
  11. </div>

CSSは、とりあえず動きがわかりやすいようにやっつけ。

PLAIN TEXT
CSS:
  1. #to_next,#to_back {
  2.     cursor: pointer;
  3.     font-size: 200%;
  4. }
  5. #to_next {
  6.     margin-left: 20px;
  7. }
  8. .colDes {
  9.     background: #eee;
  10.     width: 400px;
  11.     height: 300px;
  12. }

JSもシンプルだね。

PLAIN TEXT
JavaScript:
  1. (function(){
  2.     var col = [];
  3.     for( var i = 0; i <6; i++ )
  4.     {
  5.         col[i] = document.getElementById( 'col_' + (i+1) );
  6.     }
  7.     var to_next = document.getElementById('to_next');
  8.     var to_back = document.getElementById('to_back');
  9.  
  10.     var elm = function(arg)
  11.     {
  12.         for( var i = 0; i <col.length; i++ ){
  13.             col[i].style.display = 'none';
  14.         }
  15.         return col[arg].style.display = 'block';
  16.     }
  17.  
  18.     var i = 0;
  19.     to_next.onclick = function()
  20.     {
  21.         if( col.length> 0 ){
  22.             if( i <col.length - 1 ){
  23.                 i++;
  24.                 elm(i);
  25.             }
  26.         }
  27.     }
  28.     to_back.onclick = function()
  29.     {
  30.         if( col.length> 0 ){
  31.             if( i == 0 ){
  32.                 i = 0;
  33.                 elm(i);
  34.             }
  35.             else{
  36.                 i--;
  37.                 elm(i);
  38.             }
  39.         }
  40.     }
  41. })();

応用すればAjaxで本とか作れるね！