当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > 放大缩小VML

CSS样式表
CSS的margin边界叠加深度剖析图文演示
CSS中Float(浮动)相关技巧文章
惊现学习CSS应该注意的方法
使用text-align:justify实现两端对齐一例
CSS整体布局声明的一些使用技巧
推荐深入理解css中的position定位和z-index属性
固定表格的高度超过指定高度就隐藏的方法
推荐个Css的filter常用滤波器属性及语句大全
用css滤镜实现的文字描边效果的代码
用css实现的带阴影的表格效果的代码
推荐个不错的表单Input的高级用法11例
flash幻灯片需要先激活ActiveX控件才能使用的又一个办法
DIV+CSS作网页容易犯的错误小结
ul+li及css制作韩国风格菜单代码
div布局的自由伸展三栏式版面的代码
几乎被设计师遗忘了的标签fieldset legend
不用javascript实现带序号的表格隔行换色的效果
用CSS实现基本条状图表效果
用javascript来控制 链接的target 属性的代码
多浏览器css兼容分析小结

CSS样式表 中的 放大缩小VML


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-12   浏览: 92 ::
收藏到网摘: n/a

由于VML是矢量的,放大缩小变得很容易了。我们先看一个例子,看看VML能做到什么程度。还是以前面的一个飞碟做为例子。它是用线、圆、弧等形状拼凑起来的一个图形。我增加了移动事件,当放大太多了,可以拖动图片查看。











是否感觉出来了,放大缩小对 VML 的画质没有改变?因为 VML 是矢量的。动态改变它的 coordsize 值就可以了,注意,减小值等于放大,增大值就等于缩小。可以参考下面的脚本:
var xx=6000;
var yy=6000;
function zoom(h)
{
group1.coordsize=xx/h+","+yy/h;
}

上面的 xx,yy 是指默认状态下的 coordsize 值。调用这个函数的时候使用 zoom(n) 其中 n 是要放大的倍数。
当VML中包含 文字的时候,图形放大了,但文字不会自动放大。这样一来就很不对称了,有个技巧,就是文字都用一种标记包着,放大函数就需要改进一下了:
var xx=6000;
var yy=6000;
var fs=9;
function zoom(h)
{
group1.coordsize=xx/h+","+yy/h;
for(var i=0;i<document.all.tags("DIV").length;i++)
document.all.tags("DIV").item(i).style.fontSize=fs*h+"pt";
}

fs是默认状态下的文字大小。document.all.tags("DIV") 将返回页面上所有DIV元素,然后把他们的文字大小都变大。实践证明,放大后和VML的比例是不变的。