Blend Effect (Javascript)

โค้ดจะทำการ Fade In Layer หนึ่งและ Fade Out อีก Layer หนึ่งสลับกันครับ โค้ดนี้จะทำงานได้กับทั้ง Layer ทำให้สามารถทีจะ Fade ข้อความได้ด้วย ตัวอย่างการใช้งานก็ที่ส่วน แสดงข่าวในหน้าหลักครับ

การใช้งานก็เพียงเรียก
blenddiv('id ของ div', 'ข้อความที่จะแสดงใน layer รวมรูป(HTML)', speed)

<script language=Javascript>

//change the opacity for different browsers

function changeOpac(opacity, id) {

  var object = document.getElementById(id).style; 

  object.opacity = (opacity / 100);

  object.MozOpacity = (opacity / 100);

  object.KhtmlOpacity = (opacity / 100);

  object.filter = "alpha(opacity=" + opacity + ")";

}



var divcurr='div1';

var divnext='div2';



function blenddiv(divid, val, millisec) {

  var speed = Math.round(millisec / 100);

  var timer = 0;



  //สร้าง Layer ใหม่ภายใน Layer หลัก

  if (!document.getElementById('div1')) {

    var Objdivid=document.getElementById(divid);

    Objdivid.style.position="relative";

    Objdivid.innerHTML='<div id=div1 style="position: Absolute; Left: 0px; Top: 0px;"></div><div id=div2 style="position: Absolute; Left: 0px; Top: 0px;"></div>';

  }

  

  //สลับ Layer

  divcurr=divnext;

  divnext=(divcurr=='div1') ? 'div2' : 'div1';



  //กำหนดค่าใหม่ให้กับ Layer divcurr

  changeOpac(0, divcurr);

  document.getElementById(divcurr).innerHTML=val;

  document.getElementById(divcurr).style.zIndex++;

  document.getElementById(divnext).style.zIndex--;



  //fade in divcurr และ fade out divnext

  for(i=0; i<=100; i++) {

    setTimeout("changeOpac("+i+", divcurr)",(timer * speed));

    n=100-i;

    setTimeout("changeOpac("+n+", divnext)",(timer * speed));

    timer++;

  }

}

</script>