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. Python中的类、对象、继承

    类 Python中,类的命名使用帕斯卡命名方式,即首字母大写. Python中定义类的方式如下: class 类名([父类名[,父类名[,...]]]): pass 省略父类名表示该类直接继承自obj ...

  2. webParts与Web部件

    web部件是ASP.NET WebForm里面的服务器控件,它涵盖的内容比较多,鉴于这种状况的话鄙人不打算深究下去了,只是局限于了解web.config配置里面的配置内容则可. 那么也得稍微说说啥是W ...

  3. VS2010 VS2012 VS2013 VS2015启动调试时老是提示正在下载公共符号

    VS2010 VS2012 VS2013 VS2015启动调试时老是提示正在下载公共符号,下载一些.dll文件,点取消后也能继续调试,但特别慢.解决方法:工具-选项,或者调试-选项和设置,将调试下的& ...

  4. C#开发微信门户及应用(13)-使用地理位置扩展相关应用

    本文继续上一篇<C#开发微信门户及应用(12)-使用语音处理>,继续介绍微信的相关应用.我们知道,地理位置信息可以用来做很多相关的应用,除了我们可以知道用户所在的位置,还可以关联出一些地理 ...

  5. C/C++内存泄漏及检测

    参考 http://www.cnblogs.com/skynet/archive/2011/02/20/1959162.html

  6. boost.python笔记

    boost.python笔记 标签: boost.python,python, C++ 简介 Boost.python是什么? 它是boost库的一部分,随boost一起安装,用来实现C++和Pyth ...

  7. 2015年软件测试STATE报告

    STATE OF TESTING 2015 Report 测试职业的地理位置分配 大部分有5年以上工作经验 大部分是Test Leader   测试工程师角色   测试工程师怎么工作的? 测试中的软件 ...

  8. Struts2框架深入详解版

    一.认识Struts2 1. 什么是Web框架? 1.1  模型1 1.2  模型2 和MVC 1.3   Web框架的诞生 2. Struts1 到Struts2 2.1 其他 Web框架 2.2 ...

  9. ARCGIS SDE空间化处理

    在 Oracle 中,ST_Geometry 和 ST_Raster 的 SQL 函数使用通过 Oracle 的外部过程代理(即 extproc)访问的共享库.要将 SQL 和 ST_Geometry ...

  10. C# 获取相对路径的字符串

    目录结构 father |—— subfolder1 |—— subfolder2 当前在 subfolder1, 通过相对路径的方式获取 subfolder2的路径 string path = Pa ...