jQuery リファレンス：trigger
索引 ├ リファレンス目次 ├ アルファベット順 └ 検索 Core：コアとなる仕組み ├ 目次 ├ jQuery(selector) ├ jQuery(html) ├ jQuery(function) ├ jQuery.holdReady() ├ jQuery.noConflict() └ jQuery.sub() 他ページ参照 └ jQuery.when() Selectors：セレクタ └ 目次 基礎 ├ *（すべて） ├ element（html要素） ├ #id名（ID属性） ├ .class名（clas属性） ├ 複数のセレクタ(and) └ 複数のセレクタ(or) 階層関連 ├ 先祖 子孫 ├ >（子要素） ├ +（直近の後要素） └ ~（後要素） 属性 ├ [属性名] ├ [属性名='値'] ├ [属性名!='値'] ├ [属性名^='値'] ├ [属性名$='値'] ├
少しのコードで実装可能な20のjQuery小技集
2016年6月22日 jQuery 素敵な動きを手軽に実装できるJavaScriptライブラリ「jQuery」。jQueryには多くのプラグインが揃っていますが、以前書いた「少しのコードで実装可能な20のCSS小技集 」に続き、今回はプラグインなしで実装できるjQueryの小技を紹介します！「jQueryってなんだ？」という人もコピペで実装できますよ！サンプルも用意したのでぜひご覧ください！ ↑私が10年以上利用している会計ソフト！ 追記：この記事で紹介されているいくつかの方法が、今ではCSSのみで実装可能です！詳しくは「かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技」をご覧ください。 jQueryの基本的な使い方 まずはjQuery本家からjQueryファイルをダウンロードします。<head> 内に下記を記述し、jQueryファイルを読み込みます
シングルページなサイトをデザインする上で、知っておいて損は無いかもしれないプラグインとか色々！ | バンクーバーのうぇぶ屋
最近多いですねー、1ページで完結するタイプのサイト。One Page Loveのサイトなんかから、シングルページの事例も大量に見ることが出来ますし、パララックスやらフリップ型のコンテンツやら、なんか色々出てきてて着いて行くのがやっとです… でも実際シングルページをつくろうとすると、え？何これどうなってんの？って物も多くてビビることもしばし。 ってことで、今日は僕が知ってる中で『お、これ、シングルページ作る時に使えるんじゃね？』って物を幾つかご紹介させて頂きます！ 主にはシングルページデザインの表現の幅を広げるjQueryプラグインの紹介になるかなと思いますが、楽しい物も多いので、是非興味があれば試してみてくださいませ〜！ それではいってみましょー！ パララックススクローリング系プラグイン この辺は以前に紹介したことがあるものばかりなので、ぱぱーっと行きます。 jQuery Waypoint
Javascriptを使ってここまでできる！凄い動きのサイト10選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。マラガの海の贈り物SEKOです。 フラッシュを使えばサイトはダイナミックな動きを実現しますが、今回はフラッシュでなくてもJavascriptで凄い動きのサイトを集めてみました。 是非参考にしてください。 Javascriptを使った、凄い動きのサイト10選！ MoMA MoMA 円が時系列で表現されております。クリックするとグリンっとまわる動きは気持ちがいいです。ただサイト自体がけっこう重いですね。。 DUB FIRE DUB FIRE マウスを右や左に動かすとサイト全体が動きます。広がりがあり、操っている感もあり、こちらも操作が気持ちいいサイトです。 Volkswogen Volkswogen メインスライドの動きが綺麗です。スクロールで車を操作する年表ページやフォトギャラリーにも楽しい動きが沢山含まれています。 Secret Study Secret Study DUB F
iPhone,Android両対応スマホ画面回転のjavascriptイベントは orientationchange resize
iPhone,Android両対応スマホ画面回転のjavascriptイベントは orientationchange resize 回転イベントorientationchange 画面が回転したときに何かさせたいときはorientationchangeで設定できます。 ※Androidは2.2から対応しました。2.1の端末では動きません。 $(window).on(“orientationchange”,function(){ alert("画面が回転しました"); // ここに実行したい処理を書く }); 回転したときだけ実行する場合は、これでいけますが ページ読み込み直後にも処理を実行したい場合だったら、 resizeもセットで設定します。 $(window).on(“orientationchange resize”,function(){ alert("この端末の横幅は"+wind
jQueryのtoggleでアコーディオンメニューやタブをさくっと実装する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 最近友人と『中学生円山』を観に行きました。 女性にはおそらく理解できないであろう「男子中学生あるある（主に下ネタ）」が盛り込まれていて、いい意味でヒドイ内容でした。もう一回観たい（´ω`） さて、今回は「HTMLとCSSはわかるけどjQueryってなにそれ、おいしいの」という方向けに、今日から使える簡単かつ便利な3つのメソッド「slideToggle／fadeToggle／toggleClass」をご紹介します。 こいつらを知っとくと下記のようなメリットがあります。。 アコーディオンメニュー、タブ、スマホサイトでよくある「上からスラスラ出てくるメニュー」とか実装できる 超シンプルな記述なので、今日から使える いやーこれは便利ですね。 というわけで、早速解説していきます。 【こちらもおすすめ】 超簡単jQ
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
maxImage Plugin: Scaling Background Slideshow Example
maxImage has the options 'slideShow:(false|true)', 'slideDelay:(5)' (in seconds), slideShowTitle(true|false), loaderClase('loader'). When I first built the slideshow functionality for this plugin, it had to load all of the images before starting the show. Now, each image loads separately so that the slideshow can begin as soon as the first image is loaded. Please let me know what you think or if y
HTML5トレンドで “背景フルスクリーン動画” のサイトが増えるかもしれない。
先日ブログでご紹介した『パララックス効果』、おかげさまで非常に好評だったのですが、あまりにもいろんなサイトで採用されているのでそろそろ新鮮味に欠けてきました。私が個人的に好きでぜひ流行ってほしい、それにウェブ技術の文脈的にも次に来るんじゃないかと思っているウェブデザインの表現が『背景フルスクリーン動画』です。文字通り、ウェブサイトの背景が全画面の動画になっています。 アプリの使い方を背景動画で紹介する『Path』のウェブサイト 『Path』はフォローしあえる友人の数を150人までに制限しているクローズトなSNSアプリ。サイトを訪れるとアプリを操作するひとの手と、挙動するアプリの画面を動画で映しています。 男女の学生がひたすら歌いつづける芸大のウェブサイト 東京藝術大学大学院映像研究科 メディア映像専攻 年次成果発表会「Media Practice11-12」のサイトでは、同研究科所属と思わ
[jQuery]シンプルなティッカーいろいろ | Arch
株価のように流れるティッカー サンプル ニュース1 ニュース2 ニュース3 ニュース4 ニュース5 設置方法 01) jQuery liScrollから「jquery.li-scroller.1.0.js」と「li-scroller.css」をダウンロード 02) ヘッダに以下のソースを記述する <link rel="stylesheet" href="css/li-scroller.css" type="text/css" /> <script src="js/jquery.js" type="text/javascript"></script> <script src="js/jquery.li-scroller.1.0.js" type="text/javascript"></script> <script type="text/javascript"> $(function
jQueryで背景に動画をフルスクリーンで表示する方法｜BLACKFLAG
海外のサイトなどで最近たまに見かける、背景に動画をフルスクリーン表示して見せる手法。 背景全面に動画が流れることでページの演出をかなりダイナミックに見せることが出来ます。 この背景動画を簡単に実装できるjQueryプラグインもありますが YouTubeにアップされている動画が対象だったりで、 任意の動画ファイルを簡単に流すことができるものが見当たらなかったので 簡単に実験的に作ってみたのを紹介してみます。 動画を流す手法はHTML5の＜video＞タグとかも考えましたが 今回は動画再生はFlashで流すパターンにしています。 まずは動作のサンプルから。 下記リンクよりサンプル画面を表示してみてください。（別枠で表示されます） jQueryで背景に動画をフルスクリーンで表示するサンプルを別枠で表示 ※サンプルでの動画ファイルは容量を軽減する為に少々粗いものになっています。 ブラウザ枠をリサイ
jQuery：ブラウザのウインドウサイズを取得 | Design Drill Diary
sample : ウインドウ中央に移動するdiv http://www.designdrill.jp/jquery/04/02_center_1.html ※最初は左上に配置されていますが、リサイズすると中央に移動します。 ポイントはresizeイベントとwidthメソッド/heightメソッドです。resizeイベントの構文は これまでのイベントハンドラと同様ですが、セレクタとしてwindowを指定します。 このとき注意するのはwindowにはクォートは必要ないという点です。 readyイベントのdocumentも同じようにクォートは必要ありませんでした。 $(window).resize(function(){ //---リサイズされたときに実行したい処理 }) つづいてwidthメソッド/heightメソッドですが、これも通常のメソッドの構文と同じです。 要素の幅/高さを取得できるの
jQuery の位置・サイズ関連メソッドまとめ - Cyokodog :: Diary
ばらけてきたのでこちらにまとめます。 索引 位置の設定 css(name,value) 位置の取得 css(name) offset() position() scrollTop() / scrollLeft() event.pageY / event.pageX サイズの設定 css(name,value) / height(value) / width(value) サイズの取得 css(name) / height() / width() attr(clientHeight / offsetHeight / scrollHeight) outerHeight() / innerHeight() コンテナ要素の取得 offsetParent() 解説 位置の設定 css(name,value) 対象要素を指定した位置に配置できます。単位を省略した場合はピクセル単位となります。 $('#
Multi-touch web development | Articles | web.dev
Multi-touch web development Stay organized with collections Save and categorize content based on your preferences. Introduction Mobile devices such as smartphones and tablets usually have a capacitive touch-sensitive screen to capture interactions made with the user's fingers. As the mobile web evolves to enable increasingly sophisticated applications, web developers need a way to handle these eve
Cycle [jGlycy]
Cycleプラグインはトップページでも使っている、画像を様々な手法で連続的に表示するプラグインです。 ここではjGlycy上での実装を書きますが、非常にシンプルな呼び出しなので、直接呼び出す場合にも参考になると思います。 ホームページ まず、他のプラグイン同様にCycleプラグインをロードします。 その際、このプラグインはかなり多くの他のプラグインに依存するので注意して下さい。 よくわからない場合は、ダウンロードページから”Cycle Core With All Transitions”とあるものを使うと良いでしょう。 次に連続表示させたい画像をdiv要素内に並べ、そこにjGlycyへの呼び出しを記述します。 <div jg="cycle"> <img src="/your/path/photo_1.jpg" /> <img src="/your/path/photo_2.jpg" />
iPhone/Android/PC 対応。jQuery で書くタッチイベント
こんにちは！プロダクト企画担当の林です。 今回は、前回予告していた通り、タッチイベントについて書かせていただきます。 他所でもタッチイベントについて取り扱っていますが、当記事でのポイントは、 jQuery を使っている。（jQuery Mobile は不要です） iOS / Android で動作確認済み。 タッチできない PC の場合、マウスで動く。 この３点です。 こちらを実際に動作するコードにて解説します。 動作確認環境 タッチ環境 → iPhone / iPad / Android マウス環境 → Sleipnir / IE / Firefox / Google Chrome / Safari / Opera タッチイベントについて タッチイベントとは、スマートフォンなどで画面を直接指でタッチしたときに発生するイベントのことです。 イベントの種類 touchstart : タッチし
bind(type, [data], fn) - jQuery 日本語リファレンス
要素が持つ、例えば”click”などのイベントに対してコールバック関数を紐付けます。カスタムイベントに対してもbind可能です。 イベントハンドラは、コールバック関数に対してイベントオブジェクトを渡します。”click”や”submit”などの元々の動作をキャンセルするには、戻り値にfalseを返してください。これにより、イベントのbubblingも止まりますので、親要素が持つイベントの発生もキャンセルされてしまうことに注意してください。ほとんどの場合は、イベントには無名関数を渡すことが出来ます。そうしたケースであれば同じクロージャの中で変数を利用できますが、それが難しいような場合は第二引数を用いてデータを引き渡すことも可能です。（その場合はコールバック関数は三番目の引数になります）
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
nanotux.com
認証がかかっています
Nivo Slider #1 Most Stylish Website Content Slider Available @ ThemeIsle
