插代码 。。

  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. threadlocal 变量 跟synchronized 关键字的关系

    为什么叫threadloca变量呢,经过大量的查资料发现threadlocal并不是之前理解的控制线程用的东西,它其实也属于一类变量,只不过是线程的局部变量,它的作用就是实现线程间对该变量的唯一线程调 ...

  2. vim 命令的使用

    稍微再研究一下vim的命令使用. ----------------------------------------------------------------------------------- ...

  3. Java读写二进制文件示例

    相对于文本文件,二进制文件读写快,定位快而准,下面是代码示例: import java.io.DataInput; import java.io.DataOutput; import java.io. ...

  4. 代码练习之 登陆 PHP会话控制 session cookie

    log.html <html> <head><title>Home Page</title></head> <body> < ...

  5. vue - utils.js

    exports:导出功能函数或变量 module.exports:默认导出{} ------------------------------------------------------------ ...

  6. Gradle在Android中的基本使用

    1.基本概念 程序开发作为一种工程作业,不光是编写代码,还涉及到工程的各种管理(依赖,打包,部署,发布,各种渠道的差异管理.....).很多时候,我们反复的build,clean,签名,打包,发布,那 ...

  7. 1000个经常使用的Python库和演示样例代码

    以下是programcreek.com通过分析大量开源码,提取出的最经常使用的python库. 1. sys    (4627) 2. os    (4088)  3. re    (3563)  4 ...

  8. PyQt4的一些问题汇总

    (1)PyQt4获取中文路径名字乱码问题 网址可以参见:http://permalink.gmane.org/gmane.comp.python.chinese/9916 处理方式的代码可以参考如下 ...

  9. 2 自己编写：AppDelegate，CCApplication，CCApplicationProtocol

    1 CCApplicationProtocol.h /* * CCApplicationProtocol.h * *  Created on: 2014年10月19日 *      Author: t ...

  10. appendChild append insertBefore prepend

      CreateTime--2017年11月2日16:57:59 Author:Marydon appendChild()与append() insertBefore()与prepend()区别与联系 ...