版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_29326717/article/details/83046630
tip.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tip效果</title>
</head>
<body>
<script src="tip.js"></script>
<script>
tipFun('你好');
</script>
</body>
</html>tip.js
function tipFun(msg){
// 移除原有元素
var rmTip = document.getElementsByClassName('tip-wrap');
if(rmTip.length>0){
for(var i=0,len=rmTip.length; i<len; i++){
document.body.removeChild(rmTip[i]);
}
}
//创建元素
var bodyW = document.documentElement.clientWidth || document.body.clientWidth;
var creatTip = document.createElement('div');
creatTip.classList.add('tip-wrap');
document.body.appendChild(creatTip);
creatTip.style.position='fixed';
creatTip.style['text-align']='center';
creatTip.style.color='#FFFFFF';
creatTip.style.bottom='20px';
creatTip.style.left='0';
creatTip.style.right='0';
creatTip.style.margin='0 auto';
creatTip.innerHTML = '<span style="display: inline-block;background-color:rgba(0, 0, 0, 0.7); padding: 6px 12px; border-radius: 5px;">'+msg+'</span>';
var speed = 50;
var opacity = 0;//初始化透明度变化值为0
var val = 100;
var tip = document.getElementsByClassName('tip-wrap')[0];
var body = document.body;
var base = {
Id: function(name){
return document.getElementById(name);
},
Class: function(name){
return document.getElementsByClassName(name);
},
setOpacity: function(ele, v){//设置元素透明度,透明度值按IE规则计,即0~100
ele.filters?ele.style.filter='alpha(opacity='+v+')' : ele.style.opacity=v/100;
}
};
var effect = {
out: function(){
(function(){
base.setOpacity(tip,val);
val -= 5;
if(val>=opacity){
setTimeout(arguments.callee, speed);
}else if(val < 0){
body.removeChild(tip); // 元素透明度为0后隐藏元素
}
})();
}
};
setTimeout(effect.out,1000);
}效果如下图所示：
