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

javascript opacity兼容性随笔的更多相关文章

  1. javascript event兼容性随笔

    一.前言 function ConvertEvent(e, element) { var event = e || window.event; var resultEvent = { event: e ...

  2. javascript Xml兼容性随笔

    一.前言 (function (window) { if (!window.jasen) { window.jasen = {}; } if (!window.jasen.core) { window ...

  3. javascript position兼容性随笔

    一.Javascript源码 if (!window.jasen.core.Position) { window.jasen.core.Position = {}; } function Size(w ...

  4. 《高性能javascript》 领悟随笔之-------DOM编程篇(二)

    <高性能javascript> 领悟随笔之-------DOM编程篇二 序:在javaSctipt中,ECMASCRIPT规定了它的语法,BOM实现了页面与浏览器的交互,而DOM则承载着整 ...

  5. 《高性能javascript》 领悟随笔之-------DOM编程篇

    <高性能javascript> 领悟随笔之-------DOM编程篇一 序:在javaSctipt中,ECMASCRIPT规定了它的语法,BOM实现了页面与浏览器的交互,而DOM则承载着整 ...

  6. JAVASCRIPT 浏览器兼容性问题及解决方案列表

    JAVASCRIPT 浏览器兼容性问题及解决方案列表(1)获取HTML元素只兼容IE:document.all.hello hello 兼容所有: document.getElementById(“h ...

  7. JavaScript 事件兼容性写法

    1.以下是JavaScript事件兼容性写法,使用者可以随意使用,兼容所有浏览器.包括IE6(亲测) <!DOCTYPE html> <html> <head> & ...

  8. opacity兼容性以及存在问题处理

    opacity兼容性以及存在问题处理 opacity兼容性 opacity属性是CSS3的属性,用于设置元素的不透明级别.语法: opacity: value | inherit; ①值value表示 ...

  9. opacity兼容性问题

    用来设定元素透明度的 Opacity 是CSS 3里的一个属性.当然现在还只有少部分浏览器支持. 不过各个浏览器都有自己的私有属性来支持,其中包括老版本的Mozilla和Safari: IE: fil ...

随机推荐

  1. java多线程详解(5)-Threadlocal用法

    ThreadLocal是什么 早在JDK 1.2的版本中就提供java.lang.ThreadLocal,ThreadLocal为解决多线程程序的并发问题提供了一种新的思路. 使用这个工具类可以很简洁 ...

  2. Java GC工作原理以及Minor GC、Major GC、Full GC简单总结

    名词解释: GC:垃圾收集器 Minor GC:新生代GC,指发生在新生代的垃圾收集动作,所有的Minor GC都会触发全世界的暂停(stop-the-world),停止应用程序的线程,不过这个过程非 ...

  3. django TEMPLATES

    ?: (1_8.W001) The standalone TEMPLATE_* settings were deprecated in Django 1.8 and the TEMPLATES dic ...

  4. 深入理解Java虚拟机(一)、Java内存区域与内存溢出异常

    Java虚拟机所管理的内存包括以下几个运行时数据区: 程序计数器(PCR): 1.是一块较小的内存空间,可以看做是当前线程所执行的字节码的行号指示器 2.为线程私有 3.执行Java方法有PCR,执行 ...

  5. CSS浏览器兼容问题总结

    为什么会出现浏览器兼容问题? 由于各大主流浏览器是不同的厂家开发的,所以使用的核心也不相同,架构代码很难重合,就会产生各种各样的bug. IE6中常见的css解析bug 1)默认高度(IE6)部分块元 ...

  6. 用OMT方法建立其分析模型： 本大学基于网络的课程注册系统。

    OMT方法是用3种模型来描述软件系统,分别是对象模型,动态模型,功能模型. 1)对象模型:课程网络注册系统 2)动态模型:序列图 3)功能模型:数据流图 0层DFD图 1层DFD图

  7. ZKM混淆工具

    原创文章,尊重劳动,转载请标明出处 ZKM 介绍 一般使用步骤 直接使用 ZKM 脚本 使用 GUI 工具混淆,同时生成 ZKM 脚本 参考 ZKM 介绍 zkm 是一款付费的代码混淆工具. 一般使用 ...

  8. angularjs 分页精华代码

    //pageinfo $scope.pageSize=10;$scope.currentType={{ current_type }};$scope.currentPage={{ json_encod ...

  9. idea 从github下载项目提示 file name too long 的解决方案

    1.找到git shell命令行 2运行如下命令 git config --global core.longpaths true 附地址https://github.com/Strider-CD/st ...

  10. 2014NOIP前 计划

    这几天天天刷水题活得很开心,是时候定一个计划了.想着我要在yzy左的吓人的歌声中看书,还是有点.... 大概就分成几类吧 数学//你们这群学霸啊 搜索 图论 dp 贪心 其他 每个不定具体时间,加油吧 ...