Buat beberapa div dengan lokasi absolut yang sama
Pertama-tama buatlah 3 buah div dengan posisi absolut dengan tempat yang sama persis. Dalam div tersebut letakkan 3 buah image.
<!-- #hd1 { position: absolute; left: 0px; top: 0px; filter:alpha(opacity = 100); opacity: 1.0; z-index:3; } #hd2 { position: absolute; left: 0px; top: 0px; filter:alpha(opacity = 100); opacity: 1.0; z-index:2; } #hd3 { position: absolute; left: 0px; top: 0px; filter:alpha(opacity = 100); opacity: 1.0; z-index:1; } --> </style> </head> <body> <div id="hd1"><img src="hd1.jpg" /></div> <div id="hd2"><img src="hd2.jpg" /></div> <div id="hd3"><img src="hd3.jpg" /></div>
Animasi
Untuk membuat animasi, kita membuatnya dengan membuat untuk mengubah-ubah opacitynya:
<input type="hidden" id="hd_now" value="1"> <input type="hidden" id="opv" value="1"> <input type="hidden" id="max_hd" value="3">
<script language="javascript"> function anim_hd() { var tunda=1; var hd_now=document.getElementById('hd_now').value; var op_lama=parseFloat(document.getElementById('opv').value); var max_hd=document.getElementById('max_hd').value; var op_baru; if (op_lama==0) { var hd_before; hd_before=hd_now; var zindex=max_hd; document.getElementById("hd" + hd_now).style.zIndex=zindex; for (h=1;h<max_hd;h++) { if (hd_before>1) { hd_before--; } else { hd_before=max_hd; } zindex--; document.getElementById("hd" + hd_before).style.zIndex=zindex; } } op_baru= op_lama + 0.005; var hdobj=document.getElementById("hd" + hd_now); hdobj.style.opacity=op_baru; var opacity_IE=op_baru * 100; var iefilter="alpha(opacity = "+ opacity_IE+")"; hdobj.style.filter=iefilter ; if (op_baru>=1) { if (hd_now<max_hd) { hd_now++; } else { hd_now=1; } op_baru=0; tunda=5000; } else { hdobj.style.zIndex=max_hd; } document.getElementById('hd_now').value=hd_now; document.getElementById('opv').value=op_baru; //fungsi=; //alert(fungsi); setTimeout("anim_hd()",tunda); } anim_hd(); </script>
Script secara keseluruhan:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Animasi image dengan Js</title> <style type="text/css"> <!-- #hd1 { position: absolute; left: 0px; top: 0px; filter:alpha(opacity = 100); opacity: 1.0; z-index:3; } #hd2 { position: absolute; left: 0px; top: 0px; filter:alpha(opacity = 100); opacity: 1.0; z-index:2; } #hd3 { position: absolute; left: 0px; top: 0px; filter:alpha(opacity = 100); opacity: 1.0; z-index:1; } --> </style> </head> <body> <div id="hd1"><img src="hd1.jpg" /></div> <div id="hd2"><img src="hd2.jpg" /></div> <div id="hd3"><img src="hd3.jpg" /></div> <input type="hidden" id="hd_now" value="1"> <input type="hidden" id="opv" value="1"> <input type="hidden" id="max_hd" value="3">
<script language="javascript"> function anim_hd() { var tunda=1; var hd_now=document.getElementById('hd_now').value; var op_lama=parseFloat(document.getElementById('opv').value); var max_hd=document.getElementById('max_hd').value; var op_baru; if (op_lama==0) { var hd_before; hd_before=hd_now; var zindex=max_hd; document.getElementById("hd" + hd_now).style.zIndex=zindex; for (h=1;h<max_hd;h++) { if (hd_before>1) { hd_before--; } else { hd_before=max_hd; } zindex--; document.getElementById("hd" + hd_before).style.zIndex=zindex; } } op_baru= op_lama + 0.005; var hdobj=document.getElementById("hd" + hd_now); hdobj.style.opacity=op_baru; var opacity_IE=op_baru * 100; var iefilter="alpha(opacity = "+ opacity_IE+")"; hdobj.style.filter=iefilter ; if (op_baru>=1) { if (hd_now<max_hd) { hd_now++; } else { hd_now=1; } op_baru=0; tunda=5000; } else { hdobj.style.zIndex=max_hd; } document.getElementById('hd_now').value=hd_now; document.getElementById('opv').value=op_baru; //fungsi=; //alert(fungsi); setTimeout("anim_hd()",tunda); } anim_hd(); </script> </body> </html>
Selamat mencoba.
Silahkan klik suka jika postingan ini anda sukai. Terima kasih semoga bermanfaat.
Untuk membuat animasi, kita membuatnya dengan membuat untuk mengubah-ubah opacitynya:
<input type="hidden" id="hd_now" value="1"> <input type="hidden" id="opv" value="1"> <input type="hidden" id="max_hd" value="3">
<script language="javascript"> function anim_hd() { var tunda=1; var hd_now=document.getElementById('hd_now').value; var op_lama=parseFloat(document.getElementById('opv').value); var max_hd=document.getElementById('max_hd').value; var op_baru; if (op_lama==0) { var hd_before; hd_before=hd_now; var zindex=max_hd; document.getElementById("hd" + hd_now).style.zIndex=zindex; for (h=1;h<max_hd;h++) { if (hd_before>1) { hd_before--; } else { hd_before=max_hd; } zindex--; document.getElementById("hd" + hd_before).style.zIndex=zindex; } } op_baru= op_lama + 0.005; var hdobj=document.getElementById("hd" + hd_now); hdobj.style.opacity=op_baru; var opacity_IE=op_baru * 100; var iefilter="alpha(opacity = "+ opacity_IE+")"; hdobj.style.filter=iefilter ; if (op_baru>=1) { if (hd_now<max_hd) { hd_now++; } else { hd_now=1; } op_baru=0; tunda=5000; } else { hdobj.style.zIndex=max_hd; } document.getElementById('hd_now').value=hd_now; document.getElementById('opv').value=op_baru; //fungsi=; //alert(fungsi); setTimeout("anim_hd()",tunda); } anim_hd(); </script>
Script secara keseluruhan:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Animasi image dengan Js</title> <style type="text/css"> <!-- #hd1 { position: absolute; left: 0px; top: 0px; filter:alpha(opacity = 100); opacity: 1.0; z-index:3; } #hd2 { position: absolute; left: 0px; top: 0px; filter:alpha(opacity = 100); opacity: 1.0; z-index:2; } #hd3 { position: absolute; left: 0px; top: 0px; filter:alpha(opacity = 100); opacity: 1.0; z-index:1; } --> </style> </head> <body> <div id="hd1"><img src="hd1.jpg" /></div> <div id="hd2"><img src="hd2.jpg" /></div> <div id="hd3"><img src="hd3.jpg" /></div> <input type="hidden" id="hd_now" value="1"> <input type="hidden" id="opv" value="1"> <input type="hidden" id="max_hd" value="3">
<script language="javascript"> function anim_hd() { var tunda=1; var hd_now=document.getElementById('hd_now').value; var op_lama=parseFloat(document.getElementById('opv').value); var max_hd=document.getElementById('max_hd').value; var op_baru; if (op_lama==0) { var hd_before; hd_before=hd_now; var zindex=max_hd; document.getElementById("hd" + hd_now).style.zIndex=zindex; for (h=1;h<max_hd;h++) { if (hd_before>1) { hd_before--; } else { hd_before=max_hd; } zindex--; document.getElementById("hd" + hd_before).style.zIndex=zindex; } } op_baru= op_lama + 0.005; var hdobj=document.getElementById("hd" + hd_now); hdobj.style.opacity=op_baru; var opacity_IE=op_baru * 100; var iefilter="alpha(opacity = "+ opacity_IE+")"; hdobj.style.filter=iefilter ; if (op_baru>=1) { if (hd_now<max_hd) { hd_now++; } else { hd_now=1; } op_baru=0; tunda=5000; } else { hdobj.style.zIndex=max_hd; } document.getElementById('hd_now').value=hd_now; document.getElementById('opv').value=op_baru; //fungsi=; //alert(fungsi); setTimeout("anim_hd()",tunda); } anim_hd(); </script> </body> </html>
Selamat mencoba.
Silahkan klik suka jika postingan ini anda sukai. Terima kasih semoga bermanfaat.
0 comments:
Post a Comment
semoga postingan di atas bermanfaat, jika postingan ini menarik tinggalkan komentar anda di sini