一、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. 浅谈rem、em、px

    1.px:像素(Pixel) px是相对长度单位,他是相对于显示器屏幕分辨率而言的 优点:比较稳定.精确 缺点:在浏览器 中放大或者缩小浏览页面,会出现页面混乱的情况. 如下例子: .buttonPX ...

  2. DataSet用法详细 转

    DataSet用法详细 转 DataSet用法详细 一.特点介绍 1.处理脱机数据,在多层应用程序中很有用. 2.可以在任何时候查看DataSet中任意行的内容,允许修改查询结果的方法. 3.处理分级 ...

  3. 如何用Maven创建web项目(具体步骤)

    版权声明:本文为博主原创文章,未经博主允许不得转载.   目录(?)[+]   使用eclipse插件创建一个web project 首先创建一个Maven的Project如下图 我们勾选上Creat ...

  4. python课程第三周重点记录

    1.关于set,set是一个无序且不重复的元素集合 s = set(["ss","dd","pp"]) #创建set s1 = set([& ...

  5. ue4 NewObject/StaticConstructObject_Internal/StaticAllocateObject/FObjectInitializer:对象创建和初始化

    UObject是一套很复杂的体系,之前读ue3代码时曾分析过其类型系统实现,主要是与UClass间的关系 现在转到ue4,发现那一块其实差不多,于是再重点备忘一下UObject本身的创建和初始化过程 ...

  6. HttpWebRequest向路由器提交基本身份验证

    HttpWebRequest向路由器提交基本身份验证 服务端IIS设置为不允许匿名访问,只选择了基本身份验证,客户端使用HttpWebRequest发送一个get请求,请求一个页面. 基本身份验证,客 ...

  7. CSS 部件

    1.导航菜单: [荐]抽屉式菜单 jQuery.mmenu jQuery.mmenu 实现了类似手机上经常使用的抽屉式菜单,效果很好.http://mmenu.frebsite.nl/ 2.jQuer ...

  8. 数字与字母 随机数小demo

    public String generateRandomId(){ String chars = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHI ...

  9. 4580: [Usaco2016 Open]248

    Description Bessie likes downloading games to play on her cell phone, even though she does find the ...

  10. python 装饰器修改调整函数参数

    简单记录一下利用python装饰器来调整函数的方法.现在有个需求:参数line范围为1-16,要求把9-16的范围转化为1-8,即9对应1,10对应2,...,16对应8. 下面是例子: def fo ...