[B! JavaScript][jQuery] linjaのブックマーク

linja id:linja

JavaScriptとjQueryに関するlinjaのブックマーク (5)

スマートフォンサイト用に、フリック・スワイプ対応が簡単に出来るjQueryプラグインいろいろ | Web活メモ帳
最近スマートフォン対応やタブレット対応の案件が増えてきて、スワイプに対応させたいと言われる事が結構多いです。知ってる人も居るかもしれませんが、スワイプが出来るようになるjQueryプラグインをまとめてみました。画像ギャラリー専用のものから、ページ全体をスワイプで区切るものまで色々ありますよ。参考になれば幸いです。 jQuery Touchwipe iPhone、iPad、Android用にスワイプでスライドショーを移動できます。スワイプした時のイベントが簡単に取得できるので、画像切替意外にも色々使えそう。 PCの場合には、アンカーテキストで画像の切替ができます。サイズも1kB程度なので、モバイル端末に優しいですね。 PhotoSwipe jQuery Mobile対応の全画面イメージギャラリー。写真を大きく表示させて、ツールバーで操作するタイプです。 jquery.flicks
linja 2011/06/16
スマートフォン

iPhone

android

javascript

プラグイン

jQuery

web制作

css

web
リンク
jQueryだけでURLをパースするプラグイン「jQuery-URL-Parser」 | Web活メモ帳
「jQuery-URL-Parser」を使うと、URLを分解して簡単に値を取得できますよ。使い方はこんな感じです。 var url = $.url('http://example.com/folder/index.php?it em=value'); url.param('it em'); こうするとクエリーのit emの値”value”が取得できるというわけです。他にもホスト名やディレクトリ,#以降のアンカーの値も取得できますよ。これはいいかも。詳細＆ダウンロードは以下からどうぞ。
linja 2011/06/06
jQuery

js

JavaScript
リンク
jQueryの基礎からベストプラクティスまで学べる「jQuery Fundamentals」 | Web活メモ帳
JavaScriptの使い方から、セレクターの使い方、プラグインの作り方などが詳細に説明されていますよ。これから勉強する人からバリバリ使っている人まで、ひと通り読んでおくと良さそうです。 var foo = 'hello'; var sayHello = function() { console.log(foo); }; sayHello(); // logs 'hello' console.log(foo); // also logs 'hello' ↑スコープの使い方 $('p').click(function() { console.log('click'); }); ↑イベントの使い方 (function($){ $.fn.showLinkLocation = function() { return this.filter('a').each(function(){ $(this
linja 2011/05/24
jQuery

programming

資料

JavaScript
リンク
[JS]タイポグラフィで遊べるjQueryプラグインLettering.jsが面白い | Web活メモ帳
テキストにマウスオーバーした際に、エフェクトで遊べる「Lettering.js」面白かったのでご紹介。 jQueryプラグインとして実装されており、テキストをカラフルにしたり、文字をなめらかにスライドさせたりする演出をしてくれます。デモデザインブログのCodropsにて、Lettering.jsを使ったサンプルが紹介されています。テキストにマウスオーバーすると、タイポグラフィが切り替わる演出が作り込まれています。デモチュートリアル公式サイトに色々なギャラリーありプラグインの公式サイトには、実際に使用しているサイトが紹介されています。テキストを雪のように降らせたりするサイトがあって面白かったです。 Happy Holidays from Typek アイデアしだいで色々使えそうですね。ダウンロードは下のリンクからどうぞ。
linja 2011/05/10
javascript

jQuery
リンク
jQueryでスロット風のタブを作る方法 | Web活メモ帳
「Slot Machine Tabs」というエントリーにて作り方が紹介されています。タブをクリックした際にちょっとした効果を与える事ができます。デモ javascript自体は以下のようなコードを実装するようです。 $(".box-wrapper .current .col-one").animate({ "top": 0 }, speedOne, function() { ifReadyThenReset(); }); var columnReadyCounter = 0; function ifReadyThenReset() { columnReadyCounter++; if (columnReadyCounter == 3) { $(".col").not(".current .col").css("top", 350); columnReadyCounter = 0; }
linja 2010/04/13
jquery

javascript
リンク
1