topical media & game development

talk show tell print

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.