Blend Effect (Javascript)
โค้ดจะทำการ Fade In Layer หนึ่งและ Fade Out อีก Layer หนึ่งสลับกันครับ โค้ดนี้จะทำงานได้กับทั้ง Layer ทำให้สามารถทีจะ Fade ข้อความได้ด้วย ตัวอย่างการใช้งานก็ที่ส่วน แสดงข่าวในหน้าหลักครับ
การใช้งานก็เพียงเรียก
blenddiv('id ของ div', 'ข้อความที่จะแสดงใน layer รวมรูป(HTML)', speed)
การใช้งานก็เพียงเรียก
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>