脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → fadein 和 fadeout

原生js实现fadein 和 fadeout淡入淡出效果

 更新时间：2014年06月05日 15:24:56   作者：  
这篇文章主要介绍了通过原生js实现fadein 和 fadeout淡入淡出效果,需要的朋友可以参考下
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实现瀑布流的三种方式比较

    js实现瀑布流的三种方式比较

    瀑布流，又称瀑布流式布局，是比较流行的一种网站页面布局，这篇文章主要介绍了js实现瀑布流的三种方式，感兴趣的小伙伴们可以参考一下
    2015-12-12
  • canvas实现十二星座星空图

    canvas实现十二星座星空图

    本文主要分享了canvas实现十二星座星空图的示例代码。具有很好的参考价值，下面跟着小编一起来看下吧
    2017-02-02
  • Bootstrap3下拉菜单的实现

    Bootstrap3下拉菜单的实现

    这篇文章主要介绍了Bootstrap3下拉菜单的实现方法，非常不错，具有参考借鉴价值，需要的朋友参考下
    2017-02-02
  • JavaScript 隐式类型转换规则详解

    JavaScript 隐式类型转换规则详解

    这篇文章主要为大家介绍了JavaScript 隐式类型转换规则详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步早日升职加薪
    2023-05-05
  • 如何通过JavaScript、css、H5实现简单的tab栏切换和复用功能

    如何通过JavaScript、css、H5实现简单的tab栏切换和复用功能

    tab切换在项目中也算是常用技术,一般实现tab切换都用js或者jq实现,下面这篇文章主要给大家介绍了关于如何通过JavaScript、css、H5实现简单的tab栏切换和复用功能的相关资料,需要的朋友可以参考下
    2022-11-11
  • webpack使用及如何搭建cesium三维地球环境

    webpack使用及如何搭建cesium三维地球环境

    这篇文章主要介绍了webpack快速上手之搭建cesium三维地球环境,本文使用的是webpack5，webpack5 升级后默认是不支持polyfill的，编译时会报错，本文主要介绍了Cesium以及Webpack的使用，如何将Cesium一步步地集成到Webpack中，需要的朋友可以参考下
    2023-11-11
  • Echarts如何重新渲染实例详解

    Echarts如何重新渲染实例详解

    这篇文章主要给大家介绍了关于Echarts重新渲染的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2022-05-05
  • 微信小程序将字符串生成二维码图片的操作方法

    微信小程序将字符串生成二维码图片的操作方法

    这篇文章主要介绍了微信小程序将字符串生成二维码图片的操作方法,需要的朋友可以参考下
    2018-07-07
  • JavaScript库urlcat 之URL构建器库

    JavaScript库urlcat 之URL构建器库

    这篇文章主要介绍了JavaScript库urlcat之URL构建器库，urlcat 是一个小型的JavaScript库，使构建URL非常方便并防止常见错误。下文来看对其详细介绍吧，需要的小伙伴可以参考一下
    2022-02-02
  • js实现动态加载脚本的方法实例汇总

    js实现动态加载脚本的方法实例汇总

    这篇文章主要介绍了js实现动态加载脚本的方法,以实例形式汇总并分析了几种常用的JavaScript动态加载脚本的技巧,非常具有实用价值,需要的朋友可以参考下
    2015-11-11

最新评论