Archive

文章標籤 ‘rotate’

讓圖片依自訂的角度旋轉(IE Only)

2010年2月25日 尚無評論

下方語法能夠讓圖片自訂由0~90度內自訂的角度旋轉


<style>
#test{
 position:absolute;
 top=100px;
 height=500px;
 filter:
 progid:DXImageTransform.Microsoft.Matrix(enabled=true,SizingMethod=clip to original,FilterType=nearest neighbor)
 FlipH(enabled=false)
 FlipV(enabled=false);
 }
</style>
<div id=test>
 <img src="http://tommy.ironman.tw/images/olay.gif">
</div>
<input id=angle value=30><input type=button onclick="doRotate(angle.value,test)" value="旋轉">
<script>
function doRotate(sita,obj){
 var t=Math.PI*sita/180;
 var c=Math.cos(t);
 var s=Math.sin(t);
 with(obj.filters.item(0)){
 Dx=0;
 M11=c;
 M12=-1*s;
 M21=s;
 M22=c;
 }
 }
doRotate(30,test)
</script>

範例瀏覽(IE Only):

http://tommy.ironman.tw/Sample_Page/javascript-img-rotate.html

Categories: Javascript Tags: ,