一、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. vertical-align 垂直居中

    基线:字母‘x’的底部: 中线:与基线的距离为小写字母x高度的一半(即0.5ex),而ex同font-size相关,大部分浏览器认为1ex = 0.5em(em同样也是相对单位,不是绝对单位),因此会 ...

  2. LTS

    LTS(light-task-scheduler)主要用于解决分布式任务调度问题,支持实时任务,定时任务和Cron任务.有较好的伸缩性,扩展性,健壮稳定性而被多家公司使用. 1. 支持分布式,解决多点 ...

  3. SQL SERVER增加、删除、更改表中的字段名 （详询请加qq：2085920154）

    1. 向表中添加新的字段 alter  table  table_name  add  column_name  varchar2(20) not null 2. 删除表中的一个字段 delete t ...

  4. M2事后分析汇报总结

    学霸网站项目Postmortem结果 M2之于M1的改进 文档和问答的整合 完成webservice 完成数据库触发器设计与完整性约束依赖(大规模) 优化学霸UI 资源的搜索 外部问题的搜索 文档的上 ...

  5. 获取Linux进程运行在哪个CPU内核上面的方法

    首先,当某些时候,在一段程序或者借助第三方软件进行程序协助的时候,在性能的优化,以及程序bug的排除上面,可能会想知道该程序执行的进程被调度到了哪一个CPU内核进行工作,从而可以推断是否是受限于硬件还 ...

  6. PoEdu- C++阶段班【Po学校】-Lesson03_构造函数精讲 - 第5天

    复习构造函数:1  与类同名   2  没有返回值   3  自动生成    4  手动后,不会自动生成    5  不在特定的情况下,不会私有  新建 类   两种方法示范   其一:在vs中选择类 ...

  7. select制作分层级目录，让select显示和可下拉选择的"不一样"

    今天遇到一个特殊的select问题,需求是这样的:每次点击这个select时,根据选择的option的值做出相应的处理并返回新的select,option内容.所以大致思路是给这个select绑定ch ...

  8. 从github上获取资源速度慢的解决办法

    今天在github上clone一个仓库的时候,速度非常慢,只有3kb/s,开代理也没用,网上找到的各种git config的方法也没有用,最后想到设置hosts试试.于是在git的安装目录下找到了/e ...

  9. Maven中配置默认JDK版本

    使用Maven构建项目时,默认是使用jdk1.3版本,目前很多使用泛型的项目肯定是无法通过编译,除了修改项目的pom文件外,还可以在Maven的配置文件settings.xml中添加如下配置来解决: ...

  10. jquery easyui window中的datagrid，只能显示一次问题

    最近项目中用到easyui 的动态创建window ,window中嵌入了datagruid.第一次打开是能显示数据,但再次打开时确没显示: 注:url已成功返回了数据. 多次查阅easyui帮助文档 ...