js opacity0点击_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;
三、范例
#content{width:300px;margin:20px auto;
}
window.οnlοad= function() {varseletor=document.getElementById("opacitySeletor");
seletor.options.add(newOption("--请选择--","100"));for(vari= 0; i<= 100; i++) {
seletor.options.add(newOption(i, i));
}
seletor.onmousewheel= function(event) {
event=event||window.event;varcurrentIndex=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;
}
}functionchangeOpacity() {varelement=document.getElementById("opacitySeletor");if(element.selectedIndex< 0) {return;
}varopacityValue=element[element.selectedIndex].value;if(opacityValue!= "") {
Util.opacity("opacityImg", opacityValue);
}
}
js opacity0点击_javascript opacity兼容性随笔相关推荐
- js实现点击切换checkbox背景图片
转载自:http://www.bijishequ.com/detail/384166?p= 首页 专题 博客 文章 登录 注册 www.bijishequ.com 搜索 笔记社区共收录522,437篇 ...
- html checkbox复选框更换背景,js实现点击切换checkbox背景图片的简单实例
在制作网页的过程中,经常需要实现点击切换背景图片的效果,本文关注的是表单中checkbox背景图片切换的实现.如图,在输入用户名和密码后,用户需要选择是否记住密码 图片背景为白色表示未勾选状态 ,背景 ...
- Vue.js实现点击左右按钮图片切换
关于图片切换,网上也有很多的说法,这边通过参考给出了如下所示的解决方案 效果: html 通过v-for循环展示图片列表itemlist,将图片路径保存在data中的itemlist中,添加上下按钮的 ...
- Clipboard.js 实现点击复制
在开发过程中难免会遇到点击分享的需求,这里有两种实现方式: 第一种: 通过原生js 的方法用(存在兼容性): document.execCommand( aCommandName, aShowDefa ...
- html点击背景图片变模糊,js实现点击上传图片并设为模糊背景
本文实例为大家分享了js实现点击上传图片,同时设该图片为模糊背景,供大家参考,具体内容如下 效果展示: 源码展示: js实现点击上传图片,同时设该图片为模糊背景 input { display:blo ...
- html鼠标点击切换图片,js鼠标点击图片切换效果代码分享
本文实例讲述了js鼠标点击图片切换效果.分享给大家供大家参考.具体如下: 实现原理很简单,其实是多张图片叠加起来,点击图片后依次赋予图片一个class,使其看起来在表面而已,点击图片,可以实现图片的不 ...
- html 点击按钮js自增,JS实现点击按钮自动增加一个单元格的方法
本文实例讲述了JS实现点击按钮自动增加一个单元格的方法.分享给大家供大家参考.具体分析如下: 这是一个网页在线自助生成表格的特效代码. 核心功能代码是JS实现,点击网页中的添加按钮,网页中自动增加一个 ...
- Php点击更换封面,JavaScript_js实现点击图片改变页面背景图的方法,本文实例讲述了js实现点击图 - phpStudy...
js实现点击图片改变页面背景图的方法 本文实例讲述了js实现点击图片改变页面背景图的方法.分享给大家供大家参考.具体实现方法如下: 点击图片即改变页面的背景图片 希望本文所述对大家的javascrip ...
- Clipboard.js实现点击自动复制内容的功能
Clipboard.js实现点击自动复制内容的功能 点击非文本框,自动复制,代码如下 value:<spanid="bar"class="btn"data ...
最新文章
- GitHub 热门:机器学习 100 天!
- java提供的4种基本控制语句结构_Java基础6-控制语句
- 在Delphi程序中操作注册表
- Oracle Proc开发之Makefile的编写模板
- iOS开发之 几本书
- 认知:什么是真正的产品思维?
- Python的multiprocessing多进程
- 基金小窍门:如何判断基金的赚与赔
- Google BBR拥塞控制算法模型初探
- 计算机的原理两条分别是,微机原理习题答案4
- PHP工程师最佳学习路线!【重磅推出】
- mysql自建云盘_使用nextcloud自建私人云盘
- 【易实战】Spring Cloud Greenwich版本发布
- 基于php的学校固定资产管理系统
- protel元件封装总结
- win10桌面无法新建文件夹解除管理员权限方法
- 网页版微信自动群发消息
- 【点云压缩】Lossless Coding of Point Cloud Geometry using a Deep Generative Model
- python 基本概念整理
- 2022,烟火如常,布衣剩饭,啥也没干,年终总结,蹈海难酬