サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
アメリカ大統領選
osyu-web.com
ネットショップなどでよく見られる、複数のサムネイル画像にマウスオーバー（スマホであればタップ）するとメイン画像が切り替わるスクリプトをjQueryで用意しました。１ページ内に同じ仕組みが複数ある場合も動作するようになっています。少ないコードで可能な限りシンプルな動作になっているので、サクッと導入したい場合は是非一度使ってみてください。 DEMO どのような動きをするか見てもらうほうが早いと思いますので、プログラムの動作デモページを用意しました。下記リンク先をご確認下さい。 » 動作デモページはこちら このあとご紹介する設置方法で順番にコードをコピーするか、デモページのソースを丸々コピーして動かしてみて下さい。 設置方法jQuery本体の読み込みCDNで配布されています。下記コードをそのまま＜head＞内に記述します。 <script src="https://ajax.googleapis
使い所がかなり限られるコードですが、たとえば1ページ内に同じ要素をリストで大量に並べるときに、ユーザーに分割して見せたい場合などに使えそうなコードを共有します。 指定した要素の数ごとに少しずつ表示させます。自動で追加される「続きを読む」ボタンを押せば、分割した数ごとに順次表示されるようになります。 DEMO まず詳しい動きについては下記の動作デモページを用意しましたのでご確認ください。jQuery本体のバージョンは3.3.1を使用しているので、古いバージョンによっては動かない可能性もあります。 » 動作デモページはこちら 動作デモページではリスト要素を3件ずつ自動で分割するようになっています。このあとご紹介するコードをそれぞれ順番にコピーして、ご自分の環境に合わせて修正してみてください。（またはデモページのソースをそのままコピーしてください。） 設置方法jQuery本体の読み込みCDNで配
jquery.cookie.jsは、PHPなどの環境がなくてもcookieを取り扱うことができるとても便利なjQueryのライブラリです。今回はこちらを用い、初回アクセスの１回だけ画面全体にLightbox風のオーバレイポップアップ画面を表示させる方法をご紹介します。 ※2019.4.15 一部ご指摘を受けたためコードを修正しました。 DEMOプログラムの動作デモページを用意しました。下記リンク先をご確認下さい。 » 初回アクセスのときのみポップアップ画面を表示させるサンプル 設置方法jQuery本体・jquery.cookie.jsの読み込みどちらもCDNで配布されています。下記コードをそのまま＜head＞内に記述します。 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></sc
» Google Play バッジ – Google iOSアプリのダウンロードバナー作成方法上記のリンク先「Link Maker」で、目的のアプリを検索します。 メディアタイプの違いに注意ここでよく忘れるのが、そのまま検索すると「Apple Music」の検索になってしまうので目的のアプリが出てきません。検索する前に「メディアタイプ」の部分を「App」に変更します。 合わせて「ストア国」も「日本」に設定してから検索します。 リンク生成画面（下のコードをコピー）検索結果で目的のアプリアイコンをクリックし、少し画面下までスクロールするとボタンの生成画面が表示されます。 バッジ・テキストリンク・スモールバッジの３種類から好きなものを選択し、下のコードを表示させたいところにコピーすれば表示されます。とても簡単ですね！ Androidアプリのダウンロードバナー作成方法アプリのPlayストアURLを
このページを最初にブックマークしてみませんか？
『osyu-web.com』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
