タグ

画像に関するe_nagiのブックマーク (3)

  • 指定した背景画像をx秒毎に切り替えるjQueryプラグイン - Rewish

    img要素ではなく背景画像(background-image)を切り替えるjQueryプラグインです。 2013年7月29日にバージョン0.4.0をリリースしました。一から書きなおして、切り替え方法など色々改善しているので、良ければ使ってみてください。 ダウンロード jquery.bgswitcher.js 開発リポジトリはrewish/jquery-bgswitcher · GitHub 依存ライブラリ jQuery 1.7.x以上が必要です。 ライセンス MIT License 主な機能 エフェクト付きの背景切り替え 切り替えの制御(開始/停止/リセット) ファイル名の連番自動読み込み 画像のプリロード デモ Demo - jQuery.BgSwitcher 使用方法 <div class="box"> <p>Lorem ipsum dolor sit amet.</p> </div>

    指定した背景画像をx秒毎に切り替えるjQueryプラグイン - Rewish
  • 解像度にあわせて画像変更|向陽デジタルワークス パーツギャラリー

    その他 解像度にあわせて画像変更 解像度にあわせて画像変更 Chrome Firefox Edge IE11(一部非対応) IE9(一部非対応) iPhone(iOS6-8) iPad(iOS7) Android4.2 2017年3月31日更新 通常の画像と高解像度用の画像の表示・切り替え方法を紹介します。 <img>タグのサイズを指定する cssのbackgroundで背景にして、background-sizeを指定する cssのbackgroundで背景にして、css3のMeia Queriesでディスプレイの解像度によって切り替え <img>タグの画像をJavaScriptでディスプレイの解像度によって切り替え 同じ内容の画像で、画像サイズのみを変更(解像度の対応)するときにおすすめ! <img>タグにHTML5の「srcset」を使用して、ディスプレイの解像度やウインドウサイズによ

    解像度にあわせて画像変更|向陽デジタルワークス パーツギャラリー
  • これが新常識! レスポンシブな画像切り替え方法まとめ

    マツカワ Webサイト制作/コンテンツ企画/Web広告/SEO/マーケティングを経験してきた雑系Webクリエイター・プロデューサー プロフィール / Twitter / Facebook レスポンシブサイトでブラウザ環境に応じて画像を切り替えるには、サイトによって様々な方法で対処されていました。 これまでの方法が抱えていたデメリットと現在(これから)の標準となる実装方法、レガシーなブラウザへの対応方法など、レスポンシブな画像切り替えに必要な知識をまとめました。 これまでのレスポンシブイメージの問題点 レスポンシブサイトの画像切り替えは、CSSで表示・非表示を切り替えたり、JavaScriptでブラウザ環境を判別して画像を出し分けると言った手法が一般的でした。 たしかに、これらの方法でも意図したように画像を表示することはできるのですが、理想的な解決策ではありません。 具体的には次のような問

    これが新常識! レスポンシブな画像切り替え方法まとめ
  • 1