WEB前端:使用JQ实现简单的图片旋转

最近一个项目中用到这个小功能,需要每点击一次按钮实现图片旋转90°,以达到部分图片在上传时非正视角的情况。老规矩,先上HTML<div class="xuanzhuan"><img src="./1.jpg" alt=""></div> <div><button class="rotate">点击旋转</but

最近一个项目中用到这个小功能,需要每点击一次按钮实现图片旋转90°,以达到部分图片在上传时非正视角的情况。


老规矩,先上HTML

<div class="xuanzhuan"><img src="./1.jpg" alt=""></div>
<div><button class="rotate">点击旋转</button></div>


当前HTML仅显示一张图片,以及一个点击按钮


下面是JQ,其实JS、JQ有多种写法,为了便捷性,一些较麻烦(代码或理解)的就不赘述,直接上自己认为简单的

	var current = 0;
	$(".rotate").on("click",function(){
		current = (current+90)%360;
		$(".xuanzhuan img").css("transform","rotate("+current+"deg)");
	})


应该不难理解吧,就如需求所言,每次点击旋转90°

评论

标题:
正文:
验证码: