jq實現旋轉圖片
阿新 • • 發佈:2018-12-29
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)");
})