![『10のJavaScript、Axaxタブメニュー』他、タブまとめ*ホームページを作る人のネタ帳](https://cdn-ak-scissors.b.st-hatena.com/image/square/702e025b77525ecfc3c2bc56e6bf8d18f51530a0/height=288;version=1;width=512/https%3A%2F%2Fblog-imgs-17.fc2.com%2Fe%2F0%2F1%2Fe0166%2F200711042222.gif)
reflex.js (with IE 6/7 support) reflex.js 1.1 allows you to add a Cover Flow effect (including reflection) to images on your webpages. 画像の映り込みエフェクトを実現するJavaScriptライブラリ「reflex.js」 次のような画像の映り込みエフェクトを付けることができます。 使い方は、必要なライブラリを読み込んで class を付与するだけのようです。 他にもいろいろあります。 Corner.js - 角丸効果や、シャドウ効果を画像に与える Glossy.js - 画像にガラス風の光沢を与える Instant.js - インスタントカメラ風エフェクトを与える Slided.js - スライドのフレーム風にエフェクトを与える Filmed.js - 映
まずは最近知って便利だと思ったCSSの小技をひとつ。 文章の最後に、「※(米印)」などで注釈を入れたいときに、CSSのみで行の開始位置を揃えるのにすごくシンプルなやり方がこれ。 .note { padding-left:1em; text-indent:-1em; } <p class=”note”>※米印を使う場合はこいつが便利。<br /> 改行してもこの通り。ちゃんと開始位置が揃ってる。</p> 「padding-left : 1em;」でまず1文字分右に動かして、「text-indent : -1em;」で最初の行だけ1文字分左に出す、ということらしいです。これ考えた人はえらいっすねぇ。 他には開始位置を揃えるいわゆる「ぶら下げ」をCSSでやる場合、<div>タグの入れ子を使ってもいいが、<dl><dt><dd>の定義型リストを使うのがおすすめ。Definition Listの略で
ちょっとJavaScriptをまじめに勉強しようかと思い始めました。 というわけで、手始めにマウスオーバーすると別画像に切り替わるスクリプトを書いてみました。 マウスオーバーで画像が切り替わるなんて、Dreamweaver使えばJavaScriptを知らなくてもできてしまうんですが、Dreameweaverが吐き出すコードはHTMLタグの中にonload="xxxxxxxx"とか、onmouseover="xxxxx"をやたらと追加して、非常に見づらいのです。 これだとテキストエディタでちょろっとHTMLを編集したい時に大変ですし、きっとGoogleさんもクロールしにくいでしょうから、imgタグに予めスワップ用に設定しておいたクラス名を記述しておけば、マウスオーバー、マウスアウトで画像が切り替わるようにしてみました。 作成したスクリプトはこんな感じです。クラス名から要素を取得するところはp
以前、個人的に作っていたサイトで、なんかメニューの見せ方を工夫できないかなと思って、「prototype.js」 と 「effects.js」 を利用してやって... 以前、個人的に作っていたサイトで、なんかメニューの見せ方を工夫できないかなと思って、「prototype.js」 と 「effects.js」 を利用してやってみたのが今回紹介するメニューのサンプル。 マウスオン / オフすると、隠れているサブメニューが滑らかに閉じたり開いたりします。クリックで開いたり、折りたたまれたりするメニューはよくありますが、それに無駄なエフェクトを施した版といったところ。 実際に動作しているサンプルはこちら。マウスオン / オフで滑らかに開閉しちゃいます。 さて、今回の材料は、 JavaScript ファイル 3種 本メニューの HTML ソース 本メニュー用 CSS の追加 JavaScript
概要 操作するとページをリロードすることなくフォントサイズの変更を反映するタイプです。基本的にタイプAと同じですが、クッキーを併用しているので、変更したサイズ設定を保存できます。 ライセンス To the extent possible under law, ugumi has waived all copyright and related or neighboring rights to this work. このスクリプトはCC0 1.0 Universal ライセンスの下でリリースされています(パブリックドメイン)。 説明 body要素のstyleオブジェクトのプロパティを書き換え、文書全体のフォントサイズを変更します。クッキーを併用しますので、リロードしたり、ページを移動しても設定を引き継ぐことができます。クッキーは「元に戻す」操作をしたときに削除されます。なお、クッキー操作の関
prototype.jsはAjaxライブラリの1つです。現在のバージョンは1.6.0です(2007/11/8)。prototype.jsについて、より詳細に知りたい方はprototype.jsの開発者メモを参照してください。また、英文ドキュメントであれば正式なリファレンスもprototype.jsのサイトで用意されています。 version 1.4.0 リファレンス version 1.5_rc0 リファレンス version 1.5_rc1 リファレンス version 1.5_rc2 リファレンス version 1.5.0 リファレンス version 1.5.1_rc1 リファレンス version 1.5.1_rc2 リファレンス version 1.5.1_rc3 リファレンス version 1.5.1 リファレンス version 1.5.1.1 リファレンス versio
iBox is a lightweight script that lets you overlay images and documents in a small dialog without a page reload. It's built to be easy to install and use, while offering great flexibility. The quick start shows example code and explains how to use it. TopImages iBox easily supports the standard overlay of images, in many sizes, and will automatically scale down the window if the browser's viewpane
Litebox Check out the front page If you haven't been to the front page in some time, check it out. I've started blogging about some tips and tricks. Expect some full featured scripts some time soon. What is it? Litebox is a modified version of Lightbox v2.0 created with one thing in mind, size reduction. Litebox utilizes the 3kb javascript library moo.fx in association with prototype.lite, giving
Ajaxの普及に伴い、ページ当たりのユーザの滞在時間が注目されるようになっている。従来、サービスがユーザに与えるインプレッションの指標としてページ・ビューが広く用いられている。しかし、Ajaxを利用するとページの移動があまり発生しないため、ページ・ビューが低くなってしまう。そこで、インプレッションの指標として、滞在時間を使おうという動きがある。 今回、JavaScriptでユーザの滞在期間が記録できるかどうか調べてみた。取り組む前は難しいかなと思ったが、実際にはとても簡単であった。コードは下記。 (function(){ var start = new Date; window.onunload = function(){ var time = (new Date - start ); var image = new Image; image.src = "/dummy?t=" + tim
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く