サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
アメリカ大統領選
studio-benkei.com
[jQuery]audio要素とjQueryと画像を使ってオーディオの再生・停止 2016/05/21 最近の案件で、サイト上で音楽を流したいという要望がありましたので、jQueryを使って自分なりに調べて作ってみました。 本当はmp3以外にもoggやwavファイルもある方が良いようですが、最新のブラウザだとどのブラウザでも大丈夫そうだったので、mp3だけにしてます^^; サンプル ※画像をクリックすると音がなります。 再生・停止 設置方法 最初にボタンになるタグに「clicked」とクラス名をつけています。ボタンをクリックすると「clicked」のクラス名があれば、削除して、play()メソッドで音楽が再生され、「clicked」のクラス名がなければ、「clicked」のクラス名を付けて、pause()メソッドで停止するようにしています。 同時にcssで「soundBtn」のbackgr
便利なプラグインを発見しましたー^^ 異なるサイズでも指定したサイズにフィットしてくれるjQueryプラグインの紹介です。 この手のプラグインは以前から探していまして、 先日はMyThumbnailを使って美容院のスタイルカタログのページを作りました。 他にはNailThumbなんかもありますが、 今回のはなかなか使い勝手がよさそうなので、練習がてらにメモしておきます。 ■サンプル 本家デモページ ■必要ファイル jQuery jquery.imagefit.js – GitHub ■まずはサンプルを作ってみました！ サイズの違う画像ですが、ちゃんとcssで指定したサイズに変更されてますね～^^ このサイト重いですから…ちゃんと表示されてないかも…^^; ■設置方法 jQueryとjquery.imagefit.jsを読み込みます。 html <script src='http://cod
最近注文が増えてきたレスポンシブ対応。 ナビゲーションをどう対応するかよく迷います…。 そんなレスポンシブ用ナビゲーションメニューの選択肢の一つとして、簡単に実装できるNaverの紹介です。 ■必要ファイル jQuery Naver – GitHub ■サンプル ウインドウを縮めるとメニューが閉じられます。 今回のサンプルで使用しているナビゲーションのHTMLです。 html <nav id="navre"> <a href="#">home</a> <a href="#">facebook</a> <a href="#">twitter</a> <a href="#">g+</a> <a href="#">rss</a> <a href="#">Contact</a> </nav> ナビゲーションメニューにスタイルを入れます。 メディアクエリを使って幅が740px以下の時にフロートを解除
トップページ jQuery [jQuery]スライドショー可能！背景に画像をフルスクリーンで表示させるjqueryプラグイン – MaxImage2 [jQuery]スライドショー可能！背景に画像をフルスクリーンで表示させるjqueryプラグイン – MaxImage2 2013/08/29 新しいネタでもないですが、最近よく使うのでご紹介。背景に画像を表示させるプラグインは沢山ありますが、 5つぐらい試して、MaxImageに落ち着きました。 ■サンプル サンプル サンプル – 背景スライドショー 本家デモページ ■必要ファイル jQuery MaxImage – GitHub ■設置方法(スライドショー無し) cssファイルを読み込みます <link rel="stylesheet" href="/css/jquery.maximage.css" type="text/css" med
[WordPress]アイキャッチ画像の設定方法と複数のサイズを用意する方法 2013/02/14 WordPressを使ったサイト作りで、この機能を使っていないサイトはないのではないでしょうか。というぐらいよく使われる機能ですね。 ブログ記事や商品などの一覧ページや、FaceBookなどのSNS用のサムネイル画像など、用途が多く設定も簡単なので使いやすい！ そんなアイキャッチ画像の設定方法と複数のサイズを用意する方法です。 アイキャッチ画像の設定はfunctions.phpに下記を記述します。 ▼functions.php <?php add_theme_support( 'post-thumbnails' );?> 投稿画面にこんな感じで表示されます。 これだけでもいいのですが、クライアントに渡すときは「アイキャッチ」と言われてもわからない方もいますので、アイキャッチの説明を追加します
このサイトでも使用している、ページをスクロールして下へ移動すると、 右下にスーッと出現するボタンの実装方法です。 そのボタンをクリックするとページのトップまでスクロールしながら移動します。 ■必要ファイル jQuery scrolltopcontrol.js scrolltopcontrol.jsを開くと、12行目あたりに画像を指定しているパスが書いてあるので、 そちらを使用する画像のパスに変更します。
TransitionManagerクラスを利用すると読み込んだ画像に映像効果を付けて表示することができます。 映像効果を付けるためのステートメントはTransitionManager.start();を実行する1行だけなので、とても簡単です。 ただし、映像効果を付けるためには、TransitionManagerクラスのstart()の第一引数には、MovieClipインスタンスを指定する必要があるため、 サンプルでは、空のMovieClipインスタンスimgHolderを作り、このimgHolderのLoaderクラスのインスタンスimgLoaderをaddChildしています。 また今回は様々なエフェクトを紹介するのに、下記のImageLoaderクラスを継承したサブクラスでonLoaded()を再定義するオーバーライドという手法を利用しています。 ImageLoader.as▼
DOMを使用する コンテンツの表示、非表示 マウスオーバーで写真やテキストが入れかわる 文字の拡大、縮小 ロールオーバー JavaScriptを使ったフォームチェック （DOMは使っていません・・・。） jqueryを使用する jqueryを使ったフェイドイン、フェイドアウト コンテンツの表示、非表示 テキストリンクをアニメーションでスムーズにスライドさせるスクリプト コンテンツをスムーズなアニメーションで開閉するスクリプト jqueryベースのJSライブラリの紹介 フィールド間を自動でタブ移動してくれる入力補助 - Autotab パズルゲーム - jqPuzzle パネルがスムーズにスライドするスクリプト - Accessible News Slider jQueryでiGoogle風のインターフェイス - inettuts フラッシュのようにダイナミックに切り替えるスクリプト - s
Cyokodog::DiaryさんのエントリーでIE6 position:fixed の諸問題を解決するJSが紹介されていました。 これは便利です。管理人も早速使用しています。 使い方 まずはjquery.jsとexfixed.jsをダウンロードし下記順で読み込みます。 jquery.js exfixed.js <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="exfixed.js"></script> 下記のようにfixedのCSS定義をし、対象要素に対しexFixed()メソッドを実行するだけでOKです。 <style> #sample{ position:fixed; width:40%; height:40%; right:10%; bottom
外部イメージファイルの読み込み方法を紹介します。 外部ファイルのswf、jpg、png、gifを読み込んで再生表示することができます。 これらの外部ファイルの読み込みにはLoaderクラスを使用します。 ImageLoader.as▼ package { import flash.display.DisplayObjectContainer; import flash.display.Loader; import flash.net.URLRequest; public class ImageLoader { //コンストラクタ function ImageLoader(container:DisplayObjectContainer,url:String,x:Number,y:Number) { //loader作成 var imgLoader:Loader = new Loader(
TransitionManagerクラスを利用すると読み込んだ画像に映像効果を付けて表示することができます。映像効果を付けるためのステートメントはTransitionManager.start();を実行する1行だけなので、とても簡単です。 続きを読む » AS3 エフェクトを使って外部イメージファイルの読み込み »
[Lightbox]や[ThickBox]などと同等の機能を持ち、 角丸でカスタマイズにも柔軟なLightviewの紹介です。 当サイトの写真展示ページでも使用しています。 実装に必要な素材 prototype.jsとscriptaculous.jsは最新のものをGoogle AJAX Librariesを使って読み込む方法もあります。 Prototype.js → ダウンロードページ scriptaculous.js → ダウンロードページ lightview.js → ダウンロードページ 設定 ▼ 文章型宣言はXHTML 1.0 Transitionalにした方が良さそうです。 私の場合、XHTML 1.0 Strictに設定するとIE7とIE8で角丸が消えていました。 XML宣言もしない方が良いかもしれません・・・。試してませんが・・・。 <!DOCTYPE html PUB
このページを最初にブックマークしてみませんか？
『STUDIO BENKEI』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
