14 Agt 2011

Cara membuat gambar melayang pada website manapun dengan javascript

Kita dapat membuat effect berputar pada foto-foto yang terdapat dalam sebuah website hanya dengan mengunakan javascript.trik ini bisa bekerja pada browser terkenal seperti mozilla,chrome,IE.
nah berikut ini masing penjelasannya,,,

Trik Untuk Putar Gambar dalam lintasan Edaran dalam Website
Buka website, copy dan paste kode javascript berikut di address bar browser dan tekan  Enter.gambar akan mulai berputar dalam lintasan melingkar.


javascript:R=0; x1=.1; y1=.05; x2=.25; y2=.24; x3=1.6; y3=.24; x4=300; y4=200; x5=300; y5=200; DI=document.getElementsByTagName("img"); DIL=DI.length; function A(){for(i=0; i-DIL; i++){DIS=DI[ i ].style; DIS.position='absolute'; DIS.left=(Math.sin(R*x1+i*x2+x3)*x4+x5)+"px"; DIS.top=(Math.cos(R*y1+i*y2+y3)*y4+y5)+"px"}R++}setInterval('A()',5); void(0); 



Trik Untuk Putar Gambar dalam lintasan horisontal dalam Website
Buka website, copy dan paste kode javascript berikut di address bar browser dan tekan  Enter.gambar akan mulai berputar dalam lintasan horisontal


javascript:R=0; x1=.1; y1=.05; x2=.25; y2=.24; x3=1.6; y3=.24; x4=300; y4=200; x5=300; y5=200; DI=document.getElementsByTagName("img"); DIL=DI.length; function A(){for(i=0; i-DIL; i++){DIS=DI[ i ].style; DIS.position='absolute'; DIS.left=(Math.sin(R*x1+i*x2+x3)*x4+x5)+ "px"; DIS.top=(Math.cos(R*y1+i*y2+y3)*y4+y5)+" px"}R++}setInterval( 'A()',5); void(0);



Trik Untuk Putar Gambar dalam Edaran serta lintasan horizontal di Website Setiap

Menggunakan kode ini anda akan menambahkan kedua efek rotaion horizontal maupun Edaran untuk gambar ..


javascript:R=0; x1=.1; y1=.05; x2=.25; y2=.24; x3=1.6; y3=.24; x4=300; y4=200; x5=300; y5=200; var DI= document.images; DIL=DI.length; function A(){for(i=0; i < DIL; i++){DIS=DI[ i ].style; DIS.position='absolute'; DIS.left=Math.sin(R*x1+i*x2+x3)*x4+x5+"px"; DIS.top=Math.cos(R*y1+i*y2+y3)*y4+y5+"px"}R++}tag=setInterval('A()',5 );document.onmousedown=function(){clearInterval(tag);for(i=0; i < DIL; i++){DI.style.position="static";}}; void(0)


Trik Untuk Putar Gambar dalam lintasan Edaran mengikuti Gerakan mouse di Website.

Ini akan menambahkan efek ke gambar rotasi hanya pada gerakan mouse.


javascript:R=0; x1=.1; y1=.05; x2=.25; y2=.24; x3=1.6; y3=.24; x4=100; y4=100; var DI= document.images; DIL=DI.length; function A(_X,_Y){for(i=0; i < DIL; i++){DIS=DI[ i ].style; DIS.position='absolute'; DIS.left=Math.sin(R*x1+i*x2+x3)*x4+_X+"px"; DIS.top=Math.cos(R*y1+i*y2+y3)*y4+_Y+"px"}R++}document.onmousemove=function(event){_X = event.clientX; _Y = event.clientY; A(_X,_Y);};document.onmousedown=function(){for(i=0; i < DIL; i++){DI.style.position="static";}};void(0)



note: hapus dulu link yang ada di address bar,lalu copy paste.     



 .

2 komentar:

Posting Komentar

My blog is dofollow...

pengunjung yang baik adalah pengunjung yang selalu memberi apresiasi dengan meninggalkan pesan komentar...

facebook comment

Twitter Delicious Facebook Digg Stumbleupon Favorites More