一、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. MAC 安装j2ee.sh的办法

    It says it needs the DISPLAY variable set - what do I need to set it to? Instead of saying: ./java_e ...

  2. Lua 单例类

    function SingleTon:new() local store = nil return function(self) if store then return store end loca ...

  3. 魔性の分块 | | jzoj1243 | | 线段树の暴力

    题目的打开方式是酱紫的 然而作为一只蒻蒟根本不会线段树该怎么办呢? sro  MZX  orz 是这样说的:用分块啊! 分块 根据紫萱学姐的教程,分块的打开姿势是这样的: 我们要对一个数组进行整体操作 ...

  4. TCP/IP详解系列 --- 概念总结01

    UDP协议  .vs.  TCP协议:  原理上:(TCP报文段. vs . UDP用户数据报) TCP协议的特性: TCP是面向连接的运输层协议,应用程序在使用TCP协议之前,必须先建立TCP连接. ...

  5. checkbox全选

    jquery代码如下(在jquery1.10.2下验证通过): <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xh ...

  6. listbox 报错 Cannot have multiple items selected when the SelectionMode is Single.

    1.错误提示:Cannot have multiple items selected when the SelectionMode is Single. 刚刚在处理两个Listbox时,将其中一个li ...

  7. 用python画xy散点图

    import matplotlib.pyplot as plt plt.plot([1,2,3],[4,5,6],'ro') plt.show()#这个智障的编辑器 这样的话,就可以画一个散点图,图中 ...

  8. IOS 本地推送 IOS10.0以上 static的作用 const的作用

    //需要在AppDelegate里面启动APP的函数 加上 UIUserNotificationType types = UIUserNotificationTypeBadge | UIUserNot ...

  9. 大前端学习笔记整理【四】LESS基础

    第一次接触CSS预编译,然后对比后发现其实less的上手容易度确实比sass高不少,再加上公司项目也是使用的less.所以想想还是根据网上的各种教程,整理出来了一些比较基础的.而且比较能让我们这种初学 ...

  10. svn 在linux 下的一些常用命令

    最近在Linux系统下玩一些svn的东西,感觉脑袋很乱, 于是整理了一下一些初学者必须弄明白的基本命令: 1. svn --version: 查看Linux系统下的svn client版本. Clie ...