opacity - 半透明を操るJavaScript
JavaScriptから半透明（alpha.opacity）を操る方法を紹介する。
半透明にする方法はCSSを使って、下記のコードで実現できる。 これらに指定する透明度をJavaScriptから指定してあげることで、インタラクティブなコンテンツを実現する。
filter:alpha(opacity=50); // Internet Explorer 0～100 （整数）
-moz-opacity: 0.5; // Firefox 0～1.0 （小数）
opacity:0.5; // Safari 0～1.0 （小数）
ブラウザによってそれぞれ対応する記述が異なります、実際のJavaScriptの動作サンプルでもすべてに対応させます。（サンプルを実行）
実際のJavaScriptコード
var start_opacity = 0; // 透明度の初期値 0～10(整数)
var value_opacity; // 透明度を保持する変数
var elem_target;
// クリックイベント
function eventClick(e) {
//透明度を初期化します
value_opacity = start_opacity;
setOpacityZero();
return false;
}
// 透明度が10になるまで+1加算する（タイマー）
function setOpacityZero() {
if(value_opacity < 10){
value_opacity += 1;
setTimeout('setOpacityZero()',80);
setOpacity();
}
}
// 透明度をセットする処理
function setOpacity () {
elem_target.style.filter = 'alpha(opacity=' + (value_opacity * 10) + ')';
elem_target.style.MozOpacity = value_opacity / 10;
elem_target.style.opacity = value_opacity / 10;
}
// イベントの初期化処理
function initalizeEvents() {
elem_target = document.getElementById('pagebody');
var sample_click = document.getElementById('sample_click');
// clickイベントをリスナーに登録
addListener(sample_click, 'click', eventClick, false);
}
// リスナー登録をする処理
function addListener (elem, eventType, func, cap) {
if(elem.addEventListener) {
elem.addEventListener(eventType, func, cap);
} else if(elem.attachEvent) {
elem.attachEvent('on' + eventType, func);
} else {
return false;
}
}
addListener(window, 'load', initalizeEvents, false);
透明度をコントロールするのをタイマー処理で呼び出しで処理させています。
上記のコードを参考にいろいろと試してみてください。
サイトの最新情報をRSSで受信できます
