GORAGOD.com

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>