一、CSS兼容代码
.transparent {
filter:alpha(opacity=50); /* IE */
-moz-opacity:0.5; /* FireFox old version*/
-khtml-opacity: 0.5; /* Sarfari old version */
opacity: 0.5; /* FireFox */
}
二、Javascript兼容代码
if (!window.jasen.core.Util) {
window.jasen.core.Util = {};
}
var $ = function (id) {
return document.getElementById(id);
}
function style(element, key, value) {
if (typeof element == "string") {
element = $(element);
}
if (value) {
element.style[key] = value;
}
else {
return element.style[key];
}
};
function opacity(element, /*0-100*/opacityValue) {
var opacityValue = parseInt(opacityValue);
style(element, "filter", "alpha(opacity=" + opacityValue + ")");
opacityValue /= 100.0;
style(element, "MozOpacity", opacityValue);
style(element, "KhtmlOpacity", opacityValue);
style(element, "opacity", opacityValue);
};
var Util = window.Util = window.jasen.core.Util;
Util.opacity = opacity;
Util.style = style;
三、范例
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <style type="text/css"> #content { width:300px; margin:20px auto; } </style> <script src="Scripts/jasen.Core.Util.js" type="text/javascript"></script> <script type="text/javascript"> window.onload = function () { var seletor = document.getElementById("opacitySeletor"); seletor.options.add(new Option("--请选择--", "100")); for (var i = 0; i <= 100; i++) { seletor.options.add(new Option(i, i)); } seletor.onmousewheel = function (event) { event = event || window.event; var currentIndex = seletor.selectedIndex - event.wheelDelta / 120; if (currentIndex < 0) { seletor.selectedIndex = seletor.options.length - 1; } else if (currentIndex > seletor.options.length - 1) { seletor.selectedIndex = 0; } else { seletor.selectedIndex = currentIndex; } seletor.onchange(); return false; } } function changeOpacity() { var element = document.getElementById("opacitySeletor"); if (element.selectedIndex < 0) { return; } var opacityValue = element[element.selectedIndex].value; if (opacityValue != "") { Util.opacity("opacityImg", opacityValue); } } </script> </head> <body> <form id="form1" runat="server"> <div> <div id="content"> <select id="opacitySeletor" onchange="return changeOpacity();"></select> <img id = "opacityImg" src="Images/car.jpg" title="car opacity" alt="car opacity" /> </div> </div> </form> </body> </html>