特にスマホで活躍する、ダイアログのように浮かび上がるモーダルウィンドウ。初心者でも1から作れるよう、解説します。
初心者でも分かる！モーダルウィンドウの作り方
特にスマホで活躍する、ダイアログのように浮かび上がるモーダルウィンドウ。初心者でも1から作れるよう、解説します。
1分でわかるjQueryのscrollTop() スクロール位置取得の使い方
jQueryのscrollTop()でスクロール位置を取得することでいろいろなことができるようになる。 ウィンドウ最上部のスクロール位置の取得 $(window).scrollTop()で取得。$(window).on("scroll"だけだとロード時に現在位置が表示されないので$(window).on("load scroll"と記述するのが望ましい。 function getScrollTop(){ $("#result").text($(window).scrollTop() + 'px'); } $(window).on("load scroll", getScrollTop); jQueryのscrollTop() スクロール位置取得の使い方 サンプル1 ウィンドウ最下部のスクロール位置の取得 $(window).scrollTop()+$(window).height()で取得
jQuery の .end() メソッドが便利ですよ | JavaScript | かたつむりくんのWWW
たぶん jQuery を使い始めたばかりの人はあまり使わないであろう .end() メソッドですが、これ、かなり便利なんですよね。 僕も最初はあまり使っていませんでしたが、最近は積極的に使っています。ソースも短くかけるうえに、パフォーマンス的にも良いので是非使っていきたいメソッドです。 今回は、簡単な例で .end() を紹介してみます。 今、次のようなソースがあるとします。アコーディオンさせる場所などで良く見そうなソースです。 <dl id="hoge"> <dt>.end()を使う</dt> <dd> <ul> <li>list 1</li> <li>list 2</li> <li>list 3</li> <li>list 4</li> <li>list 5</li> </ul> </dd> </dl> このような html に対して、次のような操作を行いたいとします。 dt 内のテキ
7つのサンプルでjQueryを学ぼう！「jQueryが全く分からない人のため」の超初級者向け入門講座
HOME>jQuery>7つのサンプルでjQueryを学ぼう！「jQueryが全く分からない人のため」の超初級者向け入門講座 約半年前まで、興味はあれども全くもって触れたことのなかった「jQuery」。それどころか、「Javascript」を「Javasprict」と何度となく書き間違える癖のあった私。 結局、「スク水すいすいスクリプト」と語呂を合わせることによりようやく正しい綴りをマスターしたわけなんですが、仕事で扱うと言うこともあり多少はjQueryの仕組みが分かってきた今日この頃です。 そんなわけで、今回は「jQueryが全く分からない人のため」の超初級者向け入門講座と銘打ちまして、jQueryの基礎の基礎を学ぶための記事を書いてみました。 とは言っても「jQueryとはなんたるか」などといった難しい理論を記すつもりは一切ございません。（っていうかそんな偉そうなこと言える程修めてない
Masonryの使い方：サイズの異なるBOXをタイル状に整列 [ホームページ作成] All About
Masonryの使い方：サイズの異なるBOXをタイル状に整列大きさの異なる複数のブロックを、うまい具合に隙間無くタイル状(レンガ状)に自動整列してくれる「Masonry」の使い方を解説。横幅や高さの異なるボックスがいくつあっても、できるだけ無駄な隙間ができないように詰めて配置してくれます。当初の「jQuery Masonry」とは違ってjQueryなしで動作可能になり、CDN経由で読み込めるようにもなって手軽になりました。
![Masonryの使い方：サイズの異なるBOXをタイル状に整列 [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/2d598cb7c9e1437f59a7459deffaf32757e9eedb/height=288;version=1;width=512/https%3A%2F%2Fimgcp.aacdn.jp%2Fimg-a%2F1200%2F900%2Faa%2Fgm%2Farticle%2F4%2F0%2F2%2F5%2F4%2F9%2Ftopimg_original.png)
ユーザーフレンドリーにするための40の新しいjQueryプラグイン「40 Fresh jQuery Plugins To Make Your Website User Friendly」
ユーザーフレンドリーにするための40の新しいjQueryプラグイン「40 Fresh jQuery Plugins To Make Your Website User Friendly」 Webデザインやコーディングの経験を積んでくると、「ユーザーにやさしいWebサイト」といったことを意識するようになると思いますが、今回はそんなユーザーフレンドリーなサイトにするためのjQueryプラグインをまとめた「40 Fresh jQuery Plugins To Make Your Website User Friendly」を紹介したいと思います。 Jquery Alpha Image by Ilker Guller 基本的な機能からフレキシブルデザインに対応したもの、検索候補を出すプラグインなど、かゆい所に手の届くプラグインが揃っています。中でも気になったものをピックアップしたので下記よりご覧く
jQuery Easing Plugin エフェクト一覧ページ
ほんのり解説 ＜script src="jquery-1.8.2.min.js"＞＜/script＞ ＜script src="jquery.easing.1.3.js"＞＜/script＞ ＜script＞ $(function(){ $(".button").toggle(function(){ $(".hoge").animate({ "marginLeft":"100px"},2000,"Easingの種類") },function(){ $(".hoge").animate({ "marginLeft":"0px"},2000,"Easingの種類"); }); }); ＜/script＞ headタグ内に「jquery本体」と「jquery.easing.js」を読み込むことで、"Easingの種類"の部分に記述したエフェクトを使用することが可能です。 （上記のコードは＜＞を半
クリックで水滴を落としたようにアニメーションさせられるｊQueryプラグイン「jQuery.twinkle」:phpspot開発日誌
クリックで水滴を落としたようにアニメーションさせられるｊQueryプラグイン「jQuery.twinkle」 2012年10月03日- jQuery.twinkle a jQuery plugin to get the visitor's attention via visual effects larsjung.de クリックで水滴を落としたようにアニメーションさせられるｊQueryプラグイン「jQuery.twinkle」 どこをクリックしたか、分かりやすくする為に使えそうです。何かのデモをする際にも、プレゼン等で見ている人にどこをクリックしたか分かりやすくするために使えそう 単なる円形にアニメーションするだけではなくて、色々な効果が選べるのも特徴 どんどんWEB上での表現が豊かになっていきますね 関連エントリ アニメ映画のようなロゴアニメーションを実現するjQueryアニメーションプ
jQuery.twinkle · get the visitor's attention · larsjung.de
0.10.0Draw your visitor's attention to special parts of your website. Examples of the different effects can be experiecend in this demo. All available options are described right below. Quick startTwinkle at a specified element: $(selector).twinkle(); Select an effect and add some effect options: var options = { 'effect': 'drop', 'effectOptions': { 'color': 'rgba(0,0,255,0.5)', 'radius': 100 } };
jQuery+CSSで実装するナビゲーションメニュー総集編 - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 jQueryを使用したcssナビゲーション メニューのまとめです。フェードや スライド、滑らかにドロップダウンする、 などなど色々なメニューをまとめました。 それほど多用はしませんが、必要な 時に探すのが面倒なので備忘録的に。 という訳で、個人的なjQuery+cssメニューの総集編です。 全部で73個。複数ブラウザでの確認はしていません。順不同です。少し重いかも・・ Large Drop Down Menu スライド&ドロップダウンメニュー Search Box with Filter and Large Drop Down Menu Fly-out Menu with jQuery and CSS3 カッコいいですねー。反対側からスライドするフライアウトメニュー
マウスオーバーで画像にキャプションを追加するjQueryプラグイン「Mosaic」を使ってみた[Demo] | fwd-0039.com
サンプル これは「アンパンマン」ではなく、「あんまんマン」です。語尾に「～アルヨ」が付くのが特徴です。 1991/12/16放映 それいけ!アンパンマン’93シリーズ〔4〕収録 「ぶたまんまんとあんまんマン」より
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
[JS]便利で簡単！スクリプトやスタイルシートをブラウザ・OSごとに分岐して利用できる超軽量高速のスクリプト -Conditionizr
IE6/7/8/9/10, Firefox, Chrome, Safari, Operaなどのブラウザだけでなく、Win, Mac LinuxなどのOS、iPadやiPhoneのRetinaディスプレイ用に条件分岐して、外部スクリプトやスタイルシートをロードさせたり、classを付与してHTMLで利用できたりする超軽量高速の単体で動作するスクリプトを紹介します。 Conditionizr Conditionizrの特徴 Conditionizrの使い方 Conditionizrの特徴 ConditionizrはjQueryより50%高速に動作し、条件付きのJavaScriptとCSSをサポートする3KBの超軽量スクリプトです。 条件付きのHTMLタグ 条件付きの外部スクリプトやスタイルシートのロード カスタマイズされたスクリプトにも対応 IE, Firefox, Chrome, Safar
FlexSlider 2
// Can also be used with $(document).ready() $(window).load(function() { $('.flexslider').flexslider({ animation: "slide" }); }); <!-- Place somewhere in the <body> of your page --> <div class="flexslider"> <ul class="slides"> <li> <img src="slide1.jpg" /> </li> <li> <img src="slide2.jpg" /> </li> <li> <img src="slide3.jpg" /> </li> <li> <img src="slide4.jpg" /> </li> </ul> </div>
カルーセル・スライダーになる万能jQueryプラグイン「carouFredSel」 | ECサイト｜システム開発会社｜スターフィールド
今回は、かなり使えそうなjQueryプラグイン「carouFredSel」というものをご紹介します。 カルーセルやスライダーにもなるということで、以前、bxSliderというプラグインを紹介しましたが、そちらよりも、機能はあるかもしれません。(その記事はこちら) こちらのプラグインでできることを簡単にあげますと、 ・オプションが豊富で、自由にカスタマイズできる ・スライドを自動/手動、マウスホイール、スワイプ等で設定可能 ・レスポンシブやリキッド等のレイアウトに対応 ・ページネーション、次へ、前へのボタンの設置が可能 ・スライドの向き（上下左右）、エフェクト（9種類）、イージング（5種類）から設定可能 ・スライド毎の横幅、縦幅が別でも伸縮してスライドしてくれる ・動的に、スライドを追加したり、削除することが可能 とこんな感じです。 なにより、高さが違うものをスライドできるのは、
クライアントワークでよくお世話になっているjQueryプラグインいろいろ
私が仕事で Web制作をする時に、よく利用させてもらっている jQuery のプラグインをまとめてみました。ライセンスは MIT、GPL のものばかりです。デザイン、レイアウト的に汎用性のあるものになっています。また、IE 特有のバグ（透過PNGの黒ずみなど）対策についても少し触れてみました。 Webサイトを作る時に、何かとお世話になっている jQuery のプラグイン。HTML と CSS だけでは表現できないことも、Javascript を使うことでいろいろできるようになりますよね！インターネットを見ていると、本当にたくさんの jQuery のプラグインが公開されています。feed を読んでいても、1日一個くらいは新しい jQuery のプラグインに出会います。どれを使ったらいいか迷うくらい … 。 今回は、そんな数ある jQuery のプラグインの中から、 私がクライアントワーク（仕
Fancybox - Fancy lightbox alternative
This site is kept for historical purposes and represents original version of the Fancybox. Check out the latest - Fancybox v5 What is it? FancyBox is a tool for displaying images, html content and multi-media in a Mac-style "lightbox" that floats overtop of web page. It was built using the jQuery library. Licensed under both MIT and GPL licenses Features Can display images, HTML elements, SWF movi
スマホサイトに入れると使いやすくなる！おすすめjQuery4選！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうも、はやちです_(:3」∠)_ スマホに使うとよりサイトが見やすくなるjQueryをまとめてみました。 アコーディオン アコーディオンみたく開閉式のメニューが実装できるjsです。 記事の多いコンテンツをまとめるのに便利ですね。 ■動きをみる HTML <dl class="acordion"> <dt class="trigger">アコーディオンメニュー<span class="open-close">open</span></dt> <dd class="acordion_tree">テキストテキストテキストテキストテキストテキストテキストテキスト</dd> <dd class="acordion_tree">テキストテキストテキストテキスト テキストテキストテキストテキスト</dd> <dd class="acordion_tree">テキストテキストテキストテキストテキストテキ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://qiita.com/no_silver/items/e3f67cf6c1a6f65bef82
http://motoshige.net/archives/3040
