javascript控制图片旋转2

//将图片的上右下左分别标记为0 1 2 3
//然后判断标记的变化情况就知道旋转的方向和角度了
function rotate(dir){//dir 0:逆时针 1:顺时针
	var dix=parseInt($('mainImg').get('dix'));
	var newDix=0;
	if(dir==0){
		newDix=dix-1;
		if(newDix==-1) newDix=3;
	}
	if(dir==1){
		newDix=dix+1;
		if(newDix==4) newDix=0;
	}
	$('mainImg').set('dix',newDix);
	if(window.attachEvent){//IE
		ieTrans($('mainImg'),'progid:DXImageTransform.Microsoft.BasicImage(rotation=' + newDix + ')');
	}else{//非IE
		var deg;
		if(newDix>dix){//顺时针
			deg=0-((4-newDix)%4)*90;
		}else{//逆时针
			deg=newDix*90;
		}
		notieTrans($('mainImg'),'rotate(' + deg + 'deg)');
	}
}

//IE浏览器旋转方法
function ieTrans(o,d){  
	o.style.fileter=d
}
//非IE浏览器旋转方法
function notieTrans(o,d){
	o.style.MozTransform = d;
   	o.style.webkitTransform = d;
   	o.style.msTransform = d;
   	o.style.OTransform = d;
   	o.style.transform = d;
}


你可能感兴趣的:(Web前端)