如何仅通过JS代码实现目标图片的转动（类似于轮盘）？

伊怡已易 2009-11-30 10:07:20

刚开始学JS，对其他语言不怎么熟

求高手解释下算法与思路，最好能有个例子，通过手动输入旋转角度实现目标图片的转动，谢谢！

...全文

608 15 打赏收藏转发到动态举报

写回复

用AI写文章

15 条回复

切换为时间正序

请发表友善的回复…

发表回复

likejun45 2009-11-30

打赏
举报

学习了

Click_Me 2009-11-30

打赏
举报



//一下代码IE Only  因为使用了Matrix滤镜



<style>

#idDiv{position:absolute; left:140px; top:200px; height:400; width:400;filter:progid:DXImageTransform.Microsoft.Matrix(enabled='false') ; }

#idDiv{position:absolute; left:140px; top:200px; height:400; width:400;filter:progid:DXImageTransform.Microsoft.Matrix(M11=1.0, sizingmethod="auto expand"); }

</style>

<script>

var sFilter="filter : progid:DXImageTransform.Microsoft.Matrix(";

var fM11,fM12,fM21,fM22,fDx,fDy,sType,sMethod;

var oDiv,oCodeDiv,oTxtRotation,oBtnRotation;

var i=0;



function rdl_SetRotation(deg) {

var deg2rad=Math.PI*2/360;

rad=deg*deg2rad;

costheta = Math.cos(rad);

sintheta = Math.sin(rad);

with (oDiv.filters.item(0)) {

M11=costheta;M12=-sintheta;M21=sintheta;M22=costheta;

}

rdl_UpdateMatrix();

}



function rdl_DoAnimation(){

oDiv.onfilterchange=rdl_DoAnimation;

i+=5;

if (i>359) {

i=0;

oDiv.onfilterchange=null;

}

rdl_SetRotation(i);

}



function rdl_UpdateMatrix() {

with (oDiv.filters.item(0)) {

fM11=Math.round(M11*10)/10;fM12=Math.round(M12*10)/10;fM21=Math.round(M21*10)/10;fM22=Math.round(M22*10)/10;

fDx=Math.round(Dx*10)/10;fDy=Math.round(Dy*10)/10;sType=FilterType;sMethod=SizingMethod;

}

oCodeDiv.innerText=sFilter+"SizingMethod="+sMethod+",FilterType="+sType+",Dx="+fDx+",Dy="+fDy+",M11="+fM11+",M12="+fM12+",M21="+fM21+",M22="+fM22+");";

}



function rdl_Load(e){

oDiv=document.all("idDiv");

oCodeDiv=document.all("idCodeDiv");

oTxtRotation=document.all("idTxtRotation");

oBtnRotation=document.all("idBtnRotation");

var oSelType=document.all("idSelType");

var oSelSize=document.all("idSelSize");

oSelType.onchange=new Function("with (this) oDiv.filters.item(0).filtertype=options(selectedIndex).value;rdl_UpdateMatrix();");

oSelSize.onchange=new Function("with (this) oDiv.filters.item(0).SizingMethod=options(selectedIndex).value;rdl_UpdateMatrix();");

oTxtRotation.onclick=new Function("if (this.value.length>4) this.value=0;");

oBtnRotation.onclick=new Function("rdl_SetRotation(oTxtRotation.value);");

rdl_UpdateMatrix();

}



function rdl_DoHFlip(e){

with (oDiv.filters.item(0)) {M11=0-M11;M12=0-M12;}

rdl_UpdateMatrix();

}



function rdl_DoVFlip(e){

with (oDiv.filters.item(0)) {M21=0-M21;M22=0-M22;}

rdl_UpdateMatrix();

}



window.onload=rdl_Load;

</script>





<div id=idParentDiv><div id=idDiv>

<img src="http://t3.baidu.com/it/u=1557755265,3956708856&fm=0&gp=0.jpg" align="right"><h2 >Matrix Filter</h2><b>Written by Rain1977.<br>All rights reserved . Terms of Use .</b>

</div></div>



<br>

<table><tr>

<td><input type=button value=左右反转 onclick="rdl_DoHFlip();"><input type=button value="上下反转" onclick="rdl_DoVFlip();"></td>

<td ><input id=idTxtRotation type=text value="输入角度数字" size=14></input> <input id=idBtnRotation type=button value="旋转"></td>

<td ><select id=idSelSize><option value="auto expand">auto expand</option><option value="clip to original">clip to original</option></select></td>

<td ><select id=idSelType><option value="bilinear">Bilinear</option><option value="nearest">Nearest Neighbour</option></select></td>

<td><input type=button value="动画" onclick="rdl_DoAnimation();"></td>

</tr></table>

<br>

<div id=idCodeDiv>filter</div>

xiangtanboy 2009-11-30

打赏
举报

[Quote=引用 8 楼 cntmi 的回复:]
看看这个
http://www.walterzorn.com/rotate_img/rotate_img.htm
[/Quote]

这个很强大..

likejun45 2009-11-30

打赏
举报

调速度
setTimeout("code",1000);
code为读取替换图片代码。响应的需要一个数组还存图片的src，供code读取。
替换图片代码就是
document.getElementById("test").src = "an_1.gif";
<img id="test" />
不过这个方法是比较垃圾的了....要做n多图片。别的办法我想不到了。。。。