插代码 。。

  1. <%@ page language="java" contentType="text/html; charset=UTF-8"
    2. 

  2.     pageEncoding="UTF-8"%>
    3. 

  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    4. 

  4. <html>
    5. 

  5. <head>
    6. 

  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    7. 

  7. <script type="text/javascript" src="/js/jquery-1.9.1.min.js"></script>
    8. 

  8. <script type="text/javascript" src="/js/jQueryRotate.js"></script>
    9. 

  9. <title>Insert title here</title>
    10. 

  10. </head>
    11. 

    12. 

  12. <body>
    13. 

  13. 	<div id="imgdiv" style="width: 200px;height: 300px;vertical-align: middle;margin-top: 100px;">
    14. 

  14. 		<input type="button" value="关闭" style="float: right;" onclick="closedImageDiv()"/>
    15. 

  15. 		<img id="image" alt="Penguins.jpg" src="Penguins.jpg" style="width: 200px;height: 300px;z-index: 0">
    16. 

  16. 		<input type="button" value="旋转90°" onclick="imagerotete()" style="float: right;">
    17. 

  17. 	</div>
    18. 

    19. 

    20. 

  20. </body>
    21. 

  21. <script type="text/javascript">
    22. 

  22. 	 $(function(){
    23. 

  23. 		 	/* var angle = 0;
    24. 

  24. 		    setInterval(function(){
    25. 

  25. 		        angle += 3;
    26. 

  26. 		        $("#image").rotate(angle);
    27. 

  27. 		    }, 50); */
    28. 

  28. 		    
    29. 

  29. 		
    30. 

  30. 	 });
    31. 

  31. 	 
    32. 

  32. 	 function imagerotete(){
    33. 

  33. 		var angle=0;
    34. 

  34. 		 angle+=90;
    35. 

  35. 		 if(angle>360){
    36. 

  36. 			 angle=0;
    37. 

  37. 		 }
    38. 

  38. 		 $("#image").rotate({
    39. 

  39. 	    	 angle: angle-90<0?0:angle-90,
    40. 

  40. 	         animateTo: angle
    41. 

  41. 	    });
    42. 

  42. 	 }
    43. 

  43. 	 
    44. 

  44. 	 function closedImageDiv(){
    45. 

  45. 		$("#imgdiv").remove();
    46. 

  46. 	 }
    47. 

  47. </script>
    48. 

  48. </html>




附件列表

js 旋转控件 jQueryRotate的更多相关文章

  1. js树形控件

    js树形控件 ztree http://www.treejs.cn/

  2. Atitit.js图表控件总结

    Atitit.js图表控件总结 1. 为什么要使用图表1 2. 图表分类1 3. 数据可视化的优点1 4. 流行的js图表类库1 5. 参考2 1. 为什么要使用图表 因为要可视化 2. 图表分类 条 ...

  3. js设置控件的隐藏与显示的两种方法

    js设置控件的隐藏与显示,设置控件style的display和visibility属性就可以了,下面有个示例,需要的朋友可以参考下用JavaScript隐藏控件的方法有两种,分别是通过设置控件的sty ...

  4. 简洁JS 日历控件 支持日期和月份选择

    原文出处 以下这个JS日历控件是我的闲暇之余自己编写的,所有的代码全部在IE7/IE8/Firefox下面测试通过, 而且可以解决被iframe层遮盖的问题.现在只提供两种风格(简洁版和古典版)和两种 ...

  5. JS日历控件优化(增加时分秒)

    JS日历控件优化      在今年7月份时候 写了一篇关于 "JS日历控件" 的文章 , 当时只支持 年月日 的日历控件,现在优化如下:      1. 在原基础上 支持 yyyy ...

  6. WPF编程，通过Double Animation动态旋转控件的一种方法。

    原文:WPF编程,通过Double Animation动态旋转控件的一种方法. 版权声明:我不生产代码,我只是代码的搬运工. https://blog.csdn.net/qq_43307934/art ...

  7. WPF编程，通过Double Animation同时动态缩放和旋转控件的一种方法。

    原文:WPF编程,通过Double Animation同时动态缩放和旋转控件的一种方法. 版权声明:我不生产代码,我只是代码的搬运工. https://blog.csdn.net/qq_4330793 ...

  8. js获取控件位置以及不同浏览器中的差别

    js获取控件位置(坐标位置)在不同浏览器中的差别. //获取坐标位置 function getpos(e) { var t=e.offsetTop; var l=e.offsetLeft; var h ...

  9. JS日历控件集合----附效果图、源代码

    http://www.cnblogs.com/yank/archive/2008/08/14/1267746.html 在进行开发的过程中,经常需要输入时间,特别是在进行查询.统计的时候,时间限定更为 ...

随机推荐

  1. [Java]在窗口界面上画出硬盘中图片文件

    利用类javax.swing.JPanel来在窗口界面上画图.图片文件通过javax.imageio.ImageIO类来获取. import java.awt.Graphics; import jav ...

  2. [转载]Delphi事件的广播

    https://blog.csdn.net/dropme/article/details/975736 明天就是五一节了,辛苦了好几个月,借此机会应该尽情放松一番.可是想到Blog好久没有写文章,似乎 ...

  3. mysql5.7.x 编译安装

    一.卸载mariadb [root@mysql5 ~]# rpm -qa mariadb* mariadb-libs--.el7.centos.x86_64 [root@template tools] ...

  4. Eclipse通过Spket增加JQuery提示的方法

    Eclipse通过Spket增加JQuery提示的方法 1.增加在线更新源:Help->Install New Software...->Add...->Name: "Sp ...

  5. 《大规模web服务开发技术》笔记

    前段时间趁空把<大规模web服务开发技术>这本书看完了,今天用一下午时间重新翻了一遍,把其中的要点记了下来,权当复习和备忘.由于自己对数据压缩.全文检索等还算比较熟,所以笔记内容主要涉及前 ...

  6. linux解压分卷压缩的zip文件

    zip -s 0 records.zip --out 1.zip unzip 1.zip

  7. HDU-2665-Kth number(划分树)

    Problem Description Give you a sequence and ask you the kth big number of a inteval.   Input The fir ...

  8. ssl证书之certbot

    一.安装 1.下载压缩包:#wget https://github.com/certbot/certbot/archive/master.zip 2.解压包 3.官方文档https://github. ...

  9. Android Tint着色与帧动画结合

    需求 最近遇到一个需求: 要求根据后台接口给的色值 显示不同色值的帧动画(UI给了三张透明色的图) 正常的帧动画 是配置在xml里三张静态图片 然后加载一下就完事了现有的静态图片是透明的 还没有填充颜 ...

  10. 算法笔记_065:分治法求逆序对（Java）

    目录 1 问题描述 2 解决方案 2.1 蛮力法 2.2 分治法(归并排序)   1 问题描述 给定一个随机数数组,求取这个数组中的逆序对总个数.要求时间效率尽可能高. 那么,何为逆序对? 引用自百度 ...