【jQuery】ウェブページの背景全面で動画を再生する［Vide］の使い方
ここで紹介する［Vide］は、ウェブページの背景全面で動画を再生するjQueryプラグインです。 まずはサンプルをご覧ください。 ［Vide］：サンプル・サイト 使用するプラグインのダウンロードは以下、公式サイトからどうぞ。 ［Vide］：公式サイト 準備として、動画ファイルをサーバー上の任意の場所に設置しておきます。 なお、動画ファイルの形式は「.mp4」をメインにして、他に「.ogv」と「.webm」形式も用意しておくと、ほぼすべてのブラウザに対応できます。 またムービーが読み込まれるまでの間に静止画を表示させておくこともできますが、この場合は同じフォルダ内に「.png」形式の同名の画像ファイルを用意しておくとプラグイン側で自動的に読み込んでくれる仕様になっています。 もし「.png」の画像が存在しない場合、続いて「.jpg」「.gif」の画像ファイルを検出します。 ここでは仮に、ルー
【jQuery】超万能スライダー FlexSlider の使い方をマスターする。 - ONZE
今日紹介するのは jQuery プラグインの［FlexSlider］です。 これ、かなり便利です。 レスポンシヴ対応、タッチコントロールのフリックスライドにも反応、カルーセルもＯＫ、画像にリンクを貼ることはもちろん、キャプションも表示可能、動画もスライドできる、コントロールボタンやナヴィゲーションも細かく設定できる…。まさに“超万能”のスライダー。 とにかく「なんでもできる」印象で、スマートフォン対応サイトなどでは特に真価を発揮するのではないでしょうか。 まずはサンプルをご覧ください。 【FlexSlider】→サンプルデモ 高機能ですが、その導入方法は比較的簡単です。 ［FlexSlider］の導入方法まずは以下のサイトから［FlexSlider］のプラグイン本体をダウンロードします。 http://flexslider.woothemes.com 続いて <head>〜</head>
誰でも出来る！プラグインを使わずにjQueryで実装するタブ切り替え機能！
こんにちは、ミキです。 今回はアウトプットの場として、 最近プラグインを使わずに実装した タブ切り替え機能の紹介をしたいと思います。 HTML まずタブとタブに連動したコンテンツのHTMLを用意します。 一番目のタブに「class=”select”」をつけます。 最初に表示させないコンテンツにはあらかじめ「display:none;」を設定しますので、 ここでは「class=”hide”」をつけました。 ちなみにダミーテキストは夏目漱石の坊っちゃんからです。 <ul class="tab"> <li class="select">タブ1</li> <li>タブ2</li> <li>タブ3</li> <li>タブ4</li> </ul> <ul class="content"> <li>親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かし
レスポンシブなコンテンツスライダー「FLEXSLIDER」jQueryプラグインの使い方とサンプル
FLEXSLIDERは、レスポンシブなコンテンツスライダーjQueryプラグインです。オプションの指定で縦方向へのスライドやマウスホイールでスライドするようにもできます。 オプションが沢山用意されているので、色々な表示の仕方ができそうです。ブラウザはSafari 4、Chromeの4 +、Firefox 3.6 +、Operaは10 +、IE7 +。 iOSとAndroidデバイスがサポートされているようです。 IE6で表示確認しようとしたら永遠に読み込みが終わらなくて、エラーで終了という形になりました。IE6だとページが全く見れなくなってしまうようです。（Adobe BrowserLabとIETSTERで確認しました。） ダウンロードとデモ デモとダウンロード→FlexSlider – The Best Responsive jQuery Slider ダウンロードできるファイルにデモフ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
