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>
  12. <body>
  13. 	<div id="imgdiv" style="width: 200px;height: 300px;vertical-align: middle;margin-top: 100px;">
  14. 		<input type="button" value="关闭" style="float: right;" onclick="closedImageDiv()"/>
  15. 		<img id="image" alt="Penguins.jpg" src="Penguins.jpg" style="width: 200px;height: 300px;z-index: 0">
  16. 		<input type="button" value="旋转90°" onclick="imagerotete()" style="float: right;">
  17. 	</div>
  20. </body>
  21. <script type="text/javascript">
  22. 	 $(function(){
  23. 		 	/* var angle = 0;
  24. 		    setInterval(function(){
  25. 		        angle += 3;
  26. 		        $("#image").rotate(angle);
  27. 		    }, 50); */
  28. 		    
  29. 		
  30. 	 });
  31. 	 
  32. 	 function imagerotete(){
  33. 		var angle=0;
  34. 		 angle+=90;
  35. 		 if(angle>360){
  36. 			 angle=0;
  37. 		 }
  38. 		 $("#image").rotate({
  39. 	    	 angle: angle-90<0?0:angle-90,
  40. 	         animateTo: angle
  41. 	    });
  42. 	 }
  43. 	 
  44. 	 function closedImageDiv(){
  45. 		$("#imgdiv").remove();
  46. 	 }
  47. </script>
  48. </html>



附件列表

     

    posted on 2017-03-22 09:27  signheart  阅读(423)  评论(0)  编辑  收藏  举报

    导航