Cara Membuat Objek Mengelilingi Mouse

Merubah tampilan mouse dengan membuat objek yang mengelilingi pointer Mouse. Pada halaman blog anda tampilan pointer mouse akan dihiasi obyek yang berputar-putar sehingga cukup menarik dan cantik. Untuk membuat tampilan dengan membuat objek yang mengelilingi Mouse silakan masukkan kode berikut ini di halaman HTML/javascript.


Cara membuat objek mengelilingi pointer Mouse:

~ Masuk ke Tata letak > Tambah Gadget > HTML/javascript
~ Copy dan paste kode di bawah ini ke dalam kotak HTML/javascript.


    <script language="JavaScript" type="text/javascript">

    var xCol = "#FF0000";
    var yCol = "#FFFF00";
    var zCol = "#0000FF";

    var n = 6; //number of dots per trail.
    var t = 40; //setTimeout speed.
    var s = 0.2; //effect speed.

    var r,h,w;
    var d = document;
    var my = 10;
    var mx = 10;
    var stp = 0;
    var evn = 360/3;
    var vx = new Array();
    var vy = new Array();
    var vz = new Array();
    var dy = new Array();
    var dx = new Array();

    var pix = "px";

    var strictmod = ((document.compatMode) &&
    document.compatMode.indexOf("CSS") != -1);

    var domWw = (typeof window.innerWidth == "number");
    var domSy = (typeof window.pageYOffset == "number");
    var idx = d.getElementsByTagName('div').length;

    for (i = 0; i < n; i++)
    {
    var dims = (i+1)/2;
    d.write('<div id="x'+(idx+i)+'" style="position:absolute;'
    +'top:0px;left:0px;width:'+dims+'px;height:'+dims+'px;'
    +'background-color:'+xCol+';font-size:'+dims+'px"><\/div>'
    +'<div id="y'+(idx+i)+'" style="position:absolute;top:0px;'
    +'left:0px;width:'+dims+'px;height:'+dims+'px;'
    +'background-color:'+yCol+';font-size:'+dims+'px"><\/div>'
    +'<div id="z'+(idx+i)+'" style="position:absolute;top:0px;'
    +'left:0px;width:'+dims+'px;height:'+dims+'px;'
    +'background-color:'+zCol+';font-size:'+dims+'px"><\/div>');
    }

    if (domWw) r = window;
    else
    {
    if (d.documentElement &&
    typeof d.documentElement.clientWidth == "number" &&
    d.documentElement.clientWidth != 0)
    r = d.documentElement;
    else
    {
    if (d.body && typeof d.body.clientWidth == "number")
    r = d.body;
    }
    }

    function winsize()
    {
    var oh,sy,ow,sx,rh,rw;
    if (domWw)
    {
    if (d.documentElement && d.defaultView &&
    typeof d.defaultView.scrollMaxY == "number")
    {
    oh = d.documentElement.offsetHeight;
    sy = d.defaultView.scrollMaxY;
    ow = d.documentElement.offsetWidth;
    sx = d.defaultView.scrollMaxX;
    rh = oh-sy;
    rw = ow-sx;
    }
    else
    {
    rh = r.innerHeight;
    rw = r.innerWidth;
    }
    h = rh;
    w = rw;
    }
    else
    {
    h = r.clientHeight;
    w = r.clientWidth;
    }
    }

    function scrl(yx)
    {
    var y,x;
    if (domSy)
    {
    y = r.pageYOffset;
    x = r.pageXOffset;
    }
    else
    {
    y = r.scrollTop;
    x = r.scrollLeft;
    }
    return (yx == 0)?y:x;
    }

    function mouse(e)
    {
    var msy = (domSy)?window.pageYOffset:0;
    if (!e) e = window.event;
    if (typeof e.pageY == 'number')
    {
    my = e.pageY - msy + 16;
    mx = e.pageX + 6;
    }
    else
    {
    my = e.clientY - msy + 16;
    mx = e.clientX + 6;
    }
    if (my > h-65) my = h-65;
    if (mx > w-50) mx = w-50;
    }

    function assgn()
    {
    for (j = 0; j < 3; j++)
    {
    dy[j] = my + 50 * Math.cos(stp+j*evn*Math.PI/180) *

    Math.sin((stp+j*25)/2) + scrl(0) + pix;
    dx[j] = mx + 50 * Math.sin(stp+j*evn*Math.PI/180) *

    Math.sin((stp+j*25)/2) * Math.sin(stp/4) + pix;
    }
    stp+=s;

    for (i = 0; i < n; i++)
    {
    if (i < n-1)
    {
    vx[i].top = vx[i+1].top; vx[i].left = vx[i+1].left;
    vy[i].top = vy[i+1].top; vy[i].left = vy[i+1].left;
    vz[i].top = vz[i+1].top; vz[i].left = vz[i+1].left;
    }
    else
    {
    vx[i].top = dy[0]; vx[i].left = dx[0];
    vy[i].top = dy[1]; vy[i].left = dx[1];
    vz[i].top = dy[2]; vz[i].left = dx[2];
    }
    }
    setTimeout(assgn,t);
    }

    function init()
    {
    for (i = 0; i < n; i++)
    {
    vx[i] = document.getElementById("x"+(idx+i)).style;
    vy[i] = document.getElementById("y"+(idx+i)).style;
    vz[i] = document.getElementById("z"+(idx+i)).style;
    }
    winsize();
    assgn();
    }

    if (window.addEventListener)
    {
    window.addEventListener("resize",winsize,false);
    window.addEventListener("load",init,false);
    document.addEventListener("mousemove",mouse,false);
    }
    else
    if (window.attachEvent)
    {
    window.attachEvent("onload",init);
    document.attachEvent("onmousemove",mouse);
    window.attachEvent("onresize",winsize);
    }
    </script>

~ Simpan / Save. 

Anda dapat mengganti kode warna diatas dengan kode warna yang lain, silakan anda cari di internet. Demikian cara membuat tampilan mouse dengan obyek yang mengelilingi mouse pointer pada blog, semoga bermanfaat dan sukses mencoba.