Create a pointer trails with Jquery

H

ope 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

<script src="https://making-different.googlecode.com/svn/trunk/jquery.js" type="text/javascript">
</script>
<script>
$(document).ready(function() {
 $(document).mousemove(function(e) {
    pointer = $('<img>').attr({'src':'http://Asianzclub.blogspot.com/-0TW2w2GgWQY/T7oOUVAPdfI/AAAAAAAADSE/MsNTA7Hwxco/s1600/pointer.png'});
    $(document.body).append(pointer);
    pointer.css({
            'position':'absolute',
      top: e.pageY +2 , //offsets
      left: e.pageX +2   //offsets
     }).animate({  opacity: 0 }, 1500, function(){ $(this).remove(); });;
 });
});
</script>

Note :- Change Cursor Image by Changing Above Red Colored Image URL

Drop Your Comments And Questions Below... :)