js里面设置DOM节点透明度的函数属性：filter= "alpha(opacity=" + value+ ")"（兼容ie）和opacity=value/100（兼容FF和GG）。

先来看看设置透明度的兼容性代码：

function setOpacity(ele, opacity) {

    if (ele.style.opacity != undefined) {

        ///兼容FF和GG和新版本IE

        ele.style.opacity = opacity / 100;

    } else {

        ///兼容老版本ie

        ele.style.filter = "alpha(opacity=" + opacity + ")";

    }

}

关于有的小伙伴这样写：

function setOpacity(ele, opacity) {

    if (document.all) {

        ///兼容ie

        ele.style.filter = "alpha(opacity=" + opacity + ")";

    }

    ele {

        ///兼容FF和GG

        ele.style.opacity = opacity / 100;

    }

}

我想说这样在IE10下运行有问题，点了之后没反应。因为IE10支持opacity属性不支持filter了，这个方法不可取。

fadein   函数代码：

function fadein(ele, opacity, speed) {

    if (ele) {

        var v = ele.style.filter.replace("alpha(opacity=", "").replace(")", "") || ele.style.opacity;

        v < 1 && (v = v * 100);

        var count = speed / 1000;

        var avg = count < 2 ? (opacity / count) : (opacity / count - 1);

        var timer = null;

        timer = setInterval(function() {

            if (v < opacity) {

                v += avg;

                setOpacity(ele, v);

            } else {

                clearInterval(timer);

            }

        }, 500);

    }

}

fadeout   函数代码：

function fadeout(ele, opacity, speed) {

    if (ele) {

        var v = ele.style.filter.replace("alpha(opacity=", "").replace(")", "") || ele.style.opacity || 100;

        v < 1 && (v = v * 100);

        var count = speed / 1000;

        var avg = (100 - opacity) / count;

        var timer = null;

        timer = setInterval(function() {

            if (v - avg > opacity) {

                v -= avg;

                setOpacity(ele, v);

            } else {

                clearInterval(timer);

            }

        }, 500);

    }

}

下面给一个demo示例：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

<script type="text/javascript" src="fade.js"></script>

    <script type="text/javascript">

        window.onload = function () {

            document.getElementById('Button1').onclick = function () {

                fadeout(document.getElementById('DV'), 0, 6000);

            }

            document.getElementById('Button2').onclick = function () {

                fadein(document.getElementById('DV'), 80, 6000);

            }

        }

    </script>

</head>

<body>

    <div id="DV" style="background-color: green; width: 400px; height: 400px;"></div>

    <input id="Button1" type="button" value="button" />

    <input id="Button2" type="button" value="button" />

</body>

</html>

有什么更好的实现方式可以留言。。。

原生js实现fadein 和 fadeout的更多相关文章

  1. 原生JS实现淡入淡出效果(fadeIn/fadeOut/fadeTo)

    淡入淡出效果,在日常项目中经常用到,可惜原生JS没有类似的方法,而有时小的页面并不值得引入一个jQuery库,所以就自己写了一个,已封装, 有用得着的朋友, 可以直接使用. 代码中另附有一个设置元素透 ...

  2. 使用原生js与jQuery分别实现一个简单的tab页签

    tab页签通常适用于空间有限而内容较多同时兼顾页面美观度不给用户一种信息过量视觉疲劳的情形.使用面非常广,下面我们用两种方法简单实现之. 首先,构建页面元素.页签的可点击部分我们通常用列表来承载,包括 ...

  3. 原生js替换jQuery各种方法-中文版

    原文https://github.com/nefe/You-D... 原生JS与jQuery操作DOM对比 You Don't Need jQuery 前端发展很快,现代浏览器原生 API 已经足够好 ...

  4. 轮播图原生js实现和jquery实现和js面向对象方式实现

    原生JS实现 html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  5. Jquery小例子:全选按钮、加事件、挂事件；parent()语法；slideToggle()语法；animate()语法；元素的淡入淡出效果：fadeIn() 、fadeOut()、fadeToggle() 、fadeTo()；function(e):e包括事件源和时间数据;append() 方法

    function(e): 事件包括事件源和事件数据,事件源是指是谁触发的这个事件,谁就是事件源(div,按钮,span都可以是事件源),时间数据是指比如点击鼠标的事件中,事件数据就是指点击鼠标的左建或 ...

  6. 面向对象原生js幻灯片代淡出效果

    面向对象原生js幻灯片代淡出效果 下面是代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" & ...

  7. jQuery与原生js实现banner轮播图

    jQuery与原生js实现banner轮播图: (jq需自己加载)(图片需自己加载) <!DOCTYPE html> <html> <head> <meta ...

  8. jQuery效果-----fadeIn()、fadeOut()、fadeToggle()、fadeTo()

    fadeIn(),fadeOut(),fadeToggle(),fadeTo() fadeIn()-----淡入已经隐藏的元素(把隐藏的被选元素渐渐显示出来). 语法:$(selector).fade ...

  9. 原生js开发，无依赖、轻量级的现代浏览器图片懒加载插件，适合在移动端开发使用

    优势 1.原生js开发,不依赖任何框架或库 2.支持将各种宽高不一致的图片,自动剪切成默认图片的宽高 比如说你的默认图片是一张正方形的图片,则各种宽度高度不一样的图片,自动剪切成正方形. 完美解决移动 ...

随机推荐

  1. iOS 保存、读取与应用状态

    固化 对于大多数iOS应用,可以将其功能总结为:提供一套界面,帮助用户管理特定的数据.在这一过程中,不同类型的对象要各司其职:模型对象负责保存数据,视图对象负责显示数据,控制器对象负责在模型对象与视图 ...

  2. 基于傅里叶变换和PyQt4开发一个简单的频率计数器

    小学期的<信号与系统>课,要求写一个频率计数器,下面是我个人理解的频率计数 傅里叶变换的代码: # coding=utf-8 import numpy as np from scipy.i ...

  3. .Net语言 APP开发平台——Smobiler学习日志：快速实现手机上的图片上传功能

    最前面的话:Smobiler是一个在VS环境中使用.Net语言来开发APP的开发平台,也许比Xamarin更方便 一.目标样式 我们要实现上图中的效果,需要如下的操作: 1.从工具栏上的"S ...

  4. C# 视频编辑

    VidCoder VidCoder是一个开源免费的DVD/蓝光视频抓取和转码软件.使用HandBrake做为编码引擎.比Handbrake拥有更友好的用户界面. 可裁剪.剪切.字幕编辑.转码等. 官网 ...

  5. .NET正则表达式基础入门（四）

    断言 判断某个位置左侧或者右侧是否符合匹配.常见断言有三种,单词边界.行起始/结束位置.环视.阅读本章前,建议先下载我于CSDN上传的示例代码,下载无需分数,下载链接. 1.单词边界 正则表达式&qu ...

  6. [下载]北京新版小学英语五年级上册mp3点读APP

    义务教育教科书小学英语五年级上册点读软件.根据2014年北京教改版教材编写,发音标准.实现点读功能.点到哪里读到哪里.哪里不会点哪里!北京教育科学研究院编写,北京出版社出版.ISBN:97872001 ...

  7. 基于redis的处理session的方法

    一个基于redis的处理session的方法,如下. <?php class Session_custom { private $redis; // redis实例 private $prefi ...

  8. Httpster –世界各地最潮的网页设计案例聚合网站

    Httpster 这个网站聚合了世界各地最新最潮的网页设计案例,展示了创意的设计,精心的策划,优秀的排版.这些作品都按月份和类别进行了很好划分,你可以方便的找到自己感兴趣的网站案例. 立即去看看 您可 ...

  9. Atitit 在线支付系统功能设计原理与解决方案 与目录

    Atitit 在线支付系统功能设计原理与解决方案 与目录 1.1. 支付系统1 1.2. 独立的支付子体系..微服务架构..1 1.3. 参考书籍1 支付战争 [The PayPal Wars:Bat ...

  10. 蓝牙协议中的SBC编码

    一.从信息的传输说起  上图是一个典型的蓝牙耳机应用场景.手机上的音频信息经过编码以后通过蓝牙协议被蓝牙耳机接收,经过解码以后,蓝牙耳机成功获取手机上的音频信息,然后再转化为振动被人耳识别.这是一个 ...