写真素材にフォントを半透明で乗せたりすると、非常にいい感じのロゴができたりもする。
CSS3以前から、alpha値を設定することはできたのだが、css2の時は、ブラウザ毎の方言が非常に激しかった。
そこで、僕が使っていたライブラリから、持ってきてみた。
概要
旧IEに対応しているが、最新のIE11は未チェック・・・
※不具合あればコメントください。
仕様
param @ e : サイズを取得したいエレメント
param @ n : 透明度の値を入力 [0.0 - 1.0]
return @ [type:element(object)] *alpha値の変更されたエレメントが帰る。
Code
(function(){
var $$={};
$$.alpha = function(e , n){
//IE
if (navigator.userAgent.indexOf("MSIE")!=-1){
if (n < 0){
n = parseInt(parseFloat(RegExp.$1) + (n));
if (n <= 0) {n = 0;} else if (n >= 100) {n = 100;}
}
e.style.filter = 'alpha(opacity='+n+')';
}
//FireFox;
else if (navigator.userAgent.indexOf("Firefox")!=-1){
if (n < 0){
if (n <= 0) {n = 0;} else if (n >= 1) {n = 1;}
}else{n = n/100;}
e.style.opacity = n;
}
//Opera & Safari;
else if ((navigator.userAgent.indexOf("Opera")!=-1)||(navigator.userAgent.indexOf("Safari")!=-1)){
if (n < 0){
if (n <= 0) {n = 0;} else if (n >= 1) {n = 1;}
}else{n = n/100;}
e.style.opacity = n;
}
//Netscape;
else if (navigator.userAgent.indexOf("Netscape")!=-1){
if (n < 0){
if (n <= 0) {n = 0;} else if (n >= 1) {n = 1;}
}else{n = n/100;}
e.style.MozOpacity = n;
}
return e;
};
//グローバル変数へ格納
window.$$LIB = $$;
//プログラム構造を返す（別変数に格納できる）
return $$;
})();
使い方
$$LIB.alpha(document.getElementById("hoge"));
※返り値がありますが、送るだけでエレメントの値が変更されます。
0 件のコメント:
コメントを投稿