zoukankan      html  css  js  c++  java
  • 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>



    附件列表

    • 相关阅读:
      RTF文件格式
      javascript 正则表达式基础
      不同线程之间传递数据
      JavaScript trim函数
      Simple Editor
      关于RichTextBox字体的问题
      手机短信自动清理方式
      手机来电显示新方法
      具有二维码自动识别功能的交通标志
      利用手机扫描二维码技术识别房屋租赁信息
    • 原文地址:https://www.cnblogs.com/signheart/p/6598158.html
    Copyright © 2011-2022 走看看