一、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. WCF use ProtoBuf

    ProtoBuf, 比起xml和json, 传输的数据里面没有自描述标签, 而且是基于二进制的, 所以有着超高的传输效率, 据牛人张善友的描述, 可以替代WCF的自带的编码方案, 效率有极大的提升. ...

  2. Python编写邮件群发(qq邮箱)

    #电子邮件操作 import poplib import smtplib from email.header import decode_header from email.mime.text imp ...

  3. NC 查询公司下所分配的组织，并存放字符串数组中

    private String[] querkFather() { String sql = "select pk_org from org_orgs start with pk_father ...

  4. [ubuntu] adb devices出现no permissions

    简书排版 http://www.jianshu.com/p/46e8848c6646 今天把一款测试的华为手机带回家,发现无法联机调试 笔者操作系统是 ubuntu 14.04 如果是windows找 ...

  5. 转载 - Vultr VPS注册开通且一键快速安装PPTP VPN和电脑连接使用

    本文转载来自:https://www.vultrclub.com/139.html 从2014年Vultr VPS进入市场之后,作为有背景.实力的搅局者,是的最近两年VPS.服务器的用户成本降低.配置 ...

  6. codeforces 446C DZY Loves Fibonacci Numbers 线段树

    假如F[1] = a, F[2] = B, F[n] = F[n - 1] + F[n - 2]. 写成矩阵表示形式可以很快发现F[n] = f[n - 1] * b + f[n - 2] * a. ...

  7. 有关tp里搜索框的实现方法

    1:

  8. Linux下高cpu占有率的调试方案

    1.用top命令查看哪个进程占用CPU高 gateway网关进程14094占用CPU高达891%,这个数值是进程内各个线程占用CPU的累加值.   2.用top -H -p pid命令查看进程内各个线 ...

  9. 【转载】PHP 开发者该知道的 5 个 Composer 小技巧

    Composer是新一代的PHP依赖管理工具.其介绍和基本用法可以看这篇<Composer PHP依赖管理的新时代>.本文介绍使用Composer的五个小技巧,希望能给你的PHP开发带来方 ...

  10. PHP 实现单一入口 apache配置

    在apache的httpd.conf加入,需要把LoadModule rewrite_module modules/mod_rewrite.so前面的“#”去掉 DocumentRoot / < ...