stop-others.html 1.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>jquery.pep base demo</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. var active;
  14. $('.pep').pep({
  15. stop: function(){
  16. moving = [];
  17. },
  18. start: function(ev, obj){
  19. if ( active && obj !== active )
  20. active.$el.css( active.getCSSEaseHash(true) )
  21. .removeClass('pep-active')
  22. active = obj;
  23. },
  24. cssEaseDuration: 3000,
  25. useCSSTranslation: true
  26. });
  27. });
  28. </script>
  29. <style type="text/css">
  30. .pep{ width: 200px; height: 200px; margin: 50px; background: blue; z-index: 10; }
  31. .pep-active{ border: 5px solid red; z-index: 11; }
  32. </style>
  33. </head>
  34. <body>
  35. <div class="pep"></div>
  36. <div class="pep"></div>
  37. <div class="pep"></div>
  38. <div class="pep"></div>
  39. <div class="pep"></div>
  40. </body>
  41. </html>