使えると楽しいJavascriptの最近のブログ記事
サンプルサイト
透過pngを使ってどんなことができるのかを考えながら作ってみました。
(IE6等のpng画像非対応のブラウザでは正しく表示されません。)
今回試してみたのは以下の5つ。
- 背景を透過したコンテンツエリア
- 背景を透過したグラスボックス
- マウスオーバーで表示されるツールチップ
- 透明ストライプの背景色指定による色の変化
- 透過pngを使ったlightboxのような透過レイヤー
pngを使うと今までできなかった表現が可能になりそうですね。
スクロール位置を取得して独自のアラートを表示させたり、ポップアップをスクロールしても同じ位置に表示させたいときに使えそう。
window.onscroll = function(){
var point = document.documentElement.scrollTop || document.body.scrollTop;
alert(point);
}
このソースはスクロールするたびにスクロール位置をアラートで表示します。
今日仕事でスクロールが一定の位置まできたら処理を実行というものを作れないかと依頼され、なんとかそのためのヒントを得たのでメモ。
ScrollPoint = document.getElementById("<div>のid").scrollTop;







