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. Elasticsearch —— bulk批量导入数据

    在使用Elasticsearch的时候,一定会遇到这种场景--希望批量的导入数据,而不是一条一条的手动导入.那么此时,就一定会需要bulk命令! 更多内容参考我整理的Elk教程 bulk批量导入 批量 ...

  2. Create an offline installation of Visual Studio 2017 RC

    Create an offline installation of Visual Studio 2017 RC ‎2016‎年‎12‎月‎7‎日                             ...

  3. asp.net结合uploadify实现多附件上传

    1.说明 uploadify是一款优秀jQuery插件,主要功能是批量上传文件.大多数同学对多附件上传感到棘手,现将asp.net结合uploadfiy如何实现批量上传附件给大家讲解一下,有什么不对的 ...

  4. 【无私分享：从入门到精通ASP.NET MVC】从0开始，一起搭框架、做项目 目录索引

    索引 [无私分享:从入门到精通ASP.NET MVC]从0开始,一起搭框架.做项目(1)搭建MVC环境 注册区域 [无私分享:从入门到精通ASP.NET MVC]从0开始,一起搭框架.做项目(2)创建 ...

  5. Contents

    Contents 占位 ---------------------------------- Python3中的字符串函数学习总结

  6. lsof命令

    学习资源https://linux.die.net/man/8/lsof lsof mean list open files 如果说linux中一切皆文件的话,那么lsof就是一盏照亮黑暗的文件系统的 ...

  7. 在Eclipse中使用Git

    一.打开Eclipse,以此点击菜单Help--Install New Software-, 此时将弹出Install对话框,如下图所示: 点击Add按钮,此时将弹出Add Repository对话框 ...

  8. 共享Excel编辑的一些资源

    官方资料: 使用共享工作簿进行协作 相关介绍文章: http://www.ittribalwo.com/article/678.html http://www.wuji8.com/meta/85646 ...

  9. Hibernate框架之Criteria查询 和注解（重点☆☆☆☆☆，难点☆☆☆）

    写好一篇博客,不是容易的事.原因是:你要给自己以后看的时候,还能看懂,最重要的是当别人看到你的博客文章的时候,也一样很清楚的明白你自己写的东西.其实这也是一种成就感!! 对于每一个知识点,要有必要的解 ...

  10. 仿QQ空间根据位置弹出PopupWindow显示更多操作效果

    我们打开QQ空间的时候有个箭头按钮点击之后弹出PopupWindow会根据位置的变化显示在箭头的上方还是下方,比普通的PopupWindow弹在屏幕中间显示好看的多. 先看QQ空间效果图:       ...