jq和css实现对图片进行旋转

最新推荐文章于 2021-12-27 11:22:48 发布

小纪念

最新推荐文章于 2021-12-27 11:22:48 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： ●前端实践

本文链接：https://blog.youkuaiyun.com/qq_40247975/article/details/88310021

●前端实践专栏收录该内容

4 篇文章

订阅专栏

本文探讨了两种旋转HTML图片的方法：使用jQuery（jq）和CSS。在使用jq旋转图片时，若页面上有多个图片，可能出现旋转角度叠加的错误，导致实际旋转角度超出预期。另一方面，CSS的transform属性提供了解决这一问题的方案，可以更精确地控制图片的旋转效果。

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

html代码：

<img src="${request.contextPath}/images/rotate.svg" id="rotate_img" onclick="rotateImg('rotate_img');return false;">

方法一：使用jq的方法旋转图片

function rotateImg(imgId){	
	var image = new Image();  
	image = document.getElementById(imgId);
	var w = image.width;
	var h = image.height;
	var dg = $("#"+imgId).attr("degree");
	dg = Number(dg)+90;
	$("#"+imgId).rotate(dg);
	$("#"+imgId).attr("degree",dg);		
	$("#"+imgId).attr("width",h);
	$("#"+imgId).attr("height",w); 
	$("#"+imgId).css("transform-origin","50.5% 50% 0px");
	var can = $("#"+imgId).parent().offset();
	$("#"+imgId).offset({top:can.top,left:can.left});			
}

缺点：当一个页面上同时有两个图片需要进行旋转的时候，当第一个图片旋转90度后，
再旋转第二个图片，也旋转90度的时候，第二个图片在执行rotate方法的时候会被旋
转180度，虽然dg传入的为90，但是执行结果还是被旋转了180度，这个问题也尚未弄
清除具体在rotate哪里出现了重复叠加。

方法二：使用css的方法旋转图片

function rotateImg(imgId){	
	var image = new Image();  
	image = document.getElementById(imgId);
	var w = image.width;
	var h = image.height;
	var dg = $("#"+imgId).attr("degree");
	dg = Number(dg)+90;
	$("#"+imgId).css("transform","rotate("+dg+"deg)");
	$("#"+imgId).attr("degree",dg);		
	$("#"+imgId).attr("width",h);
	$("#"+imgId).attr("height",w); 
	$("#"+imgId).css("transform-origin","50.5% 50% 0px");
	var can = $("#"+imgId).parent().offset();
	$("#"+imgId).offset({top:can.top,left:can.left});			
}

css中transform属性：http://www.w3school.com.cn/cssref/pr_transform.asp