So erzielen Sie Ein- und Ausblendeffekte in js_javascript-Fähigkeiten-js-Tutorial-php.cn

So erzielen Sie Ein- und Ausblendeffekte in js_javascript-Fähigkeiten

WBOY

Freigeben： 2016-05-16 15:33:28

Original

1861 Leute haben es durchsucht

Der Ein- und Ausblendeffekt wird häufig in alltäglichen Projekten verwendet. Leider gibt es in nativem JS keine ähnliche Methode, und manchmal lohnt es sich nicht, eine jQuery-Bibliothek einzuführen, daher habe ich selbst eine gekapselt und ist nützlich. Freunde, Sie können es direkt verwenden. Es gibt auch eine Methode zum Festlegen der Elementtransparenz im Code. Sie wird gemäß den IE-Regeln (0 bis 100) festgelegt. Wenn Sie sie auf die Standardeinstellungsmethode (0,00 bis 1,00) ändern, berücksichtigen Sie bitte den Gleitkommawert, um den Unterschied genau auszudrücken wenn Sie es unten verwenden.

Parameterbeschreibung:
Sowohl fadeIn() als auch fadeOut() haben drei Parameter. Der erste ist event, der zweite ist fade speed, der eine positive Ganzzahl ist Die Größe selbst ist optional. Der dritte Parameter besteht darin, den Transparenzwert anzugeben, der ein- und ausgeblendet werden soll (ähnlich wie fadeTo() in jQuery). auch ein optionaler Parameter.
Schlüsselcode:

 //淡入效果(含淡入到指定透明度) 
 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'; 
   } 
  })(); 
 }

Nach dem Login kopieren

Rendering:

Kerncode, Sie können

den Code direkt kopieren, um den Effekt zu sehen

 
 
 
 
原生JS实现淡入淡出效果 
 
<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> 

 
 
 
 
 
  
   
   
   脚本之家 
   
  脚本之家是国内专业的网站建设资源、脚本编程学习类网站,提供asp、php、asp.net、javascript、jquery、vbscript、dos批处理、网页制作、网络编程、网站建设等编程资料。 
  
  
  
   
   
    脚本之家 
   
  脚本之家是国内专业的网站建设资源、脚本编程学习类网站,提供asp、php、asp.net、javascript、jquery、vbscript、dos批处理、网页制作、网络编程、网站建设等编程资料。 
  
  
  
   
   
    脚本之家 
   
  脚本之家是国内专业的网站建设资源、脚本编程学习类网站,提供asp、php、asp.net、javascript、jquery、vbscript、dos批处理、网页制作、网络编程、网站建设等编程资料。

Nach dem Login kopieren

Das Obige ist der gesamte Code zum Realisieren des Ein- und Ausblendeffekts in nativem JS. Ich hoffe, dass er für das Lernen aller hilfreich sein wird.