jQueryで要素をシャッフルするプラグイン「jQuery Shuffle Plugin」 | Web活メモ帳
ランダムに要素を並び替える バナーの順番をランダムで切り替えたり、おすすめ情報の並び順を切り替えたりする時に使える「jQuery Shuffle Plugin」をご紹介。 jQueryのプラグインを使用すれば、特定の要素だけランダムで表示できるようになります。 ソースコードは以下 (function($){ $.fn.shuffle = function() { return this.each(function(){ var items = $(this).children(); return (items.length) ? $(this).html($.shuffle(items)) : this; }); } $.shuffle = function(arr) { for( var j, x, i = arr.length; i; j = parseInt(Math.random(
[JS]jQueryのプラグイン100選 -2012年総集編
2012年に紹介したものを中心としたjQueryのプラグイン100+α選です。 今年目立ったのは、やはりレスポンシブ、そしてCSS3アニメーションでしょうか。 スライダーやギャラリー系もレスポンシブ・アニメーション対応、ナビゲーションやPinterst風のレイアウトなど、多くのプラグインにそれら二つの要素が組み合わさっています。 動画関連 画像ギャラリー関連 画像拡大関連 画像配置・キャプション関連 背景画像関連 コンテンツスライダー・カルーセル関連 ナビゲーション関連 レイアウト関連 レスポンシブ関連 パネル・ボックス関連 ツールチップ・ティッカー関連 アニメーション関連 エフェクト関連 スクロール操作・スクロールコンテンツ関連 リスト関連 テーブル関連 フォーム関連 テキスト関連 見出し抽出関連 ローディング関連 エレメント・コンテンツ生成 その他 動画関連
jScrollPane
jScrollPane is a jquery plugin which allows you to replace the browsers default vertical scrollbars on any block level element with an overflow:auto style. You can easily control the apperance of the custom scrollbars using simple CSS. jScrollPane is crossbrowser, working on all browsers that support jquery and it also degrades gracefully. If a user's browser doesn't support jQuery or has J
最下部に要素を固定する
Result jQuery//IEに読ませるコード if ( $.browser.msie ) { div.css({position: "absolute", width: jslide_width, right: 0, height: 100}); div.addClass('fixie'); } else {//IE以外のブラウザ div.css({position: "fixed", width: jslide_width, right: 0, height: 100}); }css.footer { position:fixed; position:absolute; right:0; bottom:0; padding:0; margin:0; height:100px; width:100%; background:#eee; text-align:center; } /*I
[JS]簡単な記述で、軽快で滑らかなアニメーションが実装できるスクリプト -JSTween
オブジェクトの移動や拡大・縮小、不透明度の変更、CSS3のシャドウや角丸などを滑らかアニメーションで簡単に実装できるjQueryのプラグインを紹介します。 アニメーションのエフェクトは、31種類！ JSTween [ad#ad-2] JSTweenの特徴 JSTweenのデモ JSTweenの使い方 JSTweenの特徴 軽快に動作し、パフォーマンスに優れています。 アニメーションを使った複雑なインタラクションが実装できます。 フレームレートを使ったスムーズなアニメーション。 実装はjQueryベースで簡単。 簡単に始められ、シンプルに実行できます。 JSTweenのデモ
[JS]スライダーやタブやページネーションなど便利な機能を少ないコードで実装する超軽量（8kb）のスクリプト -vanity
スライダー、タブ、ページネーション、ツールチップなど、ウェブページでよく使用するコンテンツをシンプルにより少ないコードで実装できるよう開発されたjQueryのプラグインを紹介します。 vanity jquery toolset [ad#ad-2] vanityは7種類のツールがあり、それぞれ8kbと超軽量のスクリプトとなっています。 機能はシンプルで、より少ないコードで簡単に実装できるように設計されています。 以下、7つのツールとそのコードを紹介します。 ※外部ファイル・スタイルシートは省略 スライダーのデモページ div要素やリスト要素で実装するスライダーです、スライドのエフェクトやスピードも調整できます。 HTML <!-- the slider content holder --> <div class="slider"> <!-- the elements inside the s
デザインもシンプルで素敵なレスポンシブのjQueryスライダー「Blueberry」を使ってみた – bl6.jp
とてもシンプルで素敵なjQueryスライダー「Blueberry」を使ってみました。レスポンシブ対応なので、スマートフォンで閲覧した時にもサイズが調整されます。マークアップもとてもシンプルに記述できるのでいい感じです。オプションもスピードやインターバル、自動スライダーなど基本的な機能は一通り揃っています。 [ads_center] Blueberryの使い方 以下のサイトからプラグインファイルをダウンロードできます。 Blueberry – A simple, fluid, responsive jQuery image slider. いつも通りhead内にjQuery本体とプラグインを読み込みます。 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> <scri
RedLine Magazine : jQueryでnの倍数だけに何か処理する（追記有）
jQueryでnの倍数だけに何か処理する（追記有） >>081007：追記1 :nth-child について追記しました。 >>081007：追記2 :lt について追記しました。 今までのバックナンバーリストを一覧でダダダーと並べてるページがあって、（このサイトで言うと全エントリのアーカイブページみたいなページ）リストの件数が少なかった時は特に何も感じなかったんだけど、サイト公開から時間が経って「数が増えてなんか見難くない？」みたいな話になった。 で、5件分ごとに区切り線入れたいっていう提案をされて了解したけど、なんかどんな方法が効率いいんか迷った。手作業で5件目ごとにclass振っていく様な手数増える方法でもいいんだけど、今新しいのが上、古いのが下ってなってる状態で上から順番に5件目毎にclass付けした所で更新の度に1つずつズラしていくの？手数増えるにも程があるｗｗｗみたいな発想にな
リリースされたばかりのjQuery 1.7.1に対応したチートシート
先月、リリースされたばかりのjQuery 1.7.1に対応したチートシートを紹介します。 即ダウンロード、即保存ものですね。 jQuery 1.7 Visual Cheat Sheet [ad#ad-2] jQuery 1.7.1は1.7のバグフィックス版で、リリース情報は下記をご覧ください。 jQuery 1.7.1 Released jQuery 1.7 Released jQuery 1.7のAPIで大きく変わったのは、.on(), .off()が追加されたことです。これは既存の.bind(), .unbind()に代わるもので、他にも.on()は.delegate(), .live()、.off()は.undelegate(), .die()に代わります。 これらは1.7.1でも利用できますが、これからは.on(), .off()を使用することが推奨されています。 チートシートでは
汎用性の高い、jQueryの定番系プラグインのまとめ
単体で使ってもいいし、それを使って更に面白いものを作りだすのにも役立つjQueryの定番系プラグインを紹介します。 いつもリリースされたばかりのプラグインを紹介しているので、たまには定番系で汎用的なものを。
Hello JS, Hello World. | JavaScript / et cetera.
今回はツールチップを自作してみます。 WordPressなどで構築したサイトの場合、前後のページに移動する際、ページのタイトルをリンクの文言に使用するケースが多くみられます。(まさにこのブログがその作りです) タイトルが極端に長い場合などを踏まえて、タイトルを画像に置き換えて、文言をツールチップで出してみましょう。 続きを読む →
[jQuery]こんな機能があったんだ。jQuery stop()|WEBプログラム覚書
HOME>WEBプログラム覚書>[jQuery]こんな機能があったんだ。jQuery stop() [jQuery]こんな機能があったんだ。jQuery stop() 「Buttons like Windows 7 with JS & CSS」を見てて って記述あったので調べてみたらstop()って色々使えるんですね。 全然しらなかったです。 stop([clearQueue], [gotoEnd]) 引数は2つ。何も指定しないとfalse [clearQueue]がtrueの場合、持っているキューが全て削除される。[gotoEnd]はtrueにすると現在のアニメーションの最後のコマへジャンプする。
タブやアコーディオンなど、様々なUI構築用のjQueryプラグイン30個以上をセットにしたフレームワーク・ jQuery EasyUI
普段からよく見かけるjQueryによる タブやアコーディオンなどのUIの構築 を簡略化するためのフレームワーク・ jQuery EasyUIのご紹介です。プラグ インは30個以上あり、どれもシンプル なものになっています。 数じゃ敵いませんけど、Ext JSのjQuery依存型みたいな印象です。結構昔からあるみたいなので知ってる方も多いかもですけど・・・恥ずかしながら最近知ったので、僕と同様にまだ知らない方向けにシェア。 jQueryを使ったシンプルなユーザーインターフェースを構築する為のプラグイン30数個をワンセットにしているフレームワークです。余計な機能が付いていないものばかりなのでカスタムしやすいのでは。 コードはドキュメントに全部書いてありますので割愛します。 プラグインの一部をご紹介します。 Accordion 開閉するアコーディオン Menu シンプルなメニュー Panel パ
Morf.js - CSS3 Transitions with custom easing functions
Native These are the natively supported easing functions, built into WebKit. linear ease ease-in ease-out ease-in-out Custom These are custom easing functions (thanks to Robert Penner & Thomas Fuchs) that can produce much more interesting transitions. Generated Animation CSS Internally the custom easing function for the transition is faked using CSS animations. Here is the code that is produced on
jQueryを使って実装する、かっこいいナビゲーションのまとめ | コリス
利用しやすいものから、利用シーンを選ぶものまで、jQueryを使って実装したナビゲーションを紹介します。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://creative-tweet.net/blog/2012/05/ui-for-flautokerning.html
README.txt
東京渋谷 “HTML5入門＆jQuery” 勉強会(5/26)の資料を公開します | tonowp
Scott Robbin
[JS]jQueryのプラグイン33+1選 -2011年8月