javascript opacity兼容性随笔

一、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>

 

posted @ 2013-11-08 01:00  jasen.kin  阅读(3855)  评论(3)  编辑  收藏  举报