タグ

jQueryに関するmikemadeのブックマーク (38)

  • input要素にも使えるjQueryのロールオーバープラグイン - Rewish

    jQueryプラグインの習作をするために作成したモノではありますが、プラグイン化したことでかなり楽に使えるようになったので、気が向いたら使ってみてください。 ライブラリについて HTMLを汚さず、簡単に画像のロールオーバーを実装できます。 ダウンロード jquery.rollover.js - v1.0.4 ライセンス MIT License 主な機能 HTMLで指定するのは初期表示の画像だけ 指定された箇所でも _on が付いている画像は無視 ロールオーバー画像をプリロード 拡張子は何でもOK (png, jpg, jpeg, gif, etc…) ロールオーバー画像を示す _on の部分を自由に変更できる 使用方法 画像を用意する example.jpg をロールオーバーしたい場合は、名前の末尾に _on を付けた画像 example_on.jpg を example.jpg と同じデ

    input要素にも使えるjQueryのロールオーバープラグイン - Rewish
  • jQuery を用いて大きな画像などを Google Map ライクにスクロール表示する UI - tilfin's note 跡地

    下記のサンプルは jQuery プラグインとして公開しています。(2009/05/20 追記) jquery-scrollview - This jQuery plugin applies grab-and-drag scroll view to block elements. - Google Project Hosting 壁紙などの大きなサイズの画像を表示するのに Google マップのようなインターフェイスを提供したい。 Google マップのような、 マウスドラッグでスクロール ダブルクリックした所にセンタリング するような処理である。ただ、ズームに関しては実装しない。 ということで実装したサンプルは ScrollViewer Sample である。 ScrollViewer jQuery を必要とする。 function ScrollViewer(){ this.initial

    jQuery を用いて大きな画像などを Google Map ライクにスクロール表示する UI - tilfin's note 跡地
  • jQuery.lightpop.js - dogmap.jp

    オプションの設定 オプションを設定することで、フレーム枠の見た目を変更したりできます。 オプションは、ざっと次の通り。 通常のオプション overlayBgColor: オーバーレイの背景色 overlayOpacity: オーバーレイの透明度 contentFrameType: 'border' (通常) or 'box' (画像を使用してフレームを表示) contentBgColor: コンテンツの背景色 containerBorderSize: コンテンツの脇に表示する空白の幅を px で指定 containerResizeSpeed: リサイズアニメーション時のスピードを数値で指定 imageLoading: 読み込み中に表示する画像ファイルのパス imageBtnClose: 「閉じる」ボタン用の画像ファイルのパス imageBtnPrev: 「前へ」ボタン用の画像ファイルのパス

  • jQuery textarea resizer plugin

    jQuery TextAreaResizer plugin example Simple iFrame (jQuery) + Resizer bar (grippie) Simple textarea + Resizer bar (grippie) some test text some test text some test text some test text some test text some test text Link back to jQuery TextAreaResizer plugin page

  • 少しのコードで実装可能な20のjQuery小技集

    2016年6月22日 jQuery 素敵な動きを手軽に実装できるJavaScriptライブラリ「jQuery」。jQueryには多くのプラグインが揃っていますが、以前書いた「少しのコードで実装可能な20のCSS小技集 」に続き、今回はプラグインなしで実装できるjQueryの小技を紹介します!「jQueryってなんだ?」という人もコピペで実装できますよ!サンプルも用意したのでぜひご覧ください! ↑私が10年以上利用している会計ソフト! 追記:この記事で紹介されているいくつかの方法が、今ではCSSのみで実装可能です!詳しくは「かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技」をご覧ください。 jQueryの基的な使い方 まずはjQuery家からjQueryファイルをダウンロードします。<head> 内に下記を記述し、jQueryファイルを読み込みます

    少しのコードで実装可能な20のjQuery小技集
  • http://caroufredsel.frebsite.nl/

  • jquery.rotate.js を使って、画像がクルクル回るWelcome作ってみました♪ – VIVID COLORS + BLOG -福岡から東京に出てきたデザイナーのブログ-

    こんにちは☆最近すっかり涼しくなりましたね…! みなさん、体調など崩していませんか?? さて、今日は画像を回転させられるjQueryのプラグイン、 jQuery rotateというプラグインを使ってみましたので、そちらをご紹介したいと思います♪ このブログのメイン画像、 これまでは水中から撮った水の写真を使用していたのですが、 長かった夏も終わって涼しくなってきたので衣替えしてみました♪ 追記:今はデザインを変更していて、同じ方法で切手風のデザインをクルクルしています。 Fireworksマニアではお花をクルクルしています♪ →Fireworksマニア お花で出来たWelcome文字です♪ この部分、ただの画像がぺたっと貼ってあるだけではなく、 画像を回転させられるjQueryのプラグイン、jQuery.rotate.jsを使用してそれぞれのお花がマウスオーバーで回転する、という仕掛けにな

    jquery.rotate.js を使って、画像がクルクル回るWelcome作ってみました♪ – VIVID COLORS + BLOG -福岡から東京に出てきたデザイナーのブログ-
  • jQueryのプラグイン「Page Scroller」を商用利用でも無料に変更しました:更新- 3.0.7

    当サイトで配付しているページ内をスムーズにスクロールできるスクリプト「Page Scroller」をバージョンアップ(3.0.7)して、商用利用でも無料に変更しました。 スクリプトは当サイトでも下記のキャプチャのように、いろいろな箇所に利用しています。 簡単に設置できるページ内をスムーズにスクロールできるスクリプト -Page Scroller ver.3 [ad#ad-2] 3.0.7の変更点 スクリプトのライセンス スクリプトのダウンロード 3.0.7の変更点 主な変更点は、下記の通りです。 3.0.7 ライセンスが変わりました。 詳しくは、「スクリプトのライセンス」を参照ください。 スクリプトのライセンス ライセンスを下記のように変更しました。 変更前: 表示 - 非営利 - 継承 2.1 日 変更後: 表示 - 継承 2.1 日 使用条件 上記のライセンスに従い、個人でも商用で

  • jQueryではじめるAjax:第3回 Youtube APIとjQueryを使いこなす|gihyo.jp … 技術評論社

    たとえば、検索結果を表示する簡単なアプリケーションのために、整形されたHTMLを含むデータを取得するには次のように指定します。 http://gdata.youtube.com/feeds/base/videos フィードの種類 データを取得するフィードは数種類あります。 通常はVideoフィードを使えば十分ですが、投稿者の情報やコメントの情報等を取得するフィードもありますので、必要に応じて使い分けてください。 全てのフィードは読み取り専用であり、認証無しでリクエストすることができます。 また、新しく投稿されたビデオがフィードで取得できるようになるには、インデックス化のため数時間かかります。 Videoフィード Videoフィードには、ビデオ、関連動画、standard、お気に入り、再生リスト、コメントのフィードがあります。 ビデオフィード ビデオを検索するには、ビデオフィードを使います。

    jQueryではじめるAjax:第3回 Youtube APIとjQueryを使いこなす|gihyo.jp … 技術評論社
  • 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

  • 電光掲示板のようにニュースをクールにアニメーション表示できる「jquery vticker」:phpspot開発日誌

    jquery vticker (vertical news ticker) JugBit 電光掲示板のようにニュースをクールにアニメーション表示できる「jquery vticker」。 特定のdivに次のようにulでリストを定義しておいて、$(element).vTicker(); とすることで簡単にアニメーションするニュースティッカーが実装できます。 幅、高さは固定できるので、自由にレイアウトできるところもナイスです。 表示時間が終わって消えるリストがグレーにフェードアウトするところも芸が細かくてナイス。 デモを見る デモはCSSでスタイリングされておらず味気ないものですが、CSSで綺麗にデザインしてあげることでかなり映えそうです。 オプションで、次の挙動についてカスタマイズも可能です。 ・スピード変更 ・待ち時間変更 ・アイテム表示数変更 ・アニメーション指定 ・マウスで停止するか指定

  • コンテンツにエフェクトを掛けるjQueryプラグイン10個

    個人的に必要になるかもと思ってメモ。 テキストや画像にエフェクトを与えて Webサイトを動きのあるサイトにする 手助けをしてくれるjQueryのプラグイン をいくつかご紹介します。 コンテンツに対するユーザーの興味を高めたり、画像を使用せずテキストを装飾したりと、使い方次第でいろいろ用途がありそうです。 Sliding Door Effect マウスオーバーで画像が4隅に開きます。動きも素敵。 Sliding Door Effect / デモ Rainbows テキストにグラデーションや影をつけます。これは凄いですね。 Rainbows / デモ Opacity to Show Focus マウスオーバーしたコンテンツ以外に半透明のエフェクトを掛けるjQueryプラグイン。テキストでも可能。 Opacity to Show Focus / デモ Color Changing Text an

    コンテンツにエフェクトを掛けるjQueryプラグイン10個
  • ボックス要素をレンガ状に綺麗に整列させる「jQuery Masonry」が凄い:phpspot開発日誌

    ボックス要素をレンガ状に綺麗に整列させる「jQuery Masonry」が凄いです。 普通、高さの違うボックス要素を float とかで並べると次のような、どう見ても見れない崩れたデザインになってしまいます。 が、今回紹介するjQuery Masonry を使うと、次のように、綺麗にテトリスっぽく整列できてしまいます。 ↓↓↓↓↓↓↓↓↓↓ これを実現するのに必要なJavaScript コードは以下のように数行。これで実現可能です。 $('#primary').masonry({ columnWidth: 100, itemSelector: '.box' }); この仕組みを使ってブログ等を表示するともっと面白いことになります。 新聞っぽくなりましたね。 ブラウザ幅を変える事でいろいろな見え方になるのも面白いです。 以下のエントリを参照してください。 jQuery Masonry ? B

  • Xlune::Blog

    可変グリッドレイアウトjQueryプラグイン(jquery.vgrid.js) なんだか可変グリッドレイアウトがまた流行ってる(?)ようなので、jQueryプラグイン書いてみた。 一通りブラウザで表示確認ぐらいはしたけど、テストは十分じゃありません。 Demo Demo Index 利用方法はデモのソースを確認してください。(ウィンドウリサイズして動きも確認してね) Download github zip file 利用には、jQuery体とjquery.easingプラグインが必要です。別途読み込んでください。 更新情報 v0.1.8 (20120421) display属性で、グリッド要素の表示/非表示を切り替えれるように修正しました。 demo009を追加 v0.1.7 (20111110) 複数の可変ボックスを指定すると、開始位置がおかしくなるバグを修正しました。 demo008

    Xlune::Blog
  • コンテンツの概要を好きな高さできっちりピクセル指定できデザインを崩させないjQueryプラグイン「DivGrow」:phpspot開発日誌

    コンテンツの概要を好きな高さできっちりピクセル指定できデザインを崩させないjQueryプラグイン「DivGrow」 2010年10月29日- DivGrow jQuery Plugin ? Easily make your DIV containers expandable & collapsable (with animation) HibboBlog コンテンツの概要を好きな高さできっちりピクセル指定できデザインを崩させないjQueryプラグイン「DivGrow」。 ブログの記事の概要なんかを次のように画像の横に表示させるとして、このプラグインを使うことでピッチリと画像の高さをあわせてデザインをスッキリさせることが可能です。 通常こういうことをやろうとすると結構めんどくさいですがjQueryプラグインなので高さを渡してあげるだけで綺麗にそろいます。 で、「Show More」という部分

  • 画像や枠などをキラッと超カッコよく光らせるエフェクトをjQueryで実装:phpspot開発日誌

    ShineTime ? A Kick-Ass New jQuery & CSS3 Gallery With Animated Shine Effects 画像や枠などをキラッと超カッコよく光らせるエフェクトをjQueryで実装する例が公開されています。 透明と白のグラデーション画像を斜めにして画像や枠の上をアニメーションで横切らせるというシンプルな方法でFlashサイトのようなクールな演出を実現しています。 実際のデモを見てみましょう。 超クールですね。 チュートリアル形式になっているので横切らせる画像を替えたりしても面白いかも。 このエフェクトは使える気がします。 チュートリアルでは現在のところjQueryは使っていますがプラグインの形ではないのでコードを記述する必要がありますが、プラグインになったらより便利そうですね。 関連エントリ 画像の映り込みエフェクトを実現するJavaScrip

  • jQuery でページスクロール - daily dayflower

    jQuery 1.2 以降だと scrollTop(と scrollLeft)という疑似スタイルが利用できるようになったので,jQuery UI を使わずとも,jQuery Core 体だけでページ内スクロールができるようになりました。 たとえば, <html> <body> <p> blah, blah, blah, ... blah, blah, blah, ... </p> <p> <a href="#" id="link_to_top">ページの先頭へ</a> </p> </body> </html> このような HTML で「ページの先頭へ」というリンクをクリックしたときに,スムーズにスクロールしたいのなら, $(function () { if (! $.browser.safari) { $('#link_to_top').click(function () { $(thi

    jQuery でページスクロール - daily dayflower
  • How to Create an App from Scratch | AppMaster

    Turning an app idea into a working reality is a more complicated task than most people might believe. However, with the wealth of software resources available on the internet, creating an app out of your idea is manageable. You don't even need to necessarily know how to develop mobile apps to make your application work. You can hire third parties or freelancers as there many places where you can f

  • Regardio

    Mit Leichtigkeit und Zuversicht die komplexen Herausforderungen des Lebens angehen: genau dafür entwickelt Regardio Werkzeuge. Werkzeuge, die Klarheit schaffen und Orientierung bei allen denkbaren Vorhaben bieten. Slow Food fürs Hirn, sozusagen. Unser erstes Produkt ist der Regardio Kompass – ein Kartenset fürs Leben, das du immer dabei haben kannst. Für dich, mit anderen und für alle.

    mikemade
    mikemade 2010/09/06
    サブ項目数は固定?
  • The hoverFlow Plugin - A Solution to Animation Queue Buildup in jQuery

    Another Solution to Animation Queue Buildup in jQuery Or: Why do hover animations continue after I stop hovering? Over at learningjQuery.com, Brandon Aaron published a quick tip on how to prevent animation queue buildup in hover animations. Since I was not satisfied with his solution, I tried to find another. After taking some wrong paths and learning a lot about jQuery's animation (queue) system,

    mikemade
    mikemade 2010/09/06
    横へ動くシンプルナビゲーション