Bagaimana untuk mencapai kesan fade-in dan fade-out dalam kemahiran js_javascript

Kesan fade in dan fade out sering digunakan dalam projek harian Malangnya, JS asli tidak mempunyai kaedah yang sama, dan kadangkala halaman kecil tidak berbaloi untuk memperkenalkan perpustakaan jQuery, jadi saya telah menulisnya sendiri dan berguna Kawan, anda boleh menggunakannya secara langsung. Terdapat juga kaedah untuk menetapkan ketelusan elemen dalam kod Ia ditetapkan mengikut peraturan IE (0~100 Jika ia ditukar kepada kaedah tetapan standard (0.00~1.00), sila pertimbangkan titik terapung untuk menyatakan perbezaan dengan tepat). apabila menggunakannya di bawah.

Perihalan parameter:
Kedua-dua fadeIn() dan fadeOut() mempunyai tiga parameter Yang pertama ialah peristiwa, yang kedua ialah kelajuan pudar, yang merupakan integer positif saiznya sendiri. Ia adalah pilihan; yang ketiga adalah untuk menentukan nilai ketelusan untuk memudar masuk dan keluar kepada (serupa dengan fadeTo() dalam jQuery), nilai integer positif dari 0 hingga 100, iaitu juga parameter pilihan.
Kod kunci:

//淡入效果(含淡入到指定透明度)
function fadeIn(elem, speed, opacity){
 /*
  * 参数说明
  * elem==>需要淡入的元素
  * speed==>淡入速度,正整数(可选)
  * opacity==>淡入到指定的透明度,0~100(可选)
  */
 speedspeed = speed || 20;
 opacityopacity = opacity || 100;
 //显示元素,并将元素值为0透明度(不可见)
 elem.style.display = 'block';
 iBase.SetOpacity(elem, 0);
 //初始化透明度变化值为0
 var val = 0;
 //循环将透明值以5递增,即淡入效果
 (function(){
  iBase.SetOpacity(elem, val);
  val += 5;
  if (val <= opacity) {
   setTimeout(arguments.callee, speed)
  }
 })();
}

//淡出效果(含淡出到指定透明度)
function fadeOut(elem, speed, opacity){
 /*
  * 参数说明
  * elem==>需要淡入的元素
  * speed==>淡入速度,正整数(可选)
  * opacity==>淡入到指定的透明度,0~100(可选)
  */
 speedspeed = speed || 20;
 opacityopacity = opacity || 0;
 //初始化透明度变化值为0
 var val = 100;
 //循环将透明值以5递减,即淡出效果
 (function(){
  iBase.SetOpacity(elem, val);
  val -= 5;
  if (val >= opacity) {
   setTimeout(arguments.callee, speed);
  }else if (val < 0) {
   //元素透明度为0后隐藏元素
   elem.style.display = 'none';
  }
 })();
}

Rendering:

Kod teras, anda boleh

menyalin kod terus untuk melihat kesannya

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>原生JS实现淡入淡出效果</title>
<style>
/*demo css*/
#demo div.box {float:left;width:31%;margin:0 1%}
#demo div.box h2{margin-bottom:10px}
#demo div.box h2 input{padding:5px 8px;font-size:14px;font-weight:bolder}
#demo div.box div{text-indent:10px; line-height:22px;border:2px solid #555;padding:0.5em;overflow:hidden}
</style>
<script>
window.onload = function(){
 //底层共用
 var iBase = {
  Id: function(name){
   return document.getElementById(name);
  },
  //设置元素透明度,透明度值按IE规则计,即0~100
  SetOpacity: function(ev, v){
   ev.filters &#63; ev.style.filter = 'alpha(opacity=' + v + ')' : ev.style.opacity = v / 100;
  }
 }
 //淡入效果(含淡入到指定透明度)
 function fadeIn(elem, speed, opacity){
  /*
   * 参数说明
   * elem==&gt;需要淡入的元素
   * speed==&gt;淡入速度,正整数(可选)
   * opacity==&gt;淡入到指定的透明度,0~100(可选)
   */
  speedspeed = speed || 20;
  opacityopacity = opacity || 100;
  //显示元素,并将元素值为0透明度(不可见)
  elem.style.display = 'block';
  iBase.SetOpacity(elem, 0);
  //初始化透明度变化值为0
  var val = 0;
  //循环将透明值以5递增,即淡入效果
  (function(){
   iBase.SetOpacity(elem, val);
   val += 5;
   if (val &lt;= opacity) {
    setTimeout(arguments.callee, speed)
   }
  })();
 }

 //淡出效果(含淡出到指定透明度)
 function fadeOut(elem, speed, opacity){
  /*
   * 参数说明
   * elem==&gt;需要淡入的元素
   * speed==&gt;淡入速度,正整数(可选)
   * opacity==&gt;淡入到指定的透明度,0~100(可选)
   */
  speedspeed = speed || 20;
  opacityopacity = opacity || 0;
  //初始化透明度变化值为0
  var val = 100;
  //循环将透明值以5递减,即淡出效果
  (function(){
   iBase.SetOpacity(elem, val);
   val -= 5;
   if (val &gt;= opacity) {
    setTimeout(arguments.callee, speed);
   }else if (val &lt; 0) {
    //元素透明度为0后隐藏元素
    elem.style.display = 'none';
   }
  })();
 }


 var btns = iBase.Id('demo').getElementsByTagName('input');

 btns[0].onclick = function(){
  fadeIn(iBase.Id('fadeIn'));
 }
 btns[1].onclick = function(){
  fadeOut(iBase.Id('fadeOut'),40);
 }
 btns[2].onclick = function(){
  fadeOut(iBase.Id('fadeTo'), 20, 10);
 }

}
</script>



<!--DEMO start-->
<div id="demo">
 <div class="box">
  <h2><input type="button" value="点击淡入"></h2>
  <div id="fadeIn" style="display:none">
   <p>脚本之家</p>
  </div>
  <p>脚本之家是国内专业的网站建设资源、脚本编程学习类网站,提供asp、php、asp.net、javascript、jquery、vbscript、dos批处理、网页制作、网络编程、网站建设等编程资料。</p>
 </div>

 <div class="box">
  <h2><input type="button" value="点击淡出"></h2>
  <div id="fadeOut">
    <p>脚本之家</p>
  </div>
  <p>脚本之家是国内专业的网站建设资源、脚本编程学习类网站,提供asp、php、asp.net、javascript、jquery、vbscript、dos批处理、网页制作、网络编程、网站建设等编程资料。</p>
 </div>

 <div class="box">
  <h2><input type="button" value="点击淡出至指定透明度"></h2>
  <div id="fadeTo">
    <p>脚本之家</p>
  </div>
  <p>脚本之家是国内专业的网站建设资源、脚本编程学习类网站,提供asp、php、asp.net、javascript、jquery、vbscript、dos批处理、网页制作、网络编程、网站建设等编程资料。</p>
 </div>
</div>
<!--DEMO end-->

Di atas adalah semua kod untuk merealisasikan kesan fade-in dan fade-out dalam native js. Saya harap ia akan membantu pembelajaran semua orang.