エセプログラマーの戯言

プログラムやリナックスなどについてのメモです

全体表示

[ リスト ]

Webページ上で、画像をMac OSXのDockみたいな感じで表示したいと思い、検索してみたら良いのがありました。


マウスを当てると当てられたものが拡大するのはもちろん、その左右にあるアイコンも若干ズーミングする。ズームの幅を大きくすると、より効果的になるだろう。クリックした後のアクションは各画像ごとに定義できる。

使い方

このライブラリを読み込んで、表示したいところに、以下を追加
<div id="dock"></div>

んで、次のような感じで、表示する画像を定義する。
<script type="text/javascript" >
  var dock = new MacStyleDock(
      document.getElementById('dock'),
      [
        {
          name      : 'sample-0-',
          extension : '.jpg',
          sizes     : [32, 64],
          onclick   : function(){
                        alert('You clicked on the first icon');
                      }
        },
        {
          name      : 'sample-1-',
          extension : '.jpg',
          sizes     : [32, 64],
          onclick   : function(){
                        alert('You clicked on the second icon');
                      }
        }
      ],
      32,
      64,
      2);
</script>
ここで、nameには、その画像名の基本となる部分(?)が入る。
用意する画像は、
<基本画像名><大きさ>.<拡張子>
<基本画像名><大きさ(最大)>-full.<拡張子>
<基本画像名><大きさ>-reflection.<拡張子>

上の例だと
本体部分
sample-0-32.jpg
sample-0-64.jpg
sample-0-64-full.jpg
sample-1-32.jpg
sample-1-64.jpg
sample-1-64-full.jpg

下の反射部分
sample-0-32-reflection.jpg
sample-0-64-reflection.jpg
sample-1-32-reflection.jpg
sample-1-64-reflection.jpg

.


プライバシー -  利用規約 -  メディアステートメント -  ガイドライン -  順守事項 -  ご意見・ご要望 -  ヘルプ・お問い合わせ

Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved.

みんなの更新記事