如何仅通过JS代码实现目标图片的转动(类似于轮盘)? 刚开始学JS,对其他语言不怎么熟求高手解释下算法与思路,最好能有个例子,通过手动输入旋转角度实现目标图片的转动,谢谢! 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 放一张gif的转动图替换上不就可以了?不然就是多做几张图片替换 谢谢楼上几位的关注。放GIF或图片替换属于最直观的方法,不知道旋转的角度和速度能不能通过JS代码的外部接口来控制?(例如在网页上放按钮或输入框,输入角度或速度等参数) 放GIF应该不可以,用图片替换就可以,不过这样你要走都少张图片啊......角度有360°,还不包括非整数角度....这东西用js做也太麻烦了....用flash做吧....至于选择速度倒是不难解决,用计时函数修改里面的delay就可以了。 用FLASH做我会,我只是想知道JS是怎样实现的也许有点较真,不过还是希望大家能帮帮忙 看看这个http://www.walterzorn.com/rotate_img/rotate_img.htm 调速度 setTimeout("code",1000);code为读取替换图片代码。响应的需要一个数组还存图片的src,供code读取。替换图片代码就是document.getElementById("test").src = "an_1.gif";<img id="test" />不过这个方法是比较垃圾的了....要做n多图片。别的办法我想不到了。 //一下代码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> 借个位置 请大虾帮忙一下:[url=http://topic.csdn.net/u/20091130/11/44f40ada-23e2-44af-959f-4d094fa14bc7.html][/url]纵向js相册 缩略图上onmouseover 显示图片有随机特效 dreamweaver插入的音频无法播放 js和flash的交互懂的请帮忙看下 急!请教Ext.Grid问题 大难题来了! 有什么办法通过JavaScript实现实时的语法高亮显示? 求这样一个代码? js打开一个模式对话框后再打开一个模式对话框的问题 showModalDialog打开窗体问题 简单问题!这种如何调用呢? 誰有象IE一樣的下拉菜單﹖ 在程序中如何触发一个控件的事件 JAVASCRIPT在IE6上测试没有问题,但到了FIREFOX就跑不起来 |zyciis| Jquery如何来拦截掉form的onsubmit方法,谢谢
用图片替换就可以,不过这样你要走都少张图片啊......角度有360°,还不包括非整数角度....这东西用js做也太麻烦了....用flash做吧....至于选择速度倒是不难解决,用计时函数修改里面的delay就可以了。
也许有点较真,不过还是希望大家能帮帮忙
http://www.walterzorn.com/rotate_img/rotate_img.htm
setTimeout("code",1000);
code为读取替换图片代码。响应的需要一个数组还存图片的src,供code读取。
替换图片代码就是
document.getElementById("test").src = "an_1.gif";
<img id="test" />
不过这个方法是比较垃圾的了....要做n多图片。别的办法我想不到了。
//一下代码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>
纵向js相册 缩略图上onmouseover 显示图片有随机特效