js 旋转控件 jQueryRotate



插代码 。。

  1. <%@ page language="java" contentType="text/html; charset=UTF-8"
  2. pageEncoding="UTF-8"%>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  4. <html>
  5. <head>
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  7. <script type="text/javascript" src="/js/jquery-1.9.1.min.js"></script>
  8. <script type="text/javascript" src="/js/jQueryRotate.js"></script>
  9. <title>Insert title here</title>
  10. </head>
  11. <body>
  12. <div id="imgdiv" style="width: 200px;height: 300px;vertical-align: middle;margin-top: 100px;">
  13. <input type="button" value="关闭" style="float: right;" onclick="closedImageDiv()"/>
  14. <img id="image" alt="Penguins.jpg" src="Penguins.jpg" style="width: 200px;height: 300px;z-index: 0">
  15. <input type="button" value="旋转90°" onclick="imagerotete()" style="float: right;">
  16. </div>
  17. </body>
  18. <script type="text/javascript">
  19. $(function(){
  20. /* var angle = 0;
  21. setInterval(function(){
  22. angle += 3;
  23. $("#image").rotate(angle);
  24. }, 50); */
  25. });
  26. function imagerotete(){
  27. var angle=0;
  28. angle+=90;
  29. if(angle>360){
  30. angle=0;
  31. }
  32. $("#image").rotate({
  33. angle: angle-90<0?0:angle-90,
  34. animateTo: angle
  35. });
  36. }
  37. function closedImageDiv(){
  38. $("#imgdiv").remove();
  39. }
  40. </script>
  41. </html>



附件列表

    原文地址:https://www.cnblogs.com/signheart/p/6598158.html