一、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兼容性随笔相关推荐

  1. js实现点击切换checkbox背景图片

    转载自:http://www.bijishequ.com/detail/384166?p= 首页 专题 博客 文章 登录 注册 www.bijishequ.com 搜索 笔记社区共收录522,437篇 ...

  2. html checkbox复选框更换背景,js实现点击切换checkbox背景图片的简单实例

    在制作网页的过程中,经常需要实现点击切换背景图片的效果,本文关注的是表单中checkbox背景图片切换的实现.如图,在输入用户名和密码后,用户需要选择是否记住密码 图片背景为白色表示未勾选状态 ,背景 ...

  3. Vue.js实现点击左右按钮图片切换

    关于图片切换,网上也有很多的说法,这边通过参考给出了如下所示的解决方案 效果: html 通过v-for循环展示图片列表itemlist,将图片路径保存在data中的itemlist中,添加上下按钮的 ...

  4. Clipboard.js 实现点击复制

    在开发过程中难免会遇到点击分享的需求,这里有两种实现方式: 第一种: 通过原生js 的方法用(存在兼容性): document.execCommand( aCommandName, aShowDefa ...

  5. html点击背景图片变模糊,js实现点击上传图片并设为模糊背景

    本文实例为大家分享了js实现点击上传图片,同时设该图片为模糊背景,供大家参考,具体内容如下 效果展示: 源码展示: js实现点击上传图片,同时设该图片为模糊背景 input { display:blo ...

  6. html鼠标点击切换图片,js鼠标点击图片切换效果代码分享

    本文实例讲述了js鼠标点击图片切换效果.分享给大家供大家参考.具体如下: 实现原理很简单,其实是多张图片叠加起来,点击图片后依次赋予图片一个class,使其看起来在表面而已,点击图片,可以实现图片的不 ...

  7. html 点击按钮js自增,JS实现点击按钮自动增加一个单元格的方法

    本文实例讲述了JS实现点击按钮自动增加一个单元格的方法.分享给大家供大家参考.具体分析如下: 这是一个网页在线自助生成表格的特效代码. 核心功能代码是JS实现,点击网页中的添加按钮,网页中自动增加一个 ...

  8. Php点击更换封面,JavaScript_js实现点击图片改变页面背景图的方法,本文实例讲述了js实现点击图 - phpStudy...

    js实现点击图片改变页面背景图的方法 本文实例讲述了js实现点击图片改变页面背景图的方法.分享给大家供大家参考.具体实现方法如下: 点击图片即改变页面的背景图片 希望本文所述对大家的javascrip ...

  9. Clipboard.js实现点击自动复制内容的功能

    Clipboard.js实现点击自动复制内容的功能 点击非文本框,自动复制,代码如下 value:<spanid="bar"class="btn"data ...

最新文章

  1. GitHub 热门:机器学习 100 天!
  2. java提供的4种基本控制语句结构_Java基础6-控制语句
  3. 在Delphi程序中操作注册表
  4. Oracle Proc开发之Makefile的编写模板
  5. iOS开发之 几本书
  6. 认知:什么是真正的产品思维?
  7. Python的multiprocessing多进程
  8. 基金小窍门:如何判断基金的赚与赔
  9. Google BBR拥塞控制算法模型初探
  10. 计算机的原理两条分别是,微机原理习题答案4
  11. PHP工程师最佳学习路线!【重磅推出】
  12. mysql自建云盘_使用nextcloud自建私人云盘
  13. 【易实战】Spring Cloud Greenwich版本发布
  14. 基于php的学校固定资产管理系统
  15. protel元件封装总结
  16. win10桌面无法新建文件夹解除管理员权限方法
  17. 网页版微信自动群发消息
  18. 【点云压缩】Lossless Coding of Point Cloud Geometry using a Deep Generative Model
  19. python 基本概念整理
  20. 2022,烟火如常,布衣剩饭,啥也没干,年终总结,蹈海难酬

热门文章

  1. Python之二叉树的遍历
  2. Mybatis的修改列与重命名
  3. HTML5中引入JS
  4. 【PAT】B1048 数字加密
  5. 一款基于 Spring Boot 开发 OA 开源产品
  6. matplotlib绘图入门详解
  7. Java中设计模式之单例设计模式-1
  8. HBase 0.98 分布式集群安装详解
  9. Android退出程序(一)——单例模式
  10. linux入门之实用指令(三)