VML实例-可控箭头

最新推荐文章于 2022-04-11 18:01:39 发布

想飞的孤独少年

最新推荐文章于 2022-04-11 18:01:39 发布

阅读量258

点赞数

分类专栏：其他文章标签： asp html

本文链接：https://blog.csdn.net/qq_33735635/article/details/116063346

版权

其他专栏收录该内容

21 篇文章 3 订阅

订阅专栏

这个博客展示了如何使用VML（Vector Markup Language）在HTML中创建动态的、可控制的箭头。通过JavaScript实现箭头的方向和速度变化，用户可以通过键盘上的方向键控制箭头的移动方向，上下键调整移动速度。示例中包含了VML线条和多边形的使用，以及事件监听和数学运算的应用。

摘要由CSDN通过智能技术生成

VML可控箭头

<html xmlns="http://www.w3.org/1999/xhtml"
   xmlns:v="urn:schemas-microsoft-com:vml"
   xmlns:o="urn:schemas-microsoft-com:office:office" lang="en">
<head>
<title>画斜线</title>
<!--[if !mso]>
<style>
v\:*{behavior:url(#default#VML)}
</style>
<![endif]-->
<style type="text/css">
body{padding:0px;margin:0px;}
#line{position:absolute;left:0;top:0;z-Index:3;}
</style>
</head>
<body>

<v:line id="line"></v:line>
<v:PolyLine id="pLine" filled="false" Points="0,0 0,100"></v:PolyLine>
<v:shape CoordOrig="100,100" CoordSize="200,200">

</v:shape>

<script language="javascript">
var line=document.getElementById("line");

line.to="0,0";
line.from="0,0";
with(line.stroke)
{
 Color="#FF0000";
 Weight="1px";
 EndArrow="Classic";
 DashStyle="LongDashDot";
}

line=document.getElementById("pLine");
line.style.position="absolute";
with(line.stroke)
{
 Color="#000";
 Weight="1px";
 EndArrow="Classic";
 DashStyle="Solid";
}
line.Points.value="10,10 100,100 200,300 400,500";
var html="10,10";
var direction=0;
var prePoint=[10,10];
var step=5;
function Move()
{
 var x=step*Math.cos(direction);
 var y=step*Math.sin(direction);
 var p=prePoint;
 p[0]+=x;
 p[1]-=y;
 p[0]=Math.round(p[0]);
 p[1]=Math.round(p[1]);
 if(p[0]>=0&&p[1]>=0&&step>0)
 {
  prePoint=p;
  html+=" "+prePoint[0]+","+prePoint[1];
  line.Points.value=html;
 }
}
window.setInterval(Move,50);

function document_KeyDown(e)
{
 var e=window.event;
 if(e.keyCode==37)
  direction+=0.1;
 else if(e.keyCode==39)
  direction-=0.1;
 else if(e.keyCode==38)
  step=Math.min(Math.max(step+1,1),15);
 else if(e.keyCode==40)
  step=Math.max(step-1,0);
}
document.onkeydown=document_KeyDown;
document.body.focus();
</script>
</body>
</html>

Tip:

方向键左右控制方向,上下控制快慢

想飞的孤独少年

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VML实例-可控箭头

VML可控箭头<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" lang="en"><head><title>画斜线</title><!--[if !mso]><style>v\:*{behavior
复制链接

扫一扫

专栏目录