topical media & game development
lib-jquery-plugin-clip-demo.htm / htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<script language="JavaScript" type="text/javascript" src="lib-jquery-plugin-clip-clip-files-jq.js"></script>
<script language="JavaScript" type="text/javascript" src="lib-jquery-plugin-clip-clip-files-jquery.js"></script>
</head><body>
<div style="background: rgb(204, 204, 204) none repeat scroll 0% 0%; vertical-align: middle; text-align: center; height: 40px; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">
<input value="full" onclick="$('.testImg').stop().animate({'clip':'rect(0px 400px 300px 0px)'}, 1000)" type="button">
<input value="half" onclick="$('.testImg').stop().animate({'clip':'rect(75px 300px 225px 100px)'}, 1000)" type="button">
<input value="gone" onclick="$('.testImg').stop().animate({'clip':'rect(150px 200px 150px 200px)'}, 1000)" type="button">
</div>
<div class="testImg" style="background: transparent url(http://www.overset.com/upload/animate.clip/chickenfoot.jpg) repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; position: absolute; height: 300px; width: 400px; clip: rect(0px, 400px, 300px, 0px);">
</div></body></html>
(C) Æliens
20/2/2008
You may not copy or print any of this material without explicit permission of the author or the publisher.
In case of other copyright issues, contact the author.