GORAGOD.com

freelance, web developer, web designer, hosting, domain name

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>
0SHAREFacebookLINE it!
^