Webページ内である要素に透明効果を適用したい場合、CSSで調整する事が出来る。
ただし、ブラウザによってCSSのプロパティ名が異なってくるためそれらを考慮して記述していかなければならない。
Javascriptを使って同じように透明度を調節する事が出来るが、これらも結局はCSSの"opacity"プロパティや"-moz-opacity"プロパティ、もしくは"filter"プロパティをいじっているにすぎない。
prototype.jsを使うと同じ関数でこれらプロパティを操作できる。
element.setOpacity(0.3);
こうするだけで"element"要素の透明度が30%になる。
以下のような関数で徐々に薄くなる（あるいは濃くなる）要素を作り出す事が出来る。
function transparencyisChanged(start, end, inc, elem) {
var opacity = start;
if (start > end) {
opacity = -start;
end = -end;
}
setTimeout(function() {
opacity += inc;
elem.setOpacity(Math.abs(opacity) / 100);
if (opacity < end) setTimeout(arguments.callee, 15);
}, 15);
}
サンプルページではページのすべての要素に'mouseover'した時にこの関数を呼び出すようにしている。
カテゴリ：
トラックバック(0)
トラックバックURL: http://blog.beanz-net.jp/beanz_mtos/mt-tb.cgi/46
コメントする