タグ

jQueryに関するtech_labo00のブックマーク (185)

  • レスポンシブWebデザインでテーブルを使う時の小技

    tableやtr、tdなどのテーブル関連のタグのdsiplayプロパティを変更することでデザインを変更します。 tableタグのdisplayの値はデフォルトではtable、tdやthタグはtable-cellといった具合ですが、この値をblockやlist-itemなど他の値に変えます。 @media only screen and (max-width:420px){ tbody tr{ display: block; margin-bottom: 1.5em; } tbody th, tbody td{ display: list-item; border: none; } ..... } Chrome、Safari、Firefox対応。 IEではTableのdisplayを変更しても表示は変わらないようなので非対応です。 条件分岐コメントを使ってIEにはメディアクエリを読ませないよ

    レスポンシブWebデザインでテーブルを使う時の小技
  • [jQuery] ローディングのクルクルを瞬殺で実装する【2019】

    2019.3.29 更新 この記事を書いてから数年経ち、今ではもっとカンタンに実装できる方法がたくさん出ています。 今回はJSとCSSをCDN(ファイルをサーバーにアップしなくても、コードを書くだけでプラグインを実装できる方法)で読み込むだけでカンタンにこんなものも実装できます!というご紹介を追加します。 サンプル PACE.js プラグインを読み込む PACE — Automatic page load progress bars このプラグインを使ってカンタンなページローディングを実装してみます。 CDN一覧のページから、JSのコードをコピーします。 pace – cdnjs.com – The best FOSS CDN for web related libraries to speed up your websites! 「https://〜〜pace.min.js」と書かれてい

    [jQuery] ローディングのクルクルを瞬殺で実装する【2019】
  • CSS3による多層グラデーションを使った背景を作れるjQueryプラグイン・SHARDS

    ちょっと面白かったので備忘録。CSS3で多層グラデーションの背景を手軽に作れる、というスクリプト。jQueryに依存します。レイヤーはランダムに組まれるみたいですね。 多層グラデーションな背景を作れる、というもの。用途は限られそうですけど、なかなか素敵な感じ。 こういう背景を色を指定してランダムに作成出来ます。 以下サンプルです。 Sample リロードする度に異なったグラデーションが作られます。 コード<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> <script src="shards.min.js"></script>体とプラグインを読み込む・・・のですが、1.9だと動かないっぽい? $('#foobar').shards( [239,199,222,.

    CSS3による多層グラデーションを使った背景を作れるjQueryプラグイン・SHARDS
  • CSS と jQuery で作るスクロールにあわせて回転するロゴ

    Tumblr のスタッフ Blog を見てたら、ロゴ (正確にはロゴの周囲の部分) がスクロールにあわせて回転してて、ちょっと面白かったのでサンプルを使って実際にどういう風に実装されているかを解説してみようと思います。 結構仕組みは簡単で、jQuery の scrollTop() を使ってスクロール位置を取得し、その値を CSS の transform プロパティに都度突っ込んでいくっていう感じ。ソースコード自体は数行で実装できます。 まずは実際に動作するサンプルを下記に。 スクロールにあわせて CSS で回転するロゴのサンプル 画面をスクロールすると、ロゴが回転すると思います。わかりやすいようにロゴはスクロールに対して位置固定しています。ロゴの内容は個人的趣味によるものですので深い意味はありません... わかる人にはわかると思う。 なお、サンプルは transform プロパティを使用し

    CSS と jQuery で作るスクロールにあわせて回転するロゴ
  • jquery小技まとめ32

    作成:2013/07/1 更新:2014/11/01 Web制作 > 先日ECサイトを制作したときに、動きのあるサイトにしないといけなかったので、色々調べて組み込んでみたんですが、jQueryでもう何でも出来ちゃいますね。近い将来ローカルで画像なんかを編集しなくても、ブラウザだけで色々できるようになるんじゃないでしょうか。今回は定番からちょっとマイナー(Google Analytics関係とか)なものまでjQueryの小技、プラグインを集めさせていただきました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ スクロール 1.ページ内リンク/フッターまわり/トップに戻る 2.パララックス スライド 3.カルーセル 4.レスポンシブなスライダー 5.ヌルヌルサクサクなスライドメニュー 6.サムネイル付きクロスフェードスライドショー 補助 7.Google Ana

    jquery小技まとめ32
  • プラグインに頼らず自力でjQueryのスライドショーを作る方法(はじめてのスライドショー作成編) | WEB-LABO

    スライドショーの考え方 まず、最初に1枚目の画像を表示しておいて、1枚目を非表示にすると同時に2枚目を表示する。次に2枚目を非表示にすると同時に3枚目を表示する。3枚目を非表示にすると同時に1枚目を表示する。 今回は、制御構造を分かりやすくするために、フラグ用の変数を使い処理を分岐しています。具体的には変数flgの値が1の時は、1枚目の画像を表示する。flgの値が2の時は2枚目の画像を表示する。flgの値が3の時は3枚目を表示するといった具合です。 画像を切り替えた後に、flgを+1することで次の画像が表示できます。スライドショーに使う画像が3枚の場合は、flgの値が3を超えたときに1に戻します。あとは、これの繰り返しです。切り替えるタイミングの制御にはタイマーを使います。 【ステップ1】fadeIn()、fadeOut()を使用する fadeIn()、fadeOut()を使って画像を切り

  • 話題のサークルデザイン|展開可能なソーシャルボタンをjQueryで実装できる「ClassySocial」

    スマートフォン用に作られたアプリのうち、今年はサークルが広まっています。 同時にフラットデザインなんかと併用して使われることがあり、今回はこうしたサークルデザインのアクセントとして使うことが出来るサークルボタンをご紹介致します。 これはjQueryを利用して、比較的簡単に設置出来るのが利点です。 以下からダウンロード可能。 ClassySocial | Class.PM とりあえずイメージとしては以下の様な。 中心から周りに展開。 ボタンから右へ展開。 今回の紹介されているものは、ソーシャルボタンですが、使い道はいろいろですね。 設置 jQueryお決まりのコレ。<head></head>内に記述。 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 続いて、CSS

    話題のサークルデザイン|展開可能なソーシャルボタンをjQueryで実装できる「ClassySocial」
  • いろんなセレクタ指定方法+α

    ずいぶん以前にセレクタについて書いたのですが、今回はセレクタの種類を抜粋して、記述例と説明書きにまとめてました。「セレクタとは?」という方は、まず下記記事を読んでみて下さい。 jQueryを使ってみよう。(基編 セレクタ1) +αというのはトラバース(走査)系のメソッドです。「この要素を抜き出したい!」と思ったときにセレクタだけでは抜き出しにくい場合があります。そういうときにトラバース(走査)系のメソッドを使うと、簡単にできたりするので覚えておくと便利なものです。 「こういう書き方をすると、こういう要素が選択される」という例で説明を添えていますが、数が多いので説明書きは、ほんとうに添えた程度です。説明だけではわかりにくいと思うので動作サンプルを用意しました。動作サンプルを眺めながら、ちらっと説明書きをチェックしてもらえれば「なるほど!」となるはず。。。ご利用ください。 jQuery セレ

  • Selectors - jQuery 1.3.2 日本語リファレンス

    Selectors/API/jQuery 基 #id 指定されたidを持つ要素を選択する。 element 指定されたタグ名の要素を選択する。 .class 指定されたクラスを持つ要素を選択する。 * 全ての要素を選択する。 selector1, selector2, ..., selectorN 複数のセレクターを指定して集合要素を選択する。 階層 ancestor descendant ancestorを先祖に持つdescendantを選択する。 parent > child 親子関係を指定して要素を選択する。 prev + next 前後関係を指定して要素を選択する。 prev ~ siblings prev以降の兄弟関係にある要素を選択する。 基フィルタ :first 先頭の要素を選択する。 :last 末尾の要素を選択する。 :not(selector) 指定したセレクターを

  • jQueryのセレクタ解説 - jQuery入門 - [SMART]

    jQueryには任意の範囲、要素を指定するためのセレクタと呼ばれる機能が用意されています。 たとえば、BODY要素内にあるすべての画像にアクセスしたい場合は下記のようにセレクタを指定します。 $("img") 例えば、IMG要素のボーダーを3ピクセルの赤に設定するには次のようにします。 $("img").css("border","3px solid red"); セレクタで対象を指定し、cssというメソッドでボーダー属性の値を設定しています。 セレクタは要素名以外にも、ID名やCLASS名を指定することができます。 たとえば、BODY要素内にあるすべての画像にアクセスしたい場合は下記のようにセレクタを指定します。 $("img.photo") IMG要素で、かつID名が photo01 の要素を指定するには、次のようにシャープの後にID名を指定します。 $("img#photo01")

    jQueryのセレクタ解説 - jQuery入門 - [SMART]
  • ページ遷移なしで原寸大画像を表示するhighslide.jsのスマート具合に惚れた | Web制作しようとしてるMAKAP

    ホームページに載せる画像の拡大版、どう表示させてますか? 基的にページ遷移が嫌いな私はブログの「続き」や画像の拡大のためだけにページ遷移させられるのがどうにもイヤなのです。 最近よく見るのはライトボックスですね。 でもこれもあまり好きじゃないです。なんかいちいち画面暗転されてもうっとうしくないですか?そんなことないですか。そうですか(´・ω・`) 個人的に画像拡大の条件。それは、 ページ遷移なし 早い ムダのない動き どこをクリックしても消せる です。ライトボックスは2と3がちょっと…。で、この条件を満たしたのが Fancy Box だったんです。 「おい、どこが早いんだよ」と思ったあなたのお使いのブラウザはInternetExplorerではないでしょうか? そう。このプラグイン、モダンブラウザではシャカシャカ動くんですが、なぜかIEではめちゃくちゃノロイのです。これはIEの呪いです 

  • 画像を使ったいろいろなjQueryプラグイン224個まとめ - かちびと.net

    画像にエフェクトをかけて拡大表示したり、スライドを作ったり、ツールチップで表示したり、というような画像を使用したjQueryプラグインが沢山あるのと、探してる方が直ぐに見つけられるように、という事でリンク集を作りました。 という訳で、集まっているjQueryのプラグインの共通点は画像を使っている、という事だけです。一貫性無いといえば無いですが、個人的にも必要とする事が多いので自分用のメモも兼ねてシェア。 日語 English 結構カテゴリ分けはいい加減かもしれませんのであしからずご了承下さい。画像じゃなくてもいいんじゃ・・みたいのもありますが、デモで画像を使ってる、画像と相性が良さそう、みたいなものは基的に掲載しています。 リンクにマウス乗せればキャプチャが出ます。 Lightbox Lightbox風に画像を表現できるjQueryいろいろ Lightbox2 / ベーシックなタイプ。

    画像を使ったいろいろなjQueryプラグイン224個まとめ - かちびと.net
  • tips! | Greasemonkeyを使わずにTumblrでオートページャー、他

    すごく今更感 無限スクロール、底なし、ページ自動送り、Infinite Scrollなど呼び方は様々ですが twitterやTumblrのダッシュボードのようにどんどんページを読み込めるようTumblelogへ実装します。 例えばFirefoxではGreasemonkeyを使って同じようなことが可能ですよね。 テーマによっては同様の機能がカスタマイズオプションで実装されてます。 例:Sleekmark、Effector Theme、Natural Elegance これができるjQueryプラグインの紹介と、 とにかく有名だと思われる楽々実装可能なスクリプト<tumblrAutoPager>について諸々メモと、 逆にページ最上部へ戻ってみようというカスタマイズ。 【目次】ページ自動送りができるjQueryプラグイン&スクリプトHTMLに一行追加 <tumblrAutoPager>tumbl

    tips! | Greasemonkeyを使わずにTumblrでオートページャー、他
  • スクロールに合わせてコンテンツの読み込みを開始するjQueryプラグイン「Autobrowse jQuery plugin」|BLACKFLAG

    2011/03/11の「東北地方太平洋沖地震」震災後、しばらく更新が滞っていましたが、少しずつ再開してみようかと思います。 Twitterなどで見かけるページの最下部までスクロールすると続きのコンテンツを読み込む動作を、jQueryで可能とするプラグイン「Autobrowse jQuery plugin」が、ちょっと気になっていたのでメモ書き程度に紹介してみます。 ≫jquery.esn.autobrowse.js 上記チュートリアルページでデモが確認できますが、サンプルではページロード時に決まった数(20個)の画像を先に読み込んでおいて、ページをスクロールするとさらに20個ずつ画像を読み込み、100個まで表示した時点で動作をストップさせています。 使い方もさほど難しくなく、プラグインファイルと下記の実行用スクリプトにて実装が可能なようです。 ◆SCRIPT $(".page").auto

    スクロールに合わせてコンテンツの読み込みを開始するjQueryプラグイン「Autobrowse jQuery plugin」|BLACKFLAG
  • jQueryゼロから / オートロード(スクロールすると次のページを自動読み込み) | ゆるぶ | ページ 513

    画面下までスクロールすると次のページを読み込んでくれるヤツですね。 イロイロ見てると次のような考え方みたいす。 対象コンテンツの下端の位置座標が表示エリア(ウィンドウ下端)に近づいたら、続きを読み込みます。これを、ウィンドウをスクロールした時にチェック。 まず、コンテンツの下端の位置座標を求める。対象エリアの id 属性が target なら、以下。

    jQueryゼロから / オートロード(スクロールすると次のページを自動読み込み) | ゆるぶ | ページ 513
  • TwitterやFacebookのように一番下までスクロールしたら自動的にコンテンツを表示する「jQuery.Bottomプラグイン」

    TwitterのタイムラインやFacebookのニュースフィードように、ページの一番下までスクロールしたらコンテンツを自動的に表示する「jQuery.Bottomプラグイン」を紹介します。 1.サンプル jQuery.Bottomプラグインにはデモページが用意されていますが、いまいちなのでサンプルページを作りました。 jQuery.Bottomプラグインサンプル ページの一番下までスクロールすると自動的にコンテンツを表示します。 なお、最初に表示した状態でコンテンツがすべて表示されてしまっているとそもそも動作しないので注意してください。 2.プラグインの機能 jQuery.Bottomプラグインは「bottom」イベントを登録するためのものです。このイベントを利用してページの一番下までスクロールすれば、bottomイベントが発生します。 3.プラグインのダウンロード githubのjQue

    TwitterやFacebookのように一番下までスクロールしたら自動的にコンテンツを表示する「jQuery.Bottomプラグイン」
  • ブロック要素の高さを行毎にあわせるjQueryプラグインを習作する - Mach3.laBlog

    この記事は賞味期限切れです。(更新から1年が経過しています) 既知の類似プラグインは多数あるこの課題ですが、ちょっと習作してみました。 横並びにレイアウトされたブロック要素の高さを揃えるライブラリです。 なにをしたいのか 例えば、フロートなどで横並びにした要素があって、それぞれの高さを揃えたい時があります。 こんな感じに。この処理をしてくれるライブラリを書いてみます。 書いてみた物 jQuery.lineUp 使い方 例えばこんな要素があるとして <div class="items"> <!-- 異なるコンテンツ量のブロック達 --> <div class="item">...</div> <div class="item">...</div> <div class="item">...</div> <div class="item">...</div> <div class="item"

    ブロック要素の高さを行毎にあわせるjQueryプラグインを習作する - Mach3.laBlog
  • マウスオーバーした画像にフェードイン効果(半透明)をつけるjquery - WEBデザインを学ぶ|こゆきんのWEBの細道

    ポートフォリオで使用した、画像をマウスオーバーすると、半透明にフェードインして行くjqueryを備忘録用に記録。 このリンク部分で使用しました。 http://webdesign7.main.jp/portfolio/ CSSで半透明効果を出す方法 しかし、徐々に透明になるふわっとした感じは出ない様です。 a:hover img{ opacity:0.6; filter: alpha(opacity=60); } jqueryで、マウスオーバーしたら透明度を変える方法 1:最初にheaderに,jQuery体を読み込む <script type="text/javascript" src="js/jquery.js"></script> 2:Queryの処理を記述する $(document).ready( function(){ $("#gallery img").hover(funct

    マウスオーバーした画像にフェードイン効果(半透明)をつけるjquery - WEBデザインを学ぶ|こゆきんのWEBの細道
  • [jQuery]透過PNGに対応したクロスフェードボタン – smoothRollOver.jsロールオーバーすると滑らかに画像が切り替わるライブラリ | レポート | 日本電子工藝社

    ロールオーバーすると滑らかに画像が切り替わるライブラリ ボタン・リンクのロールオーバー効果を表現する際、CSSJavaScriptによる画像の切り替えだけでは物足りない時があります。ロールオーバー時のデザインを活かすため、ボタンにロールオーバーすると滑らかに画像が切り替わるライブラリを作成しました。みなさまのデザイン表現の幅を広げるお手伝いができれば幸いです。(※個人利用・商用利用を問わず自由にご利用いただけますが、自己責任の上でご使用ください。) 動作サンプル このライブラリは、JPEG・GIF・透過PNGに対応しています。 JPEG/GIFの場合 透過PNGの場合 InternetExplorer6~8のPNG対応について InternetExplorerは、バージョン6までは透過PNG自体に対応しておらず、7・8になってもフェードイン表現の際に透過部分がギザギザになってしまう仕様で

  • jquery.fadeMover - Fadein and Fadeout for jQuery

     jquery.fadeMoverはページの遷移時にフェードアウト、フェードイン効果をだすためのjQueryプラグインです。 Overview 指定された要素をフェードインしながら表示し、<a>タグをクリックしてページを移動する場合にフェードアウトしてから移動します。 <a href="#top">など、ページ内リンクの指定をしている<a>タグはフェードアウト動作禁止にしています。 [2012-08-28] 「nofadeOut」で複数classの指定がある場合動作するように修正しました。(hasClassでチェック)。あとファイルを直接ダウンロードするように修正しました。 [2012-02-16] 以前作成していたものに少し手を加え、要素を順番にフェードアウト、フェードインさせるオプション「inDelay」「outDelay」もつけました。フォトギャラリー等で少し変わった動きがほしい場