suchen

Heim >Web-Frontend >js-Tutorial >Ein- und Ausblenden von JavaScript mit einfachen example_javascript-Kenntnissen

Ein- und Ausblenden von JavaScript mit einfachen example_javascript-Kenntnissen

WBOY
WBOYOriginal
2016-05-16 15:46:471365Durchsuche

Das Beispiel in diesem Artikel beschreibt die Implementierungsmethode des JavaScript-Ein- und Ausblendverlaufs. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Hier ist ein Beispiel für einen Textverlauf mit JavaScript zum Ein- und Ausblenden. Verwenden Sie js, um Div-Tag-Elemente zu steuern, um eine Verlaufsanzeige und ein Ausblenden des Verlaufs zu erreichen Einfach und leicht zu modifizieren und zu verbessern. Grundlegende Webeffekte.

Der Betriebseffekt ist wie folgt:

Der spezifische Code lautet wie folgt: 

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js代码控制元素简单的淡入淡出效果</title>
<style>
* {margin:0; padding:0}
body {font:12px Verdana,Arial; color:#777; background:#222}
a {color:#999; text-decoration:none}
a:hover {color:#bbb}
#wrapper {width:500px; margin:75px auto}
#buttons {height:35px}
.button {border:1px solid #eee; background:#ccc; border-radius:3px; -moz-border-radius:3px; padding:4px 0 5px; width:245px; text-align:center; cursor:pointer; float:left; color:#555}
.button:hover {border:1px solid #fff; background:#d9d9d9; color:#333}
.floatright {float:right}
#fade {opacity:0; filter:alpha(opacity='0') border-radius:3px; -moz-border-radius:3px; margin-bottom:10px; padding:9px 10px 0; height:26px; border:1px solid #548954; background:#355c33; color:#79af72; text-shadow:1px 1px #21341d}
</style>
<script type="text/javascript">
var fadeEffect=function(){
 return{
  init:function(id, flag, target){
   this.elem = document.getElementById(id);
   clearInterval(this.elem.si);
   this.target = target &#63; target : flag &#63; 100 : 0;
   this.flag = flag || -1;
   this.alpha = this.elem.style.opacity &#63; parseFloat(this.elem.style.opacity) * 100 : 0;
   this.si = setInterval(function(){fadeEffect.tween()}, 20);
  },
  tween:function(){
   if(this.alpha == this.target){
    clearInterval(this.si);
   }else{
    var value = Math.round(this.alpha + ((this.target - this.alpha) * .05)) + (1 * this.flag);
    this.elem.style.opacity = value / 100;
    this.elem.style.filter = 'alpha(opacity=' + value + ')';
    this.alpha = value
   }
  }
 }
}();
</script>
</head>
<body>
<div id="wrapper">
<div id="fade">JavaScript淡入淡出渐变例子</div>
<div id="buttons">
 <div class="button" onclick="fadeEffect.init('fade', 1)">Fade In</div>
 <div class="button floatright" onclick="fadeEffect.init('fade', 0)">Fade Out</div>
</div>
<p>For more information visit 样式版权所有.<br />
</p>
</div>
</body>
</html>

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：jquery implementiert „Klicken, um mehr Inhalt anzuzeigen“, um den Erweiterungs- und Falteffekt von Absatz text_jquery zu steuernNächster Artikel：jquery implementiert „Klicken, um mehr Inhalt anzuzeigen“, um den Erweiterungs- und Falteffekt von Absatz text_jquery zu steuern

In Verbindung stehende Artikel

Mehr sehen