forward.html 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>jquery.pep demo - constrained to axis</title>
  6. <!-- Load local jQuery. -->
  7. <script src="../libs/jquery/jquery.js"></script>
  8. <script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
  9. <!-- Load local lib and tests. -->
  10. <script src="../src/jquery.pep.js"></script>
  11. <script type="text/javascript">
  12. $(document).ready(function(){
  13. $('.pep.fwd').pep({
  14. debug: true,
  15. shouldEase: false,
  16. hardwareAccelerate: true,
  17. drag: function(ev, obj){
  18. if (obj.dx < 0 || obj.dy < 0)
  19. return false;
  20. }
  21. });
  22. });
  23. </script>
  24. <style type="text/css">
  25. body{ padding: 0; margin: 0; }
  26. .pep { width: 100px; height: 100px; background: rgb(243, 200, 200); color: white; opacity: 0.8;}
  27. .fwd { position: absolute; top: 40px; left: 10px; background: rgb(120, 200, 200); opacity: 0.8;}
  28. </style>
  29. </head>
  30. <body>
  31. <div class="pep fwd">forward</div>
  32. </body>
  33. </html>