JavaScript-原生js实现弹出层或背景淡入淡出效果

JavaScript-原生js实现弹出层或背景淡入淡出效果

灵芸 发布于 2017-03-25 字数 167 浏览 1092 回复 1

淡入淡出效果,在日常项目中经常用到,可惜原生JS没有类似的方法,而有时小的页面并不值得引入一个jQuery库。谁能提供一个原生js实现的已经封装好的,在各个地方调用方便方法。

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

晚风撩人 2017-10-02 1 楼

给你个原生js封装的淡入fadeIn和淡出fadeOut函数,例子:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<script type="text/javascript">
//设置元素透明度,透明度值按IE规则计,即0~100
function SetOpacity(ev, v){

ev.filters ? ev.style.filter = 'alpha(opacity=' + v + ')' : ev.style.opacity = v / 100;
}
/*
* 淡入效果
* elem==>需要淡入的元素
* speed==>淡入速度,正整数(可选)
* opacity==>淡入到指定的透明度,0~100(可选)
*/
function fadeIn(elem, speed, opacity){

speed = speed || 20;
opacity = opacity || 100;
//显示元素,并将元素值为0透明度(不可见)
elem.style.display = 'block';
SetOpacity(elem, 0);
//初始化透明度变化值为0
var val = 0;
//循环将透明值以5递增,即淡入效果
(function(){
SetOpacity(elem, val);
val += 5;
if (val <= opacity) {
setTimeout(arguments.callee, speed)
}
})();
}

/*
* 淡出效果
* elem==>需要淡入的元素
* speed==>淡入速度,正整数(可选)
* opacity==>淡入到指定的透明度,0~100(可选)
*/
function fadeOut(elem, speed, opacity){

speed = speed || 20;
opacity = opacity || 0;
//初始化透明度变化值为0
var val = 100;
//循环将透明值以5递减,即淡出效果
(function(){
SetOpacity(elem, val);
val -= 5;
if (val >= opacity) {
setTimeout(arguments.callee, speed);
}else if (val < 0) {
//元素透明度为0后隐藏元素
elem.style.display = 'none';
}
})();
}

//-->
</script>
</head>
<body>
<div>
<h2><input type="button" value="淡入" onclick="fadeIn(document.getElementById('fadeIn'));"/></h2>
<div id="fadeIn" style="display:none">
<p>aaaaaaaaaaaaaaa</p>
<p>bbbbbbbbbbbbbbb</p>
</div>
</div>
<div>
<h2><input type="button" value="淡出" onclick="fadeOut(document.getElementById('fadeOut'),50);"/></h2>
<div id="fadeOut">
<p>aaaaaaaaaaaaaaa</p>
<p>bbbbbbbbbbbbbbb</p>
</div>
</div>
</body>
</html>