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. Android手机越用越卡？

    一直不懂Android手机为什么会越用越卡,而ios就几乎能一直保持流畅度.后来发现这个锅不该google背,而是国内混乱的Android软件开发商的锅.主要是Android对应用没什么限制,而goo ...

  3. 【原创】Kafka Consumer多线程实例

    Kafka 0.9版本开始推出了Java版本的consumer,优化了coordinator的设计以及摆脱了对zookeeper的依赖.社区最近也在探讨正式用这套consumer API替换Scala ...

  4. Redis简单案例(三) 连续登陆活动的简单实现

    连续登陆活动,或许大家都不会陌生,简单理解就是用户连续登陆了多少天之后,系统就会送一些礼品给相应的用户.最常见的 莫过于游戏和商城这些.游戏就送游戏币之类的东西,商城就送一些礼券.正值国庆,应该也有不 ...

  5. 企业管理软件ERP演变之一

             ERP软件的云应用,云管理: 移动订单: 移动订货: 移动库存: 移动工作流: 将这些原素整合在一起 聚焦企业社交网络,打造社会化企业应用的开放平台:     希望您对有帮助. 企业 ...

  6. 自己实现一个简易web服务器

    一个web服务器是网络应用中最基础的环节. 构建需要理解三个内容: 1.http协议 2.socket类 3.服务端实现原理 1.1 HTTP http请求 一般一个http请求包括以下三个部分: 1 ...

  7. Android Xfermode 学习笔记

    一.概述 Xfermode全名transfer-mode,其作用是实现两张图叠加时的混合效果. 网上流传的关于Xfermode最出名的图来源于AndroidSDK的samples中,名叫Xfermod ...

  8. git推送本地分支到远程分支

    场景 有时候我们开发需要开一个分支,这样可以有效的并行开发. 开分支有两种方式: 一种是在远程开好分支,本地直接拉下来; 一种是本地开好分支,推送到远程. 远程先开好分支然后拉到本地 git chec ...

  9. web工程常用路径的获取方法

    此文章是基于 搭建SpringMVC+Spring+Hibernate平台 一. 利用 Spring 取得web工程根路径 1. web.xml 中添加如下: <context-param> ...

  10. 严重: Exception loading sessions from persistent storage Java.io.EOFException

    tomcat启动时报此异常,但web页均能正常运行:对程序影响不大. /*具体原因时tomcat--work--(你当前运行的工程名)--session.ser*/删除即可解决 分析: EOFExce ...