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. android手机旋转屏幕时让GridView的列数与列宽度自适应

    无意中打开了一年前做过的一个android应用的代码,看到里面实现的一个小功能点(如题),现写篇文章做个笔记.当时面临的问题是,在旋转屏幕的时候需要让gridview的列数与宽度能自适应屏幕宽度,每个 ...

  2. WebSocket异常 通常每个套接字地址(协议/网络地址/端口)只允许使用一次

    websocket的实例:http://blog.csdn.net/for_cxc/article/details/51500185 问题: 新建一个连接通信没有问题,但是如果关闭再建立就会报错:通常 ...

  3. 在公有云AZURE上部署私有云AZUREPACK以及WEBSITE CLOUD(六)

    (六)在Website Cloud中添加site 1新建Website,并打开 使用前面创建的用户 newbee@waplab.com 登录租户Portal,新建一个website 新建完成后, 可以 ...

  4. C语言计算字符串子串出现的次数

    #include<stdio.h>#include<string.h>int substring(char *str,char *str1);//函数原型int main(vo ...

  5. Java接口响应超时监控

    为什么要监控 服务化接口是提供服务的,接口正确性.稳定性是最最重要的,在保证正确的同时需要尽量提高接口响应时间. 有的团队会有专门的工具来对系统响应时间.吞吐量做监控,但如果团队没有这种"待 ...

  6. Java transient关键字

    Volatile修饰的成员变量在每次被线程访问时,都强迫从主内存中重读该成员变量的值.而且,当成员变量发生变化时,强迫线程将变化值回写到主内存.这样在任何时刻,两个不同的线程总是看到某个成员变量的同一 ...

  7. BroadcastReceiver几种常见监听

    1.BroadcastReceiver监听拨号 <intent-filter android:priority="1000" > <action android: ...

  8. Java三大框架之——Hibernate中的三种数据持久状态和缓存机制

    Hibernate中的三种状态   瞬时状态:刚创建的对象还没有被Session持久化.缓存中不存在这个对象的数据并且数据库中没有这个对象对应的数据为瞬时状态这个时候是没有OID. 持久状态:对象经过 ...

  9. java 正则匹配括号对以及其他成对出现的模式

    最近,我们有个大调整,为了控制代码的质量,需要使用一些伪代码让业务人员编写应用逻辑(其实这么做完全是处于研发效能的考虑,95%以上的代码不需要特别注意都不会导致系统性风险,),然后通过工具自动生成实际 ...

  10. 关于MySql的1146错误修正

    在Mysql数据库中建立连接Mysql后建立了一个数据库名叫Mysql后删除了系统自动建立的数个表,导入.sql文件运行后,想要运行相关的SQL语句却发现一些未知错误为 Table 'mysql.pr ...