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

最新推荐文章于 2021-06-17 06:53:36 发布

小纪念

最新推荐文章于 2021-06-17 06:53:36 发布

阅读量1.5k

点赞数

分类专栏： ●前端实践

本文链接：https://blog.csdn.net/qq_40247975/article/details/88310021

版权

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

摘要由CSDN通过智能技术生成

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});			
}