JavaScript

JavaScripti >> Efekti z miškinim kurzorjem >> 3D modul

Opis:
Miškin kurzor postane središče 3D modula, ki se giblje okoli njega.

Primer:
Poglejte miškin kurzor!

Izvorna koda:

Korak 1 :
Ta del kode vstavite v <head> del strani:

<style> div {width:20; height:20; position:absolute} </style>

Korak 2:
Ta del kode vstavite v <body> del strani:

<div ID="box0"> <p><img name="pic0" src="rdeca.gif" width="20" height="20"></p> </div><div ID="box1"> <p><img name="pic1" src="rdeca.gif" width="20" height="20"></p> </div><div ID="box2"> <p><img name="pic2" src="rdeca.gif" width="20" height="20"></p> </div><div ID="box3"> <p><img name="pic3" src="rdeca.gif" width="20" height="20"></p> </div><div ID="box4"> <p><img name="pic4" src="modra.gif" width="20" height="20"></p> </div><div ID="box5"> <p><img name="pic5" src="modra.gif" width="20" height="20"></p> </div><div ID="box6"> <p><img name="pic6" src="modra.gif" width="20" height="20"></p> </div><div ID="box7"> <p><img name="pic7" src="modra.gif" width="20" height="20"></p> </div> <script language="javascript"> var numberOfPoints=8; var viewdist=250; var distcorr=60; var midX = 50; var midY = 50; var yaw=0; var pit=0; var rol=0; var pi = 3.1415926535; var toRad = (pi / 180); var tmpX; var tmpY; var tmpZ; var sinTable = new Array(360); var cosTable = new Array(360); var x = new Array(numberOfPoints); var y = new Array(numberOfPoints); var z = new Array(numberOfPoints); x[0]= 25; y[0]= 25; z[0]= 25; x[1]= -25; y[1]= -25; z[1]= 25; x[2]= -25; y[2]= 25; z[2]= -25; x[3]= 25; y[3]= -25; z[3]= -25; x[4]= -40; y[4]= 40; z[4]= 40; x[5]= -40; y[5]= -40; z[5]= -40; x[6]= 40; y[6]= 40; z[6]= -40; x[7]= 40; y[7]= -40; z[7]= 40; function calc3D(x,y,z,midX,midY){ tmpX = midX + Math.round((viewdist * x) / (z + viewdist)); tmpY = midY + Math.round((viewdist * y) / (z + viewdist + distcorr)); } function rotate3D(px,py,pz, yaw,pit,rol){ var sx; var sy; var sz; var qx; var qy; var qz; var rolRad=rol*toRad; var pitRad=pit*toRad; var yawRad=yaw*toRad; // Rotate (Roll) sx = Math.round(py * Math.sin(rolRad) + px * Math.cos(rolRad)); sy = Math.round(py * Math.cos(rolRad) - px * Math.sin(rolRad)); sz = pz; // Rotate (Pitch) qx = sx; qy = Math.round(sz * Math.sin(pitRad) - sy * Math.cos(pitRad)); qz = Math.round(sz * Math.cos(pitRad) + sy * Math.sin(pitRad)); // Rotate (Yaw) tmpX = Math.round(qz * Math.sin(yawRad) + qx * Math.cos(yawRad)); tmpY = qy; tmpZ = Math.round(qz * Math.cos(yawRad) - qx * Math.sin(yawRad)); } function do3D(){ yaw = yaw + 1; pit = pit + 5; rol = rol + 1; if (yaw > 359) yaw = yaw - 360; if (pit > 359) pit = pit - 360; if (rol > 359) rol = rol - 360; if (yaw <0) yaw = yaw + 360; if (pit <0) pit = pit + 360; if (rol <0) rol = rol + 360; for (n=0; n<numberOfPoints; n++){ tmpX = x[n]; tmpY = y[n]; tmpZ = z[n]; rotate3D(tmpX, tmpY, tmpZ, yaw, -pit, rol); calc3D(tmpX, tmpY, tmpZ, midX, midY); size = 25-(Math.round((tmpZ+25)/7)+10); eval('box'+n).style.zIndex=size; eval('pic'+n).width=size; eval('pic'+n).height=size; eval('box'+n).style.left=tmpX-(size*0.5); eval('box'+n).style.top=tmpY-(size*0.5); } setTimeout("do3D()",2); } function moved(){ midX=event.clientX; midY=document.body.scrollTop+event.clientY; } document.onmousemove=moved; setTimeout("do3D()",100); </script>

Korak 3:
V mapo kjer boste imeli spletno stran s tem efektom prekopirajte tudi spodnje slikce: