当前位置： 移动技术网 > IT编程>网页制作>CSS > 脚本动态生成VML

脚本动态生成VML

2017年12月12日  | 移动技术网IT编程  | 我要评论
我们编写 vml 很重要的就是要和 数据库结合，如果和数据库结合了，读数据和把数据转换成 vml 变成了两部分。如果直接使用 asp 生成 包含很多 vml 的页面，一旦数据量多了，整个页面就变得很庞大，下载速度慢了，ie解释代码的速度也慢了，所以用脚本动态生成 vml 变得非常重要了。

    用 vml 画一个示意图，可以更明确上面的意义：


    前面的图文简单的说就是：使用一个 iframe 做后台，前台用脚本生成。也许担心，后台已经完成了，但前台还没有初始化的情况，你可以放心，因为读数据的过程肯定相对要慢，如果担心数据量少，只要你把脚本放在 body 前面，iframe 放在 body 的最后面，就不会产生同步错误的问题了。
    现在来具体讲讲如何用脚本动态产生 vml 。其实这和用脚本动态产生 html 是一样的过程。

<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
  <title>动态创建vml</title>
</head>
<style>
 v\:* { behavior: url(#default#vml) }
</style>
<script language="javascript">
function createpoint(x,y,v)
{
var strelement="<v:rect title='"+v+"' style='top:"+x+";left:"+y+"width:100;height:100'></v:rect>";
var newpoint = document.createelement(strelemnt);
group1.insertbefore(newpoint);
}
</script>
<body>
<v:group id="group1" style="width:200px;height:200px;" coordsize = "200,200">
</v:group>
<iframe src="readdata.asp" name="data" style="display:none"></iframe>
</body>
</html>


相应的在 readdata.asp 里面:

<script>
<%
'数据库连接部分
'读数据部分
do until rs.eof
%>
  parent.createpoint(<%=x%>,<%=y%>,<%=value%>);
<%
loop
'数据库关闭部分
%>
</script>

上面的颜色采用 风格

    看完上面的，是否对这种模式有所理解呢？下面谈谈动态生成 vml 所要注意的一些问题，先说说 document 的 createelement 方法。ie版本不同， createelement 的使用也有所区别，在早期版本的ie， createelement 只能创建 select 里面 option ，比如说 var newoption=document.createelement("option"); 但在 ie5.0 以后，createelement 可以创建所有的对象，使用的方式是 var newelement=document.createelement("<div id='odiv'></div>"); 注意到没有，这里的参数必须是个完成的 html 标记，而不是 div，用这个方法的好处就是，可以用一个语句把新创建的对象描述清楚。insertbefore 方法很好用，它把新创建的对象插入到 最后。
    我们一开始就有了 group1 ，所有以后动态生成的 vml 直接插入到 group1 的后面就可以了。曾经做了三个实验，第一个是普通的，用asp生成 vml 代码；第二个是不用iframe，在同一个页面生成脚本；第三个就是上面的例子，使用iframe 产生脚本。结果在大数据量的条件下，效率最高的是第三个，其次是第二个，第一个有明显的慢的感觉。
    接下来的一节，将讲述vml最激动人心的功能，放大缩小！

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网