<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"><br />
<style>
body img{border:3 gold ridge}
</style>
<title>用Javascript使网页图片产生旋转效果</title><br />
<script language="javascript">
var i=0;
function playImg()
{
image.style.filter="progid:DXImageTransform.Microsoft.BasicImage( Rotation="+i+")";
i++;
if (i>4)
{i=1};
mytimeout=setTimeout("playImg()",1500);
}
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000" onload="playImg()"><br />
<img src="/img/200406301.jpg" width="120" height="120" name="image"><br />
</body>
</body><B></B>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"><br />
<style>
body img{border:3 gold ridge}
</style>
<title>用Javascript使网页图片产生旋转效果</title><br />
<script language="javascript">
var i=0;
function playImg()
{
image.style.filter="progid:DXImageTransform.Microsoft.BasicImage( Rotation="+i+")";
i++;
if (i>4)
{i=1};
mytimeout=setTimeout("playImg()",1500);
}
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000" onload="playImg()"><br />
<img src="/img/200406301.jpg" width="120" height="120" name="image"><br />
</body>
</body><B></B>
</html>
解决方案 »
- Jqeury二级联动问题
- 今天交项目,求助EXT高手
- 我想这想知道解决这个问题方法的不只我一个
- 如何在页面A跳转到框架页面B时,让框架页面B中的一个子页面自动转向某个地址?
- 相对宽度(比如98%)如何转换为绝对宽度567px?
- 如何判断空格
- 脚本盲求一段JS代码:显示网页在线人数;来访者IP,并对其计数;总访问量计数;处理页面所花的时间。
- open(img)里面的img的是变量吗?
- [倒,竟忘记了] JS中,执行字符串的函数是什么?如 s="alert(div1" + 1 + ".style.height);" ,怎样让S执行?
- 如何实现公告板滚屏中鼠标指向即停止?
- 控制页面跳转的怎么做啊?
- 菜动折起和展开问题??
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style>
body img{border:3 gold ridge}
</style>
//给图片加上边框的CS代码
<title>用Javascript使网页图片产生旋转效果</title>
<script language="javascript">
var i=0;
function playImg()
{
image.style.filter="progid:DXImageTransform.Microsoft.BasicImage( Rotation="+i+")";
i++;
if (i>4)
{i=1};
mytimeout=setTimeout("playImg()",1500);
}
</script>
//以上是使图片实现四个方向转换的代码
</head>
<body bgcolor="#FFFFFF" text="#000000" onload="playImg()">
//修改body为加载就显示效果
<img src="/img/200406301.jpg" width="120" height="120" name="image">
</body>
</body>
</html>
var num=0;
function show(){
num=(num==3)?0:++numdocument.getElementById("img1").style.filter = "progid:DXImageTransform.Microsoft.BasicImage(Rotation=" + num + ")";
}</script><body><img name="img1" src="http://community.csdn.net/logo/images/prj.210.67.gif">
<input type="button" value="90ת" onclick="show()"> </body>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Rainer's Handbook</title>
<style>
body{margin:0px;padding:16px;background:#FFFFFF;overflow:auto;}
body,table,input,select,textarea,a{font-family:verdana,tahoma,arial;font-size:11px;color:#000000;word-break:break-all;}
table,img{border:0px;}
a{text-decoration:none;color:#003399;}
a:hover{color:#000000;text-decoration:underline;}
#id_div3{padding-top:8px;border-top:1px solid #000000;line-height:15px;}
#id_span3{font-size:10px;font-family:tahoma;}
#idParentDiv{width:100%;overflow-y:scroll;padding:6px;height:180px;background-color:buttonshadow;color:#FFFFFF;}
#idDiv{width:290px;text-align:left;padding:6px;background-color:#000000;font-family:tahoma,Arial;filter:progid:DXImageTransform.Microsoft.Matrix(M11=1.0, sizingmethod="auto expand");}
#idCodeDiv{width:100%;padding:4px;font-family:verdana,tahoma;margin:12px 0px 0px 0px;background-color:#EEEEEE;font-weight:bold;}</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></head>
<body>
<div id=idParentDiv><div id=idDiv align="center">
<img src="http://pic1.blueidea.com/bbs/topic5.gif" 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><br> <br> <br>
<div id=id_div3>苏昱作品·版权所有<br><span id=id_span3>©2002 Rainer Su . All rights reserved . Terms of Use .</span></div>
</body>
</html>
////写入正方形的层和容器,可以另外在html中创建。不过注意id=aDiv
document.write('<div style="position: relative; top: 0; left: 200; width: 75; height: 75;">'
+'<div id="aDiv" style="position: absolute; width: 50; height: 50; background-color: silver; border: 1 solid gray">'
+'<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">'
+'<tr><td align="center" valign="middle">'
+'<p style="font-face: tahoma, arial, helvetica; font-size: 10px">Spin!!'
+'</td></tr>'
+'</table>'
+'</div>'
+'</div>')
///创建和运用滤镜
function rotate(name, angle){
//将角度转变成弧度
var rad = degToRad(angle);
//计算弧度的cos和sin值
costheta = Math.cos(rad);
sintheta = Math.sin(rad);//创建对象
var el = document.getElementById(name);
if(el) {
//应用滤镜
el.style.filter = "progid:DXImageTransform.Microsoft.Matrix()";
//设置滤镜的属性值
el.filters.item("DXImageTransform.Microsoft.Matrix").SizingMethod = "auto expand";
el.filters.item("DXImageTransform.Microsoft.Matrix").FilterType = "bilinear"; //运用旋转滤镜
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 angle = 0;
function doRotate() {
//检查并确保角度值在0到360之间
if(angle>360) angle-=360;
//使角度增加
angle+=15;//do rotation
rotate("aDiv",angle);//定位旋转中心
var el = document.getElementById("aDiv")
el.style.top = 25 - (el.offsetHeight/2);
el.style.left = 25 - (el.offsetWidth/2);//循环
setTimeout("doRotate();",10);
}//角度变弧度函数
var pi = Math.PI;
function degToRad(x) { return ( x/(360/(2*pi)) ); }
function radToDeg(x) { return ( x*(360/(2*pi)) ); }
doRotate()
//--></script>
高手啊 请问你水平翻转,垂直翻转怎么做呀 先谢谢你了