本文主要介绍native js如何实现淡入淡出效果。本文为您提供了打包的代码。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。
淡入效果在日常项目中经常使用。可惜原生JS没有类似的方法，有时候小页面不值得引入一个jQuery库，所以我自己写了一个，打包了，很有用，可以直接用。还有一种设置代码中元素透明度的方法，按照IE规则设置(0~100)。如果换成标准的设置方式(0.00~1.00)，下面使用时请考虑浮点来准确表达差异。
参数说明：
FadeIn()和fadeOut()有三个参数，第一个是事件，必选；第二个是淡入淡出速度，正整数，自己加权，可选参数；第三种是指定淡入淡出到的透明度值(类似jQuery中的fadeTo()，0到100的正整数值，也是可选参数。
关键代码：
//淡入效果(包括淡入到指定的透明度)
功能淡入(元素、速度、不透明度){
/*
*参数描述
* elem==要淡入的元素。
* speed==淡入速度，正整数(可选)
*不透明度==淡入指定的透明度，0~100(可选)
*/
speedspeed=速度| | 20；
opacityopacity=opacity | | 100
//显示元素并将元素值设置为0透明度(不可见)
elem . style . display=' block '；
iBase。seto capacity(elem，0)；
//将透明度更改值初始化为0
var val=0；
//循环将透明度值递增5，即淡入效果。
(函数(){
iBase。seto capacity(elem，val)；
val=5；
if (val=opacity) {
setTimeout(参数.被调用方，速度)
}
})();
}
//淡出效果(包括淡出到指定的透明度)
功能淡出(元素、速度、不透明度){
/*
*参数描述
* elem==要淡入的元素。
* speed==淡入速度，正整数(可选)
*不透明度==淡入指定的透明度，0~100(可选)
*/
speedspeed=速度| | 20；
opacity opacity=opacity | | 0；
//将透明度更改值初始化为0
var val=100
//循环将透明度值减少5，即淡出效果。
(函数(){
iBase。seto capacity(elem，val)；
val-=5；
if (val=opacity) {
setTimeout(arguments.callee，speed)；
}else if (val 0) {
//在元素透明度为0后隐藏元素
elem . style . display=' none '；
}
})();
}
效果图：
核心代码，可以直接复制代码查看效果
超文本标记语言
头
meta http-equiv=' Content-Type ' Content=' text/html；charset=gb2312' /
Title原生JS实现淡入淡出效果/title
风格
/*演示css*/
# demo div . box { float:left；宽度：31%；毛利：0 1%}
#演示分区框h2{margin-bottom:10px}
#demo div.box h2输入{ padding:5px 8px；字体大小：14pxfont-weight:bolder}
# demo div . box div { text-indent:10px；行高：22px边框：2px纯色# 555；填充：0.5em溢出：隐藏}
/风格
脚本
window.onload=function(){
//底层共享
var iBase={
Id:函数(名称){
返回document.getElementById(名称)；
},
//设置元素透明度，透明度值根据IE规则计算，即0~100。
set capacity:function(ev，v){
电动过滤器？ev . style . filter=' alpha(opacity=' v ')':ev . style . opacity=v/100；
}
}
//淡入效果(包括淡入到指定的透明度)
功能淡入(元素、速度、不透明度){
/*
*参数描述
* elem==要淡入的元素。
* speed==淡入速度，正整数(可选)
*不透明度==淡入指定的透明度，0~100(可选)
*/
speedspeed=速度| | 20；
opacityopacity=opacity | | 100
//显示元素并将元素值设置为0透明度(不可见)
elem . style . display=' block '；
iBase。seto capacity(elem，0)；
//将透明度更改值初始化为0
var val=0；
//循环将透明度值递增5，即淡入效果。
(函数(){
iBase。seto capacity(elem，val)；
val=5；
if (val=opacity) {
setTimeout(参数.被调用方，速度)
}
})();
}
//淡出效果(包括淡出到指定的透明度)
功能淡出(元素、速度、不透明度){
/*
*参数描述
* elem==要淡入的元素。
* speed==淡入速度，正整数(可选)
*不透明度==淡入指定的透明度，0~100(可选)
*/
speedspeed=速度| | 20；
opacity opacity=opacity | | 0；
//将透明度更改值初始化为0
var val=100
//循环将透明度值减少5，即淡出效果。
(函数(){
iBase。seto capacity(elem，val)；
val-=5；
if (val=opacity) {
setTimeout(arguments.callee，speed)；
}else if (val 0) {
//在元素透明度为0后隐藏元素
elem . style . display=' none '；
}
})();
}
var btns=iBase。Id('demo ')。getElementsByTagName(“input”)；
btns[0]。onclick=function(){
fadeIn(iBase。id(' fade in ')；
}
btns[1]。onclick=function(){
淡出(iBase。Id('fadeOut ')，40)；
}
btns[2]。onclick=function(){
淡出(iBase。Id('fadeTo ')，20，10)；
}
}
/脚本
/头
身体
!-演示开始-
div id='demo '
div class='box '
H2input type='button' value='单击以淡入'//h2
div id=' fade in ' style=' display:none '
我们/p
/div
p我们是国内专业的建站资源和脚本编程学习网站，提供asp、php、ASP.NET、javascript、jquery、vbscript、dos批处理、网页制作、网络编程、网站建设等编程素材。/p
/div
div class='box '
H2input type='button' value='单击以淡出'//h2
div id='fadeOut '
我们/p
/div
p我们是国内专业的建站资源和脚本编程学习网站，提供asp、php、ASP.NET、javascript、jquery、vbscript、dos批处理、网页制作、网络编程、网站建设等编程素材。/p
/div
div class='box '
H2input type='button' value='单击以淡出到指定的透明度'//h2
div id='fadeTo '
我们/p
/div
p我们是国内专业的建站资源和脚本编程学习网站，提供asp、php、ASP.NET、javascript、jquery、vbscript、dos批处理、网页制作、网络编程、网站建设等编程素材。/p
/div
/div
!-演示结束-
/body
/html
以上是原生js实现淡入淡出效果的全部代码。希望对大家的学习有帮助。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。