JavaScript memudar dan menghilangkan kemahiran example_javascript yang mudah-tutorial js-php.cn

JavaScript memudar dan menghilangkan kemahiran example_javascript yang mudah

WBOY

Lepaskan： 2016-05-16 15:46:47

asal

1332 orang telah melayarinya

Contoh dalam artikel ini menerangkan kaedah pelaksanaan kecerunan fade-in dan fade-out JavaScript. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Berikut ialah contoh kecerunan teks menggunakan JavaScript untuk memudar masuk dan keluar Gunakan js untuk mengawal elemen teg div untuk mencapai paparan kecerunan dan penyembunyian kecerunan Selagi kandungan dalam teg itu pudar masuk dan keluar, kod itu mudah dan mudah untuk mengubah suai dan menambah baik kesan web Essential pereka hadapan.

Kesan operasi adalah seperti yang ditunjukkan di bawah:

Kod khusus adalah seperti berikut:

<!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>

Salin selepas log masuk

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang.