jq实现旋转图片

html

在这里插入图片描述

第一种方法

var current = 0;
$(".rotate").on("click",function(){
	if(current==0){
			$(".zzc-img img").css("transform","rotate(90deg)");
			current=1;
			}else if(current==1){
				$(".zzc-img img").css("transform","rotate(180deg)");
				current=2;
			}else if(current==2){
				$(".zzc-img img").css("transform","rotate(270deg)");
				current=3;
			}else if(current==3){
				$(".zzc-img img").css("transform","rotate(360deg)");
				current=0;
			}
		})

switch方法

var current = 0;
$(".rotate").on("click",function(){	
			switch(current)
			{
			case 0:
			  $(".zzc-img img").css("transform","rotate(90deg)");
			  break;
			case 1:
			  $(".zzc-img img").css("transform","rotate(180deg)");
			  break;
		  	case 2:
			  $(".zzc-img img").css("transform","rotate(270deg)");
			  break;
		    case 3:
			  $(".zzc-img img").css("transform","rotate(360deg)");
			  current=-1;
			  break;
			}
			current++
		})

第三种最简单的方法

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

猜你喜欢

转载自blog.csdn.net/weixin_43121104/article/details/85337043