ルーレット風なものが作れるjQueryプラグイン「Roulette.js 」
Roulette.js Roulette.jsは、画像をルーレット（スロット）のように回転させることができるjQueryプラグインです。 画像を数字に変更すれば、ビンゴっぽいのも作れるかも。 みてもらうのが一番早いと思うので、サンプルをご覧ください。 → ルーレット風なものが作れるjQueryプラグイン「Roulette.js 」サンプル シンプルでおしゃれな感じなので[START]で回転し始めます。[STOP]で少しずつスピードが落ちながら、回転が止まります。 ググっても日本語の解説がなかったので、ちょっと気合いれて使い方を解説しますね。 使い方 こちらのサイトをご覧ください。公式のデモページになってます。回転スピードを調節したり、止まった時にでる画像を指定したりと、いろいろ試すことができます。 http://demo.st-marron.info/roulette/sample/dem
【jQuery】テキストにアニメーションを施す［textillate.js］の使い方
テキストにアニメーションを追加するjQueryプラグイン［textillate.js］の使い方を紹介します。 まずはサンプルをご覧ください。 textillate.js : http://textillate.js.org エフェクト部分は［animate.css］に依存しているため、アニメーションの種類が豊富に指定できる点が最大の特長です。 またjQueryに依存しており、他にも［jquery.lettering.js］という外部ファイルが必要になります。 ファイル一式をダウンロード必要なファイルは以下。 jQuery.jsjquery.textillate.jsjquery.lettering.jsanimate.css入手するには下記公式ページから。右上の「Download ZIP」からファイル一式をダウンロードできます。 GitHib : https://github.com/js
【jQuery】スライダープラグイン「slick」の使い方を詳しく解説
前回、「超簡単！CDNのjQueryを読み込む方法」というのを書きましたが、Web制作をする上では、様々なjQueryのプラグインも使用する機会が多いと思います。jQuery本体と同様に、プラグインも毎回ダウンロードしてサーバーへアップして、、、というのは面倒です。そこで便利なのが「jsDelivr」というサイトです。プラグイン全て、というわけにはいきませんが、かなりの数のプラグインをホストしていますし、よく使うCDNをコレクションして一括でソースコードをコピーして貼り付けられたり超便利です。ぜひ使ってみましょう。jsDelivr&... 設置するファイル ajax-loader.gif fonts（フォルダ） slick-theme.css slick.css slick.min.js HTML <link href="js/slick-theme.css" rel="styleshee
JavaScriptでクロスドメインの壁を飛び越える方法 - FICC Workbook
Javascriptを使って異なるドメイン上のデータを引っ張ってこようと思うと意外とたいへんです。 「クロスドメイン問題」とかいう面倒な壁が立ち塞がっているからです。 ぼくもさっきまでハマりまくっていたのですが、「jquery.xdomainajax.js」と言う良さ気なJQueryライブラリを使うことによって見事クロスドメインの壁を飛び越えることに成功しましたのでメモ 使い方使い方は簡単なのでありがたい。 GitHubから「jquery.xdomainajax.js」をDLしておき、以下の様なHTMLを書いて保存して実行。 ファイルを開けば、実行され他ドメインのサイトの内容が表示されます。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>クロスドメイン突破してみるん</title> <!-- jQ
レスポンシブサイトでクリッカブルマップを使う時に超便利な「jQuery RWD Image Maps」
業務メモ。 最近はかなり減りましたが、Webサイト作成時たまに使用せざるを得ないあいつ。そう、クリッカブルマップ。 画像の好きな場所にリンクを仕込めるのは便利ですが、レスポンシブの案件ですとリンクエリアが指定した座標からずれてしまうため困っちゃう。 jQuery RWD Image Mapsはそんな悩みを一発で解決してくれる便利なjQueryプラグインです。 使い方 使い方は非常に簡単。まずはstowball/jQuery-rwdImageMapsからjsファイルをDL。適宜アップロードします。 HTML [html] <script type="text/javascript" src="jquery-1.11.0.min.js"></script> <script type="text/javascript" src="jquery.rwdImageMaps.js"></script>
スマホ対応の軽量LightBoxプラグイン Swipebox - Welcart カスタマイズ
ツイート B! ブックマーク Google+ Pocket Facebook Welcart対応テーマには３つjQueryのプラグインを入れていますが、その一つがこのjQueryプラグインの「Swipebox」。簡単にモーダルウィンドウ効果（いわゆるLightbox）機能をつけられる、非常に軽いプラグインです。 このSwipeboxは、「現場でかならず使われているWordPressデザインのメソッド（レビュー）」で紹介されていたのをきっかけに知りました。 WordPressのプラグインでもLightbox系のものは多くありますが、私は断然jQuery派です。 jQueryのプラグインを自分で導入すれば、以下のような利点があります。 効果が必要ないページでは、スクリプトを読み込ませなくていい フッターで読み込み指定出来る いらないファイルやデータベースを勝手に生成される心配がない つまり、ペ
高機能ファイルアップロードjQueryプラグイン｜ドラッグ＆ドロップ、プログレスバー、オーディオ、ビデオ、各種ファイルサポート対応
高機能で美しい インターフェイスはやはり2015年度版という感じはしますが、UIはある程度設定で変更出来ます。インターフェイスデザインは5年たったらがらりと流行りが変わるので便利かもしれませんね。 ドラッグ&ドロップサポート もちろん普通にアップロードする事も可能ですが、それ以外にドロップアンドドロップにも対応しているという事です。 同時に複数のファイルをアップロード可能 幾つかのファイルを同時にアップすることが出来ます。先にアップロードするファイルを選び、一斉アップロードも出来ますし、一つ一つアップロードすることも可能です。 対応デスクトップブラウザ まさかのIE6から対応。 Google ChromeApple Safari 4.0+Mozilla Firefox 3.0+Opera 11.0+Microsoft Internet Explorer 6.0+ 対応モバイルブラウザ Ap
[javascript]PC・スマホwebアプリでクリップボードにコピーする機能の実装 | ジェネストリーム開発ブログ
こんにちは。クウハッカー開発者の粟島です。 今回はjavascriptネタですが、スマホアプリ等でよく見かける、 任意のテキストをクリップボードにコピーする機能の実装方法についてまとめてみたいと思います。 基本的にjavascriptではクリップボードにアクセス出来ないので、 少し特殊なやり方で機能を実現していきます。 【PCでの実装】 PCではFlashを利用することでクリップボードにアクセスすることが可能です。 Flash部分の処理をラップしたjQueryライブラリが用意されているので、 こちらを利用すると非常に簡単に実装できます。 zclip 詳細な実装方法はリンク先を参照してください。 このような感じでボタンクリックでクリップボードにコピーする機能が実装できます。 【iPhoneでの実装】 iPhoneだとFlashも使えないので、クリップボードに直接コピーす
.html)
mouseleave(fn) - jQuery API 1.4.4 日本語リファレンス - StackTrace
解説 マッチした要素のmouseleaveイベントに、イベントハンドラをバインドします。 bind("mouseleave", handler)のヘルパイベントです。 通常、mouseleaveイベントは、マウスなどのポインティングデバイスが、要素から外れた時に発生します。 このイベントは、イベントバブリングを補足しませんので、子孫要素から外れた時には発生しません。 引数 fn Function: mouseleaveイベントにバインドするイベントハンドラ関数 イベントハンドラ関数の第1引数に渡されるイベントオブジェクトには、イベントが発生した位置を表すプロパティとして、以下の4つが設定されます。 イベントハンドラ関数の第1引数に渡されるイベントオブジェクトには、イベントが発生した位置を表すプロパティとして、以下の4つが設定されます。 プロパティ名説明
jquery小技まとめ３２
作成：2013/07/1 更新：2014/11/01 Web制作 > 先日ECサイトを制作したときに、動きのあるサイトにしないといけなかったので、色々調べて組み込んでみたんですが、jQueryでもう何でも出来ちゃいますね。近い将来ローカルで画像なんかを編集しなくても、ブラウザだけで色々できるようになるんじゃないでしょうか。今回は定番からちょっとマイナー（Google Analytics関係とか）なものまでjQueryの小技、プラグインを集めさせていただきました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ スクロール １．ページ内リンク／フッターまわり／トップに戻る ２．パララックス スライド ３．カルーセル ４．レスポンシブなスライダー ５．ヌルヌルサクサクなスライドメニュー ６．サムネイル付きクロスフェードスライドショー 補助 ７．Google Ana
ある要素が表示されたときに命令を実行するJavaScript w/ jQuery – へんな柳生
無限スクロールの仕組みを調べている中で、jQueryを使って汎用性の高そうな動作が意外と簡単に実装できることがわかったのでメモ。 ページ内のある要素が、スクロールされて表示されたときになんらかの命令を実行するJavaScript。 $(function() { // 引き金となる要素を設定 var triggerNode = $(".trigger"); // 画面スクロール毎に判定を行う $(window).scroll(function(){ // 引き金となる要素の位置を取得 var triggerNodePosition = $(triggerNode).offset().top - $(window).height(); // 現在のスクロール位置が引き金要素の位置より下にあれば‥ if ($(window).scrollTop() > triggerNodePosition)
jQuery を高速に使う CSS セレクタの書き方
jQuery は CSS セレクタで要素を選んで処理できるのが魅力的ですね。そんな jQuery ですが、CSS セレクタの書き方次第で速度が大幅に変わってきます。 ここでは jQuery の内部処理を疑似コードで示しつつ、jQuery を高速に使うためのポイントを５つに絞って紹介します。 何度も同じセレクタを実行しないクラスだけを指定するのは禁止#id を積極的に使う途中までの結果を再利用する子供セレクタ(>)を使うと速くなることがある ※ この記事は jQuery 1.2.6 のソースコードを元に記述しています 1. 何度も同じセレクタを実行しない 改善前 // 例題 1 $("div.foo").addClass("bar"); $("div.foo").css("background", "#ffffff"); $("div.foo").click(function(){alert
jQuery親要素、子要素、兄弟要素取得のまとめ
※各メソッドにかいてある[条件]ってのは、タグ名やid、クラス名を指定するってことです。 条件を入れると、条件にあったものだけが取得されるようになります。 例：$(elem).parent("div.class-name, #id"); 通常のJavaScriptでの要素取得方法は→[JavaScript] 親要素・子要素・兄弟要素の取得方法 ■親要素の取得 □parent([条件]) 親要素の取得。 すぐ上の親要素のみ。さらに上の先祖要素にはさかのぼらない。 $(elem).parent("div"); 親要素がdivだったら親要素が取得できる。divじゃなければ空。 □parents([条件]) parent()と違い親より上の先祖要素までさかのぼる。 $(elem).parents(".class-name"); class-nameというクラス名がついた先祖要素のみ取得 □clos
jQueryでtextareaのカーソル位置の行数を取得・設定(スクロール対応)
textarea内のカーソル位置や行数を取得したり、指定行のみ置換したりなどをJavaScriptでサラリと出来るかな?と思ったら、それなりに大変だったという記録です。 一部jQueryオブジェクトですがjQueryの機能は使っていないので依存しない改造も簡単だと思います。 カーソル位置までの行数 テキストエリア内のカーソルはキャレットという名称です。キャレット位置の行数を取得する関数は用意されておらず、キャレット位置までの文字数のみが取得できます。日本語も1カウントです。その後、改行コードの数を調べることで行数を割り出します。 まず、文字数から行数を取得できる関数をStringクラスに追加しておきます。ブラウザによって異なる改行コードの差異も吸収します。 String.prototype.getLinefromCount = function(start){ // 文字数から行数を取得
jQueryのeachとvalについて質問です。 - 順番にvalueの値に「1」、「2」、「3」と入れたいのですが思うような... - Yahoo!知恵袋
jQueryのeachとvalについて質問です。 順番にvalueの値に「1」、「2」、「3」と入れたいのですが思うような結果が得られません。 以下が作成したソースです。 ■javascript $(function() { var num = [ "1", "2", "3" ] $(".test input:text").each(function(num) { $(this).val(num); }); }); ■html <div class="test"> <input type="text" value=""> </div> <div class="test"> <input type="text" value=""> </div> <div class="test"> <input type="text" value=""> </div> ■結果 <div class="tes
[備忘用]JQueryセレクタ - あしたはあしたの風が吹く
▼セレクタ ■HTML全体 $(document).xxx ■HTMLタグ $("タグ名").xxx ■ID $("#アイディー名").xxx ■クラス $(".クラス名").xxx ■Aに内包されるB $("A△B").xxx ※△は半角スペース ■Aに内包される全て $("A△*").xxx ※△は半角スペース ■ID="B"と設定されているA $("A#B").xxx ※区切り文字（スペースやカンマ）がなく書かれている場合は、 同タグ内に記述されているもの。 ■AとB複数指定 $("A, B").xxx ■A直下のB $("A > B").xxx ※あくまでも直下のBということで、階層が違えば対象外。 ■Aの次に出現するB $("A + B").xxx ※同じ階層上は次として扱われない。 ■Aに該当する最初に出現するもの（ブロック毎） $("A:first-child").xxx ※
![[備忘用]JQueryセレクタ - あしたはあしたの風が吹く](https://cdn-ak-scissors.b.st-hatena.com/image/square/df3a50c14b465108d37d0f484920317dd74971fb/height=288;version=1;width=512/http%3A%2F%2Fu.xgoo.jp%2Fimg%2Fsns%2Fblog.png)
まよねこ inside » Blog Archive » 【jQuery】CSSの複数プロパティを変える
とゆーわけでgoogle先生召喚。 一発解決！ cssメソッドに2つのパラメーターを与える場合、以下のようなcodeが考えられる。 $("p").css("color","#000000").css("background-color","#0033cc") この様に複数のプロパティを同時に操作する場合、以下の記述で対応できる。 $("p").css({"color":"#000000","background-color":"#0033cc"}) 参照元：jQuery:CSSへのアクセス | [E2]e2esound.com なるほどね～ こつこつと本見たりして勉強するのもいいんだけど、やっぱり実践で必要に迫られてやろうとすると身につくの早いと思う。 とはいえ、アタシはもう少し基礎的部分を勉強して土台を固めたほうがきっともっと幅が広がるだろうな、と。 ロクナナのワークショップ、やっ
get jp postal code
郵便番号から住所補完zip2addrサンプル Google日本語入力APIを利用し、完全にメンテナンスフリーな住所補完機能を提供します。 フロントエンドのJavaScriptのみで作動するため、サーバーサイドに手を加える必要はありません。 数行のJavaScriptを書くだけで簡単に既存のフォームに実装できます。 こちらからどうぞー: https://github.com/kotarok/jQuery.zip2addr jQueryとzip2addrの読み込み 下記のようにjQueryとzip2addrを読み込んでおきます。これで準備は完了。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script type="te
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScript - Ajaxの返り値を受け取ってからの処理(70084)｜teratail
http://hiropo.co.uk/archives/781