javascript opacity兼容性随笔
一、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兼容性随笔的更多相关文章
- javascript event兼容性随笔
一.前言 function ConvertEvent(e, element) { var event = e || window.event; var resultEvent = { event: e ...
- javascript Xml兼容性随笔
一.前言 (function (window) { if (!window.jasen) { window.jasen = {}; } if (!window.jasen.core) { window ...
- javascript position兼容性随笔
一.Javascript源码 if (!window.jasen.core.Position) { window.jasen.core.Position = {}; } function Size(w ...
- 《高性能javascript》 领悟随笔之-------DOM编程篇(二)
<高性能javascript> 领悟随笔之-------DOM编程篇二 序:在javaSctipt中,ECMASCRIPT规定了它的语法,BOM实现了页面与浏览器的交互,而DOM则承载着整 ...
- 《高性能javascript》 领悟随笔之-------DOM编程篇
<高性能javascript> 领悟随笔之-------DOM编程篇一 序:在javaSctipt中,ECMASCRIPT规定了它的语法,BOM实现了页面与浏览器的交互,而DOM则承载着整 ...
- JAVASCRIPT 浏览器兼容性问题及解决方案列表
JAVASCRIPT 浏览器兼容性问题及解决方案列表(1)获取HTML元素只兼容IE:document.all.hello hello 兼容所有: document.getElementById(“h ...
- JavaScript 事件兼容性写法
1.以下是JavaScript事件兼容性写法,使用者可以随意使用,兼容所有浏览器.包括IE6(亲测) <!DOCTYPE html> <html> <head> & ...
- opacity兼容性以及存在问题处理
opacity兼容性以及存在问题处理 opacity兼容性 opacity属性是CSS3的属性,用于设置元素的不透明级别.语法: opacity: value | inherit; ①值value表示 ...
- opacity兼容性问题
用来设定元素透明度的 Opacity 是CSS 3里的一个属性.当然现在还只有少部分浏览器支持. 不过各个浏览器都有自己的私有属性来支持,其中包括老版本的Mozilla和Safari: IE: fil ...
随机推荐
- 浅谈rem、em、px
1.px:像素(Pixel) px是相对长度单位,他是相对于显示器屏幕分辨率而言的 优点:比较稳定.精确 缺点:在浏览器 中放大或者缩小浏览页面,会出现页面混乱的情况. 如下例子: .buttonPX ...
- DataSet用法详细 转
DataSet用法详细 转 DataSet用法详细 一.特点介绍 1.处理脱机数据,在多层应用程序中很有用. 2.可以在任何时候查看DataSet中任意行的内容,允许修改查询结果的方法. 3.处理分级 ...
- 如何用Maven创建web项目(具体步骤)
版权声明:本文为博主原创文章,未经博主允许不得转载. 目录(?)[+] 使用eclipse插件创建一个web project 首先创建一个Maven的Project如下图 我们勾选上Creat ...
- python课程第三周重点记录
1.关于set,set是一个无序且不重复的元素集合 s = set(["ss","dd","pp"]) #创建set s1 = set([& ...
- ue4 NewObject/StaticConstructObject_Internal/StaticAllocateObject/FObjectInitializer:对象创建和初始化
UObject是一套很复杂的体系,之前读ue3代码时曾分析过其类型系统实现,主要是与UClass间的关系 现在转到ue4,发现那一块其实差不多,于是再重点备忘一下UObject本身的创建和初始化过程 ...
- HttpWebRequest向路由器提交基本身份验证
HttpWebRequest向路由器提交基本身份验证 服务端IIS设置为不允许匿名访问,只选择了基本身份验证,客户端使用HttpWebRequest发送一个get请求,请求一个页面. 基本身份验证,客 ...
- CSS 部件
1.导航菜单: [荐]抽屉式菜单 jQuery.mmenu jQuery.mmenu 实现了类似手机上经常使用的抽屉式菜单,效果很好.http://mmenu.frebsite.nl/ 2.jQuer ...
- 数字与字母 随机数小demo
public String generateRandomId(){ String chars = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHI ...
- 4580: [Usaco2016 Open]248
Description Bessie likes downloading games to play on her cell phone, even though she does find the ...
- python 装饰器修改调整函数参数
简单记录一下利用python装饰器来调整函数的方法.现在有个需求:参数line范围为1-16,要求把9-16的范围转化为1-8,即9对应1,10对应2,...,16对应8. 下面是例子: def fo ...