用VML语言在html中画图和实现动画

来源：互联网发布：熊猫tv登录网络错误编辑：程序博客网时间：2024/06/04 18:37

效果图如下：

用VML语言在html中画图和实现动画 - lishirong - 技术成就梦想努力成就未来

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

<head>

<style>

v\:*{

behavior:url(#default#VML);

}

</style>

var i=0;

var t=0;

function test(){

loadRotation();

window.setInterval(change,1000);

window.setInterval(changeRotation,50);

}

function loadRotation(){

rotation();

rotation1();

rotation2();

rotation3();

}

function change(){

document.getElementById("test").innerHTML=t;

t++;

}

function changeRotation(){

document.getElementById("group1").Rotation=i;

i=i+5;

}

function rotation(){

var oVGroup = document.createElement("<v:group id='group0' style='position:absolute;LEFT:100px;TOP:200px;WIDTH:5px;HEIGHT:8px;' coordsize='1600,1600'/>");

show2.appendChild(oVGroup);

var lineStr="<v:line style='position:absolute' strokeweight='1' strokecolor='#FF0000' from='3000,3000' to='3000,0'></v:line><v:line style='position:absolute' strokeweight='1' strokecolor='#FF0000' from='3000,0' to='6000,0'></v:line><v:line style='position:absolute' strokeweight='1' strokecolor='#FF0000' from='3000,800' to='6000,800'></v:line>";

document.all("group0").innerHTML=lineStr;

//document.all("group1").Rotation=180;

}

function rotation1(){

var oVGroup = document.createElement("<v:group id='group1' style='position:absolute;LEFT:100px;TOP:200px;WIDTH:5px;HEIGHT:8px;' coordsize='1600,1600'/>");

show2.appendChild(oVGroup);

var lineStr="<v:line style='position:absolute' strokeweight='1' strokecolor='#00FF00' from='3000,3000' to='3000,0'></v:line><v:line style='position:absolute' strokeweight='1' strokecolor='#00FF00' from='3000,0' to='6000,0'></v:line><v:line style='position:absolute' strokeweight='1' strokecolor='#00FF00' from='3000,800' to='6000,800'></v:line>";

document.all("group1").innerHTML=lineStr;

//document.all("group2").Rotation=180;

}

function rotation2(){

var oVGroup = document.createElement("<v:group id='group2' style='position:absolute;LEFT:100px;TOP:300px;WIDTH:5px;HEIGHT:8px;' coordsize='1600,1600'/>");

show2.appendChild(oVGroup);

document.all("group2").innerHTML=lineStr;

//document.all("group1").Rotation=180;

}

function rotation3(){

var oVGroup = document.createElement("<v:group id='group3' style='position:absolute;LEFT:100px;TOP:300px;WIDTH:5px;HEIGHT:8px;' coordsize='1600,1600'/>");

show2.appendChild(oVGroup);

document.all("group3").innerHTML=lineStr;

//document.all("group2").Rotation=180;

}

function correctLocation(){

restore();

var fx=document.getElementById("fx").value;

var x=document.getElementById("x").value;

var y=document.getElementById("y").value;

//alert("fx:"+fx+"x:"+x+"y:"+y);

var left=document.getElementById("group3").style.left;

var top=document.getElementById("group3").style.top;

left=left.substring(0,left.length-2);

top=top.substring(0,top.length-2);

//alert("left:"+left+"top:"+top);

document.getElementById("group3").Rotation=fx;

var newLeft=parseInt(left)+parseInt(x);

var newTop=parseInt(top)+parseInt(y);

//alert("newLeft:"+newLeft+"newTop:"+newTop);

document.getElementById("group3").style.left=newLeft+'px';

document.getElementById("group3").style.top=newTop+'px';

}

function restore(){

document.getElementById("group3").style.left='100px';

document.getElementById("group3").style.top='300px';

}

</script>

</head>

</label>

</div>

请输入风向值：<input id="fx" type="text"/>(0-360之间的整数)<br/>

x修正值：<input id="x" type="text" value="0"/>(整数，可以为负)<br/>

y修正值：<input id="y" type="text" value="0"/>(整数，可以为负)<br/>

</div>

</body>

</html>

0 0