首页
网页制作
网络编程
脚本专栏
数据库
网站运营
网络安全
平面设计
CMS教程
搜索
建站极客
网络编程
CSS/HTML
正文
放大缩小VML
所属分类:
网络编程
/
CSS/HTML
阅读数: 1536
收藏 0
赞 0
分享
由于VML是矢量的,放大缩小变得很容易了。我们先看一个例子,看看VML能做到什么程度。还是以前面的一个飞碟做为例子。它是用线、圆、弧等形状拼凑起来的一个图形。我增加了移动事件,当放大太多了,可以拖动图片查看。
放大 1倍
放大 2倍
放大 3倍
放大 4倍
放大 5倍
放大 6倍
放大 7倍
放大 8倍
放大 9倍
放大10倍
是否感觉出来了,放大缩小对 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的比例是不变的。
更多精彩内容
其他人还在看
推荐深入理解css中的position定位和z-index属性
推荐深入理解css中的position定位和z-index属性
评论 0
收藏 0
赞 0
分享
不错的10个你未必知道的CSS技巧
不错的10个你未必知道的CSS技巧
评论 0
收藏 0
赞 0
分享
一点小小的创意css鼠标放上去则显示电话号码
一点小小的创意css鼠标放上去则显示电话号码
评论 0
收藏 0
赞 0
分享
固定表格的高度超过指定高度就隐藏的方法
固定表格的高度超过指定高度就隐藏的方法
评论 0
收藏 0
赞 0
分享
推荐个Css的filter常用滤波器属性及语句大全
推荐个Css的filter常用滤波器属性及语句大全
评论 0
收藏 0
赞 0
分享
淘宝段正淳的css笔记大全第1/4页
淘宝段正淳的css笔记大全
评论 0
收藏 0
赞 0
分享
CSS实现的一个图片放大展示的一种思路
CSS实现的一个图片放大展示的一种思路
评论 0
收藏 0
赞 0
分享
用css滤镜实现的文字描边效果的代码
用css滤镜实现的文字描边效果的代码
评论 0
收藏 0
赞 0
分享
用css实现的带阴影的表格效果的代码
用css实现的带阴影的表格效果的代码
评论 0
收藏 0
赞 0
分享
又一实用的常用CSS缩写语法收集
又一实用的常用CSS缩写语法收集
评论 0
收藏 0
赞 0
分享
查看更多
网络赚钱
更多
青西一女子轻信网络刷单2小时赚400元 被骗15万元
从世界杯观赛看,“移动视频”就是个伪命题
巴西世界杯复盘:七大移动营销案例图文解析
淘宝评级规则详解
图文讲解信用卡验证激活国际版PayPal账号的教程
冲刺双十一 如何做好淘宝双11期间的推广及运营
站长故事
更多
为何说魅族的小米路线注定走不通?
站长故事:一个90后站长的自述
某个人站长怎么用交友网站年赚80万的
运用互联网思维的肉夹馍西少爷
其实并非所有草根站长都能驯服社区门户这匹马
写给那些曾经想转型却找不到方向的的站长