Pada tutorial ini kita hanya memanfaatkan javascript dan CSS doang kawan memang benar-benar senjata terampuh para web programmer javascript dan CSS itu kawan, kemudian kondisi left dan top juga dicek, untuk nanti melakukan pergeseran ditempat yang sudah kita tetapkan....
bingung ya kawan? jangan binguuung, mudah koo', berikut ini langkah-langkahnya...
1. Buka Text Editor, seperti Notepad++ kesayanganku itu, kl blom punya NotePad++ silahkan
Download Disini
2. Buka New File
3. Ketikkan Script JavaScript berikut ini kawan di bawah
<header>
<SCRIPT LANGUAGE="JavaScript">
<!--
floatX=10;
floatY=10;
layerwidth=170;
layerheight=320;
halign="left";
valign="bottom";
delayspeed=3;
NS6=false;
IE4=(document.all);
if (!IE4) {NS6=(document.getElementById);}
NS4=(document.layers);
function adjust() {
if ((NS4) || (NS6)) {
if (lastX==-1 || delayspeed==0)
{
lastX=window.pageXOffset + floatX;
lastY=window.pageYOffset + floatY;
}
else
{
var dx=Math.abs(window.pageXOffset+floatX-lastX);
var dy=Math.abs(window.pageYOffset+floatY-lastY);
var d=Math.sqrt(dx*dx+dy*dy);
var c=Math.round(d/10);
if (window.pageXOffset+floatX>lastX) {lastX=lastX+delayspeed+c;}
if (window.pageXOffset+floatX<lastX) {lastX=lastX-delayspeed-c;}
if (window.pageYOffset+floatY>lastY) {lastY=lastY+delayspeed+c;}
if (window.pageYOffset+floatY<lastY) {lastY=lastY-delayspeed-c;}
}
if (NS4){
document.layers['floatlayer'].pageX = lastX;
document.layers['floatlayer'].pageY = lastY;
}
if (NS6){
document.getElementById('floatlayer').style.left=lastX;
document.getElementById('floatlayer').style.top=lastY;
}
}
else if (IE4){
if (lastX==-1 || delayspeed==0)
{
lastX=document.body.scrollLeft + floatX;
lastY=document.body.scrollTop + floatY;
}
else
{
var dx=Math.abs(document.body.scrollLeft+floatX-lastX);
var dy=Math.abs(document.body.scrollTop+floatY-lastY);
var d=Math.sqrt(dx*dx+dy*dy);
var c=Math.round(d/10);
if (document.body.scrollLeft+floatX>lastX) {lastX=lastX+delayspeed+c;}
if (document.body.scrollLeft+floatX<lastX) {lastX=lastX-delayspeed-c;}
if (document.body.scrollTop+floatY>lastY) {lastY=lastY+delayspeed+c;}
if (document.body.scrollTop+floatY<lastY) {lastY=lastY-delayspeed-c;}
}
document.all['floatlayer'].style.posLeft = lastX;
document.all['floatlayer'].style.posTop = lastY;
}
setTimeout('adjust()',50);
}
function define()
{
if ((NS4) || (NS6))
{
if (halign=="left") {floatX=ifloatX};
if (halign=="right") {floatX=window.innerWidth-ifloatX-layerwidth-20};
if (halign=="center") {floatX=Math.round((window.innerWidth-20)/2)-Math.round(layerwidth/2)};
if (valign=="top") {floatY=ifloatY};
if (valign=="bottom") {floatY=window.innerHeight-ifloatY-layerheight};
if (valign=="center") {floatY=Math.round((window.innerHeight-20)/2)-Math.round(layerheight/2)};
}
if (IE4)
{
if (halign=="left") {floatX=ifloatX};
if (halign=="right") {floatX=document.body.offsetWidth-ifloatX-layerwidth-20}
if (halign=="center") {floatX=Math.round((document.body.offsetWidth-20)/2)-Math.round(layerwidth/2)}
if (valign=="top") {floatY=ifloatY};
if (valign=="bottom") {floatY=document.body.offsetHeight-ifloatY-layerheight}
if (valign=="center") {floatY=Math.round((document.body.offsetHeight-20)/2)-Math.round(layerheight/2)}
}
}
//-->
</script>
4. Setelah itu kita membuat DIV di bagian header, DIV disini nantinya yang akan digunakan untuk menjadi tempat bagi kita menaruh menu yang hendak dijalankan ke atas dan kebawah, atu ke kanan maupun ke kiri. ketik script berikut ini tepat dibawahnya tag html
<body>
if (NS4) {document.write('<LAYER NAME="floatlayer" LEFT="'+floatX+'" TOP="'+floatY+'">');}
if ((IE4) || (NS6)) {document.write('<div id="floatlayer" style="position:absolute;width:1800px;
left:'+floatX+'; top:'+floatY+';width:30%;margin-top:-150px;">');}
5. ketikkan kata atau menu yang akan selalu bergeser ke bawah dan ke atas tepatdibawah kode diatas. dalam hal ini aku menuliskan menu berikut ini
<div class="menujquery">
<h2>Posting Terbaru <div class="tutup">x</div></h2>
<li><a href="./isi.html">Membuat Menu Mengikuti Cursor Kebawah Seperti
Menu di Kaskus</li></a>
<li><a href="./isi1.html">Membuat Post Terbaru Keren di blog atau website
dengan CSS3 dan Jquery</a></li>
<li><a href="./isi2.html">Membuat Gambar Berputar di blog atau website
dengan CSS3 dan Jquery</a></li>
<li><a href="./isi3.html">Membuat Gambar Berputar di blog atau website dengan CSS3 dan Jquery</a></li>
</ul>
</div>
<img src="./1.jpg" alt="Memutar Gambar dengan CSS3" />
<img src="./2.jpg" alt="Membuat Slide dengan CSS dan Jquery" class="g2" />
<img src="./3.jpg" alt="Membuat Menu Dropdown dengan Jquery" />
</div>
<div class="isi"> </div> <div class="tutup1" style="margin-top:160px;
padding-right:5px;"><h3>closed</h3></div>
</div>
</div>
Kunjungi
<a href=" http://download-aplikasinya.blogspot.com ">
http://download-aplikasinya.blogspot.com</a> <br /> <br /> <br /><br /><br />
<br /><br /><br />
6. kemudian, setelah itu. tutuplah DIV diatas dengan script java script berikut ini.
jadi, intinya, apa yang akan kita tamilkan akan ditaruh diantara script nomer 5 dan nomer 6.
7. Simpan file kawan-kawan.
