breakpoints.jsを使用したレスポンシブでの画像切り替え
Posted: 2013.07.30 / Category: javascript / Tag: jQuery PCは横長なので画像も横長に作成することが多いですね。しかし、レスポンシブでスマートフォンに対応した場合は、横長画像だとよくわからなくなってしまいます。 「breakpoints.js」を使用すれば割りとお手軽にPC用とスマホ用の画像を切替えできますよ。 ベースのimgを置き換える方法 htmlではPC用の画像を配置して、クラスを「sp-img」としておきます。 html <img src="img/image-pc.png" class="sp-img"> 「640」をブレークポイントにしますので「breakpoints」オプションに[ 1, 640 ]と指定します。 また、ブレークポイントの数だけ「$(window).bind」の部分を追加します。 javascript <s
画像にモザイク処理をかけられるjQueryプラグイン「pixelate.js」:phpspot開発日誌
43081j/pixelate.js 画像にモザイク処理をかけられるjQueryプラグイン「pixelate.js」 Photoshopでモザイク処理をいれなくても元画像にJSでモザイク処理をかけられます $('img#myimage').pixelate({ value: 0.5, reveal: false }); のような感じで初期化してあげればモザイク処理が可能 デモページ 関連エントリ 複数の画像を組み合わせて3Dっぽく回転できる「jQuery Interactive 3D」 コンテナに画像をフィットさせられるjQueryプラグイン「imagefill.js」 画像のレイアウトに使えるjQueryプラグイン「jQuery Photoset Grid」 画像のdiffができるjQueryプラグイン「TwentyTwenty」
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
画像を使ったいろいろなjQueryプラグイン224個まとめ( 200+ collection of jQuery for images ) – かちびと.net
