一、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. 合并两个排好序的链表(c++)

    #include<iostream> struct node{ int payload; node* next; node(int payload){this->payload=pa ...

  2. JavaScript基础知识整理（2）

    15.处理图像 注意:(1)在写js文件时,尽量将函数的声明往后写,将函数调用写在前面,这样能够使代码结构很清晰. (2)一个网页中翻转器一般超过3个,所以使用for循环减少重复使用翻转器代码的次数. ...

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

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

  4. sql报句柄无效。 (异常来自 HRESULT:0x80070006 (E_HANDLE))

    是由于数据库连接资源被耗尽或者用完没被释放导致的. 我在字符串中加了启用连接池好了. 如果错误信息为:sql 无效操作.连接被关闭 也是这个问题导致的.

  5. 保护眼睛，把常用软件的背景设置成Dark

    每天长时间使用电脑,很多软件的背景都是白色,久看对眼睛不好. 1)Google Chrome,WebDev/看新闻/看邮件/写博客.使用Stylish插件和Global Dark Style,效果相当 ...

  6. Oracle 设置表空间自增长

    Oracle修改表空间大小 使用Oracle10g建立数据库后,向数据库中导入了部分数据,第二天继续向数据库中导入数据表时发生错误: 查了很多资料发现原来是Oracle表空间限制,导致无法继续导入数据 ...

  7. 【笔记】memorymanagement-whitepaper-150215

    3 GC概念 Gc的职责: 1)  分配内存 2)  保证被引用的对象驻留内存 3)  对象不可达后将其占用内存回收 被引用对象被称为 “存活对象”. 不再被引用的对象称为“垃圾对象”. 找到垃圾对象 ...

  8. XAMARIN +VS2015 ANDROID 开发判断gps 是否打开。

    在获取位置的时候首先要判断gps是否打开,如果没有打开就要提示打开,当然最友好的就是直接调转到打开界面. LocationManager alm = (LocationManager)this.Get ...

  9. comet4j

    简介 准备工作 下载服务端jar文件 下载客户端js文件 修改服务器配置文件 在web.xml中加载Comet4J框架 客户端使用简介 JS.Engine.start方法 JS.Engine.stop ...

  10. 闲来无事——第一弹 Java基础 基本数据类型

    一个优秀的Java类一定要去优质的名称,类的命名主要有字母和数字,并且必须以字母开头:虽然说没有明确规定类名首字母要大写,但是实际上如果出现首字母小写的类名,那就呵呵了,坐等挨骂吧!类名首字母大写是业 ...