淡入淡出效果在日常项目中经常使用。不幸的是，原生JS没有类似的方法，有时小页面不值得引入jQuery库，所以我写了一个打包的有用的朋友直接使用。设置元素透明度的另一种方法是附加到代码中，代码是根据IE规则(0~100)设置的。如果标准设置方式发生变化(0.00~1.00)，请在下面使用时考虑差分的浮点精确表达式。

参数说明：fadeIn()和fadeOut()有三个参数，第一个是事件，是必选的；第二个是淡入淡出速度，正整数，大小自行权衡，可选参数；第三，指定要淡入淡出的透明度值(类似于jQuery中的fadeTo()，0~100的正整数值，也是可选参数。密钥代码：

//淡入效果(包括淡入到指定透明度)功能淡入(elem、速度、不透明度){/* *参数描述* elem==元素到淡入*速度==淡入速度，正整数(可选)*不透明度==淡入到指定透明度，0~100(可选)*/speedspeed。不透明度=不透明度| | 100；//显示元素，将元素值设置为0 transparency(不可见)elem . style . display=' block '；iBase。设置容量(elem，0)；//将透明度的变化值初始化为0 var val=0//循环将透明度值增加5，即淡入效果(function () {ibase。setopacity (elem，val)；val=5；if (val=不透明度){ setTimeout(arguments.callee，speed)} })()；}//淡出效果(包括淡入指定透明度)功能淡出(elem，速度，不透明度){/* *参数说明* elem==要淡入的元素*速度==淡入速度，正整数(可选)*不透明度==淡入指定透明度，0~100(可选)*/speedspeed。不透明度=不透明度| | 0；//将透明度更改值初始化为0 var val=100//循环将透明值减少5，即淡出效果(function () {ibase。setopacity (elem，val)；val-=5；if (val=不透明度){ setTimeout(arguments.callee，speed)；}else if (val 0) {//在元素透明度为0后隐藏元素elem.style.display=' none ' after} })();}渲染：

核心代码，可以直接复制代码看效果。

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。L1-过渡时期。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' head meta http-equiv=' Content-Type ' Content=' text/html；字符集=GB 2312/标题原生射流研究…实现淡入淡出效果/title style/*演示CSS */#演示div。框{ float :左侧；宽度：31%;边距：0 1% } #演示div。方框H2 {页边距-底部：10像素} #演示区。H2盒子输入{ padd :5 px font-size :14 px；字体粗细：粗体er } #演示div。box div { text-indent :10 px；线高：22 pxborder:2px固体# 555;padding:0.5emoverflow:hidden隐藏的}/样式脚本window.onload=function(){ //底层共用var IBase={ id : function(name){返回文档。getelementbyid(名称)；}, //设置元素透明度，透明度值按工业管理学(工业工程)规则计，即0~100设置容量：功能(ev，v){ ev.filters？ev.style.filter='alpha(不透明度=' v ')' : ev.style。不透明度=v/100；} } //淡入效果（含淡入到指定透明度)功能法丁(elem，速度，不透明度){ /* *参数说明* elem==需要淡入的元素*速度==淡入速度，正整数（可选)*不透明度==淡入到指定的透明度，0~100(可选)*/转速转速=转速| | 20；不透明度=不透明度| | 100;//显示元素，并将元素值为0透明度（不可见)elem。风格。display=' blockiBase .设置容量(elem，0)；//初始化透明度变化值为0 var val=0//循环将透明值以5递增，即淡入效果(function(){ iBase .设置容量(elem，val)；val=5；if (val=不透明度){ setTimeout(参数。cauer，speed)} })))；} //淡出效果（含淡出到指定透明度)功能fadeOut(elem，速度，不透明度){ /* *参数说明* elem==需要淡入的元素*速度==淡入速度，正整数（可选)*不透明度==淡入到指定的透明度，0~100(可选)*/转速转速=转速| | 20；不透明度=不透明度| | 0;//初始化透明度变化值为0 var val=100//循环将透明值以5递减，即淡出效果(function(){ iBase .设置容量(elem，val)；val-=5；if (val=不透明度){ setTimeout(arguments . calleeper，speed)；}else if (val 0) { //元素透明度为0后隐藏元素艾伦。风格。显示='无'；} })();} var btns=iBase .Id('演示').getElementsByTagName(' input ')；btns[0].onclick=function(){ FADEIN(IBase .id(' FADEIN ')；} btns[1].onclick=function(){淡出(iBase .Id('fadeOut ')，40)；} btns[2]。onclick=function(){淡出(iBase .Id('fadeTo ')，20，10)；} }/脚本/头体！-DEMO开始-div id=' DEMO ' div class=' box ' H2输入类型=' button '值='点击淡入//H2 div id=' FADEIN ' style=' display : none ' p我们/p /div p我们是国内专业的网站建设资源、脚本编程学习类网站，提供asp、php、asp.net、javascript、jquery、vbscript、dos批处理、网页制作、网络编程、网站建设等编程资料/p/div class=' box ' H2输入类型=' button '值='点击淡出//h2 div id='fadeOut' p我们/p /div p我们是国内专业的网站建设资源、脚本编程学习类网站，提供asp、php、asp.net、javascript、jquery、vbscript、dos批处理、网页制作、网络编程、网站建设等编程资料/p/div class=' box ' H2输入类型=' button '值='点击淡出至指定透明度//h2 div id='fadeTo' p我们/p /div p我们是国内专业的网站建设资源、脚本编程学习类网站，提供asp、php、asp.net、javascript、jquery、vbscript、dos批处理、网页制作、网络编程、网站建设等编程资料/p /div /div！- DEMO end - /body /html以上就是原生射流研究…实现淡入淡出效果的全部代码，希望对大家的学习有所帮助。