javascript opacity兼容性随笔

一、CSS兼容代码

?
1
2
3
4
5
6
.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兼容代码

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
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 @   jasen.kin  阅读(3868)  评论(3)  编辑  收藏  举报
编辑推荐：
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
阅读排行：
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· 单线程的Redis速度为什么快？
· 展开说说关于C#中ORM框架的用法！
· Pantheons：用 TypeScript 打造主流大模型对话的一站式集成库
历史上的今天：
2011-11-08 lINE
点击右上角即可分享
微信分享提示