Make Eyes Watch Your Cursor As It Moves - jQuery BeautifulEyes

BeautifulEyes is a funny jQuery plugin for user interaction that creates cartoon eyes always watching your mouse cursor as it moves around the webpage.

See Also:

• Create Eyes That Follow The Mouse - jQuery eyes-follow-mouse.js
• Animated Eyes Follow Cursor When Moving - jqEye

How to use it:

1. Download and import the BeautifulEyes plugin's files into the HTML document. Note that the script beautiful-eyes.js must be loaded after the latest jQuery library.

<link rel="stylesheet" href="beautiful-eyes.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="beautiful-eyes.js"></script>

2. Call the function on the target element in which you want to draw the cartoon eyes. Position and size options must be set when creating eyes.

<div id="example">
  <img src="img.jpg" />
</div>

$('#example').makeEye({
  size: 20,
  position: { 
    x: 150, 
    y:135 
  }
});

3. Set the size of the eyeball. Default: 4.

$('#example').makeEye({
  size: 20,
  position: { 
    x: 150, 
    y:135 
  }
  eyeBallSize: 15
});

4. Set the border width of the cartoon eyes. Default: 2.

$('#example').makeEye({
  size: 20,
  position: { 
    x: 150, 
    y:135 
  }
  borderWidth: 3
});

---

This awesome jQuery plugin is developed by kelvinperrie. For more Advanced Usages, please check the demo page or visit the official website.