https://github.com/jfmdev/jqeye

jQuery plugin for make eyes that follow the mouse
https://github.com/jfmdev/jqeye

javascript jquery jquery-plugin

Last synced: about 1 month ago
JSON representation

jQuery plugin for make eyes that follow the mouse

• Host: GitHub
• URL: https://github.com/jfmdev/jqeye
• Owner: jfmdev
• License: mpl-2.0
• Created: 2014-08-29T09:54:05.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2020-10-14T16:55:40.000Z (about 4 years ago)
• Last Synced: 2024-10-28T16:58:48.267Z (about 2 months ago)
• Topics: javascript, jquery, jquery-plugin
• Language: JavaScript
• Homepage:
• Size: 62.5 KB
• Stars: 20
• Watchers: 4
• Forks: 6
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: license.txt

Awesome Lists containing this project

README

        
jqEye

=====

_Make eyes that follow the mouse_

A jQuery plugin that allows to define a behaviour in which a HTML element moves, within the boundaries of an imaginary eye, in order to follow the mouse.

Demos

-----

Basic: http://jsfiddle.net/L43zcmq4/4/

Advanced: http://jsfiddle.net/78ktpaqv/11/

How to use

----------

**Step 1:** Add references to the files of [jQuery](https://jquery.com) and [jqEye](/Source/) in the header section of the HTML document.

``` html

    

    

```

**Step 2:** Define, in the body of the HTML document, the element which is going to act as the pupil. 

Note that the initial position of this element is going to be considered as the centre of the eye.

``` html

    


        


    

```


**Step 3:** Select the element, using _jQuery_, and invoke the method _jqEye()_.

``` javascript

    jQuery(document).ready(function() {

        jQuery("#Pupil").jqEye();

    });

```

By default, the eyes has a circular shape and the pupil can move within a radius of 20 pixels. However this can be changed by using the "_options_" parameter:

 * The property "options.shape" defines the shape of the eye, it can be 'circle', 'ellipse', 'rectangle' and 'rounded rectangle';

 * The property "options.radius" defines the radius of the eye, if the shape is a circle, or the radius of his corners, if the shape is a rounded rectangle;

 * The properties "options.width" and "options.height" defines the width and height of the eye, if the shape is a rectangle or an ellipse.

For example:

``` javascript

    jQuery(document).ready(function() {

        jQuery("#Pupil_1").jqEye({shape: "circle", radius:10});

        jQuery("#Pupil_2").jqEye({shape: "ellipse", width:40, height:20});

        jQuery("#Pupil_3").jqEye({shape: "rectangle", width:40, height:20});

        jQuery("#Pupil_4").jqEye({shape: "rounded rectangle", width:40, height:40, radius:10});

    });

```

License

-------

This library is free software; you can redistribute it and/or modify it under the terms of the Mozilla Public License v2.0. 

You should have received a copy of the MPL 2.0 along with this library, otherwise you can obtain one at .