Jquery-Rotate实现查看原图并旋转图片

最新推荐文章于 2023-11-23 15:56:32 发布

caicongyang

最新推荐文章于 2023-11-23 15:56:32 发布

阅读量4.4k

点赞数 2

分类专栏： Web前端文章标签： Jquery-Rotate js旋转图片 js查看原图

本文链接：https://blog.csdn.net/caicongyang/article/details/49888037

版权

Web前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

1.实现功能

当图片被缩小放置到一个固定大小的div内，以下代码通过jquery.rotate组件实现点击查看原图并且90度顺时针旋转。

2.代码

js引入

	<script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="../js/jquery.rotate.min.js"></script>

js代码

$("#ImgPath1").rotate({ 
	   bind: 
	     { 
		   click: function(){
	        	if(value1==270){
	        		$(this).css("width","100%"); 
	        		$(this).css("max-height","200px"); 
	        		value1 +=90;
	        		$(this).rotate(value1);
	        		value1 = 0;
	        	}else{
		        	var img = new Image(); 
					img.src =$(this).attr("src") ; 
					var imgWidth = img.width; //图片实际宽度 
					var imgHeight = img.height;
					$(this).attr("style","width: "+imgWidth); 
					$(this).attr("style","height: "+imgHeight); 
		            value1 +=90;
		            $(this).rotate(value1)
	        	}
	        }
	     } 
	   
	});