diff options
Diffstat (limited to 'neighbor/index.html')
| -rw-r--r-- | neighbor/index.html | 56 |
1 files changed, 56 insertions, 0 deletions
diff --git a/neighbor/index.html b/neighbor/index.html new file mode 100644 index 0000000..8356796 --- /dev/null +++ b/neighbor/index.html @@ -0,0 +1,56 @@ +<!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> + + +<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> + |