Motyar

Creating value through Programming

FREE VPS for 2 months
DigitalOcean
Cloud hosting for developers
20GB SSD, 512MB RAM - only $5 per month

Dec 30, 2009

Create a pointer trails with Jquery

Hope you all know how to set mouse pointer trails with your operation system. Windows user can set it from Control panel-->Printer and other Hardware-->Mouse settings-->Check the pointer trail checkbox.
I am here to demonstrate how you can set a pointer trail on your web-page with the help of Jquery



Its simple - create some img elements having pointer-image in src, and let them follow pointer-position whenever mouse move. And don't forget to fade them out slowly.

The Javascript

 $(document).ready(function() {

    $(document).mousemove(function(e) {

                //create img elements having pointer.png in their src 
                // download it from 
                // http://sites.google.com/site/dharmmotyar/Home/pointer.png 
                pointer = $('<img>').attr({'src':'pointer.png'});

                //and append them to document
                $(document.body).append(pointer); 
 
                //show them at mouse position & fade out slowly
                pointer.css({
                        'position':'absolute',
                        tope.pageY +,    //offsets
                        lefte.pageX +2   //offsets
                    }).fadeOut(1500);   
    });
});


 

Demo


You can see the working demo by moving your mouse.


Labels: , ,


By :