js 旋转控件 jQueryRotate

于 2017-03-22 09:27:00 发布
阅读量269 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： javascript java ViewUI
原文链接：http://www.cnblogs.com/signheart/p/6598158.html
本文介绍了一种利用jQuery插件实现网页中图片旋转的方法。通过引入jQuery库及jQueryRotate.js插件，实现了按钮控制图片的90度旋转功能，并提供了关闭图片显示的功能。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >



插代码 。。

  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>



附件列表
 


转载于:https://www.cnblogs.com/signheart/p/6598158.html

                

        




    

    
  



    



            

  



          




        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值