내장바구니 | 주문배송조회 | 내적립금
ㆍ메인페이지
ㆍ전체상품
ㆍ포토앨범
ㆍ압축앨범
ㆍ포토달력
ㆍ편집인화
ㆍ사진액자
ㆍ메탈액자
ㆍ미니액자
ㆍ열쇠고리
ㆍ포토버튼
ㆍ머그컵,쿠션
ㆍ사진꾸미기
ㆍ사진갤러리
ㆍ공지사항
ㆍ고객게시판 >
6만원 이상 무료배송
주문하시는
총상품금액의 합계가
6만원 이상일 경우
택배비가 무료입니다.
현재위치 : 고객게시판
앨범방 사이트에 대해서 이용방법, 상품문의, 주문및배송, 사진꾸미기등 궁금한점은 여기에 질문하세요.
질문하시면 운영자가 댓글로 신속히 답변 드리겠습니다. 기타 사진, 이미지, 사진상품 관련글도 괜찮습니다.
[개발자팁] [js] 이미지 돌리기 소스  Matrix filter
작성자: 방장    작성일: 2009-01-13 09:08   조회: 14688   댓글: 1
<html> 
<head> 
<title></title> 
</head> 

<body> 
<SCRIPT LANGUAGE="JavaScript"> 
<!-- 
function rotate(name, angle){ 
 //convert angle into radians 
 var rad = degToRad(angle); 
 //calculate cos and sin of the angle 
 costheta = Math.cos(rad); 
 sintheta = Math.sin(rad); 
  
 //create object reference 
 var el = document.getElementById(name); 
 if(el) { 
  //apply the filter 
  el.style.filter = "progid:DXImageTransform.Microsoft.Matrix()"; 
   
  //set up the properties 
  el.filters.item("DXImageTransform.Microsoft.Matrix").SizingMethod = "auto expand"; 
  el.filters.item("DXImageTransform.Microsoft.Matrix").FilterType = "bilinear"; 

  //apply the rotation matrix transformation 
  el.filters.item("DXImageTransform.Microsoft.Matrix").M11 = costheta; 
  el.filters.item("DXImageTransform.Microsoft.Matrix").M12 = -sintheta; 
  el.filters.item("DXImageTransform.Microsoft.Matrix").M21 = sintheta; 
  el.filters.item("DXImageTransform.Microsoft.Matrix").M22 = costheta; 
 } 
} 


var pi = Math.PI; 
function degToRad(x) { return ( x/(360/(2*pi)) ); } 
function radToDeg(x) { return ( x*(360/(2*pi)) ); } 

function spin() 
{ 
 var form=document.forms['frm']; 
 if(!form) return; 
 if(form.angle.value.length < 1) 
 { 
  alert("각도를 입력하세요~"); 
  return; 
 }else 
 { 
  rotate('img', parseInt(form.angle.value)); 
  form.angle.value = ""; 
 } 
} 
//--> 
</SCRIPT> 
<img id="img2" src="http://www.dbtool.co.kr/images/bestsite/1164854109140/car2.jpg"> 
<div id="temp" style="position:absolute; left:100; top:100;"> 
<form name="frm"> 
각도 : <input type="text" name="angle">   
<a href="javascript:spin();">돌려</a><BR><BR> 
<img id="img" src="http://www.dbtool.co.kr/images/bestsite/1164854109140/car2.jpg"> 
</form> 
</div> 
</body> 
</html> 

 * 관련 댓글 한말씀 부탁합니다.
<html> 
<head> 
<script> 

var angle = 0; 
var deg2rad = Math.PI * 2 / 360; 
var width=0; 
var height=0; 
var top=0; 
var left=0; 
var spinTime=100;//The higher the number the slower the rotation. 

function Start() 
{ 

width=document.getElementById('mydiv').offsetWidth; 
top=document.getElementById('mydiv').offsetTop; 
left=document.getElementById('mydiv').offsetLeft; 
height=document.getElementById('mydiv').offsetHeight; 
Rotation(); 
}  


function Rotation() { 

angle-= 1; 
if(angle>360) 
{ 
angle=0; 
} 
rad = angle * deg2rad; 
costheta = Math.cos(rad); 
sintheta = Math.sin(rad); 
mydiv.filters.item(0).M11 = costheta; 
mydiv.filters.item(0).M12 = -sintheta; 
mydiv.filters.item(0).M21 = sintheta; 
mydiv.filters.item(0).M22 = costheta;  
document.getElementById('mydiv').style.pixelTop=top-(document.getElementById('mydiv').offsetHeight-height)/2; 
document.getElementById('mydiv').style.pixelLeft=left-(document.getElementById('mydiv').offsetWidth-width)/2; 
setTimeout("Rotation();",spinTime); 
} 
</script> 
</head> 
<body style='background-color:transparent' onload="Start();"> 
<div id="mydiv" style="position:relative;top:0px;left:0px;width:200px;height:200px;filter:progid:DXImageTransform.Microsoft.Matrix(M11='1.0', sizingmethod='auto expand')"> 
<img border=0 src="day.gif"> 
</div> 
</body> 
</html>
방장
2009-01-13 09:08
  작성자:    비밀번호:   (비밀번호는 숫자 4자리이며 본인댓글 삭제시 필요합니다.)
이용약관 | 개인정보취급방침