插代码 。。

  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. iOS：网页视图控件UIWebView的详解

    网页视图控件:UIWebView 功能:它是继承于UIView的,是一个内置的浏览器控件,以用来浏览从网络下载下来的网页或者本地上加载下来的文档. 枚举: //网页视图导航类型 typedef NS_ ...

  2. jenkins+testNG

    1.项目的pom.xml要配置插件,同时指定testng.xml文件的位置.就被这个卡了好久 <properties> <maven-surefire-plugin.version& ...

  3. GET RESTful With Python

    Python调用RESTful:http://blog.akiban.com/get-restful-with-python/ 本文就是参考该英文做了一下试验,后续补充一下翻译. This post ...

  4. IO/序列化/JSON

    一.读写文件 1.open:打开文件 open(path, mode, encoding='xxx', errors='ignore') mode取值:rU 或 Ua 以读方式打开, 同时提供通用换行 ...

  5. Bitmap和Drawable的互相转换

    刚好之前的项目实用到.怕遗忘了.就先记录下来.然后会用到的时候直接来这copy使用就好了. 1.Bitmap ---->Drawable: public static Drawable bitm ...

  6. 运用JMX监控Tomcat

    1.先配Tomcat的启动语句,window下tomcat的bin/catalina.bat(linux为catalina.sh),在头上注释部分(.bat为rem..sh为#)后面加上set JAV ...

  7. Errors occurred during the build

    Errors occurred during the build.Errors running builder 'Integrated External Tool Builder' on projec ...

  8. WindowManager.LayoutParams全解

    WindowManager是Android中一个重要的服务(Service ).WindowManager Service 是全局的,是唯一的.它将用户的操作,翻译成为指令,发送给呈现在界面上的各个W ...

  9. 機器學習基石(Machine Learning Foundations) 机器学习基石 作业三 课后习题解答

    今天和大家分享coursera-NTU-機器學習基石(Machine Learning Foundations)-作业三的习题解答.笔者在做这些题目时遇到非常多困难,当我在网上寻找答案时却找不到,而林 ...

  10. Spark-Dependency

    1.Spark中採用依赖关系(Dependency)表示rdd之间的生成关系.Spark可利用Dependency计算出失效的RDD.在每一个RDD中都存在一个依赖关系的列表 private var ...