1. 程式人生 > >jq實現旋轉圖片

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