原生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和新版本IEele.style.opacity = opacity / 100;} else {///兼容老版本ieele.style.filter = "alpha(opacity=" + opacity + ")";}
}

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);}}, 100);}
}

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);}}, 100);}
}

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>

转自：http://www.cnblogs.com/a546558309/p/3737070.html

原生js实现fadein 和 fadeout相关推荐

原生js实现fadein 和 fadeout淡入淡出效果
用法: $("button").click(function(){ $("p").fadeOut(); }); fadeOut() 方法逐渐改变被选元素的不透明 ...
纯JS实现fadeIn 和fadeOut
CSS相关透明度的设置方式 filter:alpha(opacity=50); opacity: 0.5; opacity: 0.5 This is the "most important& ...
原生JS实现淡入淡出效果(fadeIn/fadeOut/fadeTo)
淡入淡出效果,在日常项目中经常用到,可惜原生JS没有类似的方法,而有时小的页面并不值得引入一个jQuery库,所以就自己写了一个,已封装, 有用得着的朋友, 可以直接使用. 代码中另附有一个设置元素透 ...
原生js实现地址选择组件（三级联动）
1.实现效果 2.实现步骤首先引入地址json数据,省市区,三级联动,该demo展示省市两级联动,三级联动同理. 样式可以进行自定义. <section class="mySetti ...
个人整理的原生js图片轮播
个人整理的原生js图片轮播(滚动) **第一种方法:**一个窗口多张图片进行滚动(图片的尺寸宽高都一样,在一个窗口进行滚动) 这一种应该是刚出来没有工作经验的太白用的(个人猜测,本人一开始也 ...
html鼠标滚动图片渐渐淡出,原生js和jquery实现图片轮播淡入淡出效果
图片轮播有很多种方式,这里采用其中的淡入淡出形式 js原生和jQuery都可以实现,jquery因为封装了很多用法,所以用起来就简单许多,转换成js使用,其实也就是用js原生模拟出这些用法. 但不管 ...
使用原生js来替换title属性的悬浮文字提示-可自定义样式和出现时间-190826更新版本2.0源代码
简介要让一个DOM元素出现悬浮文字提示,一般情况下,我们都会选择使用H5的title属性.例如: <div title="456">123</div> 这 ...
fadein和fadeto_jQuery fadeIn，fadeOut，fadeTo
fadein和fadeto jQuery provides an easy way to implement transparency effect in HTML through fadeIn(), ...
html多图轮播淡入淡出js,原生JS实现图片轮播与淡入效果的简单实例
最近对css的兴趣提不起来,因为以前对图片轮播一直耿耿于怀苦于学艺不精,所以,花了点时间熟悉了一下js.然后一条道走到黑,用jquery和js写了一下轮播和图片淡入的效果.以后学习的路很长,希望自己在 ...

原生js实现fadein 和 fadeout

原生js实现fadein 和 fadeout相关推荐

最新文章

热门文章