diff options
| author | Jules <jules@asdf.us> | 2013-12-19 01:20:54 -0500 |
|---|---|---|
| committer | Jules <jules@asdf.us> | 2013-12-19 01:20:54 -0500 |
| commit | 3c1c175dd2860ade1215b45bc2aa1d135dc905d3 (patch) | |
| tree | a45b61a480ff45594c081d6a6d530a8da01dc1c6 /index.html | |
neighbor
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 64 |
1 files changed, 64 insertions, 0 deletions
diff --git a/index.html b/index.html new file mode 100644 index 0000000..482f6a6 --- /dev/null +++ b/index.html @@ -0,0 +1,64 @@ +<!doctype html> +<html> +<head><title>Neighbor JS</title></head> +<style> +#people { height:300px; width: 100%; overflow: hidden; white-space: nowrap; } +#wallpaper { height:300px; width: 100%; overflow: hidden; white-space: nowrap; } +</style> +<body> +<h1>Neighbor.js</h1> + +<p> + <b>Neighbor.js</b> resizes images using a nearest neighbor algorithm automatically. +</p> + +<code> + $("#people img").neighbor(); +</code> + +<div id="people"> + <img src="people.GIF" width="50"> + <img src="people.GIF" width="70"> + <img src="people.GIF" width="100"> + <img src="people.GIF" width="135"> + <img src="people.GIF" width="170"> + <img src="people.GIF" width="210"> + <img src="people.GIF" width="250"> + <img src="people.GIF" width="295"> +</div> + +<p> + Run it on particular images, or all images automatically. +</p> + +<p> + Also use it to put a nearest-neighbor resized image on the background of an element: +</p> + +<code> + $("#wallpaper").neighbor({ url: "people2.GIF", scale: "250%" }); +</code> + +<div id="wallpaper"></div> + +<p> + There are two versions: +</p> + +<ul> + <li> <a href="jquery.neighbor.js">jquery.neighbor.js</a> supports multiple images, background images, etc + <li> <a href="neighbor.js">neighbor.js</a> does one image at a time (but does not require jquery) - <tt>neighbor("#person")</tt> +</ul> + +<script type="text/javascript" src="jquery.js"></script> +<script type="text/javascript" src="jquery.neighbor.js"></script> +<script type="text/javascript"> +$("code").each(function(){ + eval($(this).html()); +}); +</script> + + +</body> +</html> + |