JavaScriptの基本構文を忘れた!って時にサクっと見たい10項目 – bl6.jp
最近はよくjQueryプラグインを使ったりすることが多くなってきたのですが、自分でちょっとカスタマイズしたりコードを読んでもさっぱり理解できないことが多々あるので1からJavaScriptを勉強してみようかと思いました。前に一回勉強したんですがすっかり忘れてしまっているのでまずは超基本的なことからマスターしていこうかと思います。 [ads_center] JavaScriptの基本構文10項目 とりあえず超基本的な構文を見やすいようにまとめておきます。 1.Hello Worldを出力 まずはブラウザにHello Worldを出力します。 <script type="text/javascript"> var msg = "Hello World"; document.write(msg); </script> 2.Hello Worldをアラートで表示 アラートで表示させたい場合はwin
テキストを中央に向かうにつれて大きくしたりできるjQueryプラグイン「jqIsoText」 – bl6.jp
結構おもしろかったのでメモしときます。テキストに簡単なエフェクトをかけてくれるjQueryプラグイン「jqIsoText」です。テキストを中央に向かうにつれて大きくしたり、またはその逆にしたりすることができます。画像ではなくてテキストなのでちょっとした変更も簡単にできるのでいいですね。以下使い方です。 [ads_center] 使い方 使い方はこれ以上ないくらい簡単です。jQueryとプラグインを読み込みます。 <script src="js/jquery.js" type="text/javascript"></script> <script src="js/jqIsoText.js" type="text/javascript"></script> エフェクトをかけたいテキストです。 <div class="sample">sampletextsampletext</div> あとはプ
JavaScriptのソースコードを1クリックで簡単に圧縮してくれる「/packer/」を使ってみた – bl6.jp
JavaScriptのコードを1クリックで簡単に圧縮してくれる便利なツール「/packer/」を使ってみました。圧縮したいコードをコピーして貼付けるだけなのでとても手軽で良いですね。jQueryのコードを試しに圧縮してみたところ特に問題なく動作しました。ということで簡単ですが以下使い方です。 [ads_center] 使い方 使い方はとても簡単です。圧縮したいコードをコピーしておいて、「Paste:」と書かれたテキストエリアにペーストします。そして、その下にある「Pack」というボタンをクリックすると、「Copy:」と書かれたテキストエリアに圧縮されたコードが表示されます。 あとは圧縮されたコードをコピーして使うことができます。 オプションは「Base62 encode」と「Shrink variables」の2つがあります。この2つにチェックを入れないと空白と改行を取り除いてくれるだけみ
jQueryで好きな要素を浮遊させることができるプラグイン「jqFloat」を使ってみた – bl6.jp
指定した要素をフワフワと浮遊させることができる面白いプラグインを使ってみました。なんか楽しくなってきますね。使い方もとても簡単なのでちょっとしたアクセントにいいかもしれないですね。実際の公式サイトでは雲や蝶蝶を浮遊させたりしています。見ていてちょっと和んじゃいます。ということで以下簡単な使い方です。 [ads_center] 使い方 jQuery本体とダウンロードしたJSファイルを読み込みます。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="jqfloat.min.js"></script> 浮遊させたい要素を指定します。 <script> $(document).ready(function() { $('#sample').jqFl
テキストをランダム表示してから整列していくjQueryプラグインを作ってみました | bl6.jp
テキストをランダムでフェード表示させて、アニメーションで整列させていくっていうのをjQueryで作りたく色々と試しながらなんとかできたのでプラグイン（jquery.random.text.return.js）にしてみました。ぶっちゃけほぼ使い道がなさそうなプラグインですけど。。ということで以下使い方です。 使い方 とりあえずサンプルみた方が早いので以下のページから見れます。 サンプル 使い方はめっちゃ簡単です。以下のページからファイルをダウンロードします。 ダウンロードページ head内にjQuery本体とダウンロードしたプラグインを読み込みます。 <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7.1'></script> <
滑らかに流れるニュースティッカー「jQuery News Ticker」がとてもいい – bl6.jp
jQueryプラグイン「JQUERY NEWS TICKER」を使ってみました。これを使えばとても簡単にニュースティッカーを実装することができます。滑らかに流れてくるので爽快です。マークアップはリスト要素を記述するだけなのでシンプルです。あと、オプションでAjaxを使ってフィードのURLを指定するだけで簡単に記事タイトルを流すこともできます。以下、使い方です。 [ads_center] 使い方 以下のURLからダウンロードできます。 jQuery News Ticker head内でjQuery本体とプラグインを読み込みます。 <link href="styles/ticker-style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://ajax.googleapis.c
jQueryでマウスオーバーした時に要素を全体的に拡大するやつを作ってみる – bl6.jp
すごくどうでもいい内容なんですが、ちょっとやってみたかったので素人ながら作ってみます。ある要素、例えばa要素なんかにマウスオーバーした時にちょっとだけ拡大して強調させたいなどといった時に使えるかもしれません。分かりづらそうなのでサンプルも作ってみました。おかしい部分やもっとこうした方がいいみたいなことがあれば是非教えていただけるとうれしいです。 （※ CSS3だけでもできましたので追加しておきます。） [ads_center] CSSのtransitionを使って背景色もアニメーションで変わるようにしています。要素の拡大はjQueryのanimateを使ってpaddingの値を変えています。で、普通にpaddingの値だけ変えると左上が固定されて右下方向だけアニメーションして拡大していくので、拡大する分positionでマイナスの値も指定します。ちょっと分かりずらいので図にするとこんな感じ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
