タグ

ブックマーク / black-flag.net (2)

  • jQueryで画像などを自動でスライドするサムネイル付きコンテンツスライダーをシンプルに作成する方法|BLACKFLAG

    先日、とある案件で必要になり、jQueryを使って作成した、 コンテンツ要素を自動でスライドさせるサムネイル要素付きのスライダーが 今後も他でいろいろ使いまわせそうだったので、ここでも軽くスクリプトを紹介してみます。 まずは動作のサンプルから。 指定した間隔(時間)で一つずつ画像(コンテンツ要素)がスライドします。 スライド箇所の下にサムネイルを配置し、マウスオーバーすることで 該当箇所へ任意にスライドさせることができます。 サムネイル部分にマウスオーバーしている間は、 メイン部分の自動スライドの動作は停止します。 この動作の全体構成について、 HTMLから。 ◆HTML <div id="slider_main"> <ul> <li><img src="img/photo01.jpg" width="400" height="300" alt="" /></li> <li><img sr

    jQueryで画像などを自動でスライドするサムネイル付きコンテンツスライダーをシンプルに作成する方法|BLACKFLAG
  • CSSのopacityで透明度/透過度を指定する方法|BLACKFLAG

    今さらながら、Webページ内の要素に対して、要素の透明度/透過度をCSSのみで指定する方法について。 久々にCSSのみで透明度の指定が必要になる場面があったのですが、記述方法をすっかり忘れていたのでここにメモとして残しておきます。 CSSで透明度を指定するには「opacity」というプロパティを使用しますが、ブラウザによって記述が変わるので下記の様な形になります。 ◆CSS div { filter:alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; } 『filter:alpha(opacity=50);』 これはIE向けの指定。 “50”というのは透明度が“50%”ということ。 透過無しの状態“100%”を指定する際は「filter:alpha(opacity=100);」。 『-moz-opacity: 0.5;』 これはFiref

    CSSのopacityで透明度/透過度を指定する方法|BLACKFLAG
  • 1