.........续上一篇教程
翻译:QQlan

字体缩放
字体缩放(使文字放大或者缩小)在Dynamic HTML技术上是可以实现的, 虽然这种技术再好也似乎是无意义的. 其他的比如flash运行的更快速简捷. 除非你已经熟练flash, 不然等你弄熟flash的时间, 早就玩转古老朴素的javascript和CSS了.

改变文字比例大小的概念来自与改变文字颜色. 首先预定义你需要使用的CSS样式表.

.s10 {font-size:10pt;}
.s15 {font-size:15pt;}
.s20 {font-size:20pt;}
.s26 {font-size:26pt;}

一个层来显示其中的一个:

Welcome

然后只要写一个function重新给这个层使用不同的样式:

function fontScale(size) {
    layerWrite('welcomeDiv',null,'Welcome')
}

下面的例子我只是增加一些链接使其更丰富:

10 pt

15 pt

20 pt

26 pt


查看范例: www.dansteinman.com/dynduo/examples/fontscaling1.html (文字缩放)

我知道这个例子不太好玩. 我们能够是文字动态的伸缩. 首先增加一些样式定义- 一个是每一步的顺序. 最简单的是使用循环写每一个样式. 我决定让我的文字在10 - 15 points之间缩放.

var sizestr = ''
document.writeln(sizestr)

下面的function中, 我只要用到一个变量 size 来跟踪目前的显示状态,以及按顺序的增 加. 状态(如果size<50) 决定是否停止循环.

var size = 10
function scaleWelcome() {
    if (size<50) {
        size++
        layerWrite('welcomeDiv',null,'Welcome')
        setTimeout('scaleWelcome()',30)
    }
}

现在我们只要激活function然后使文本尺寸增长.

查看范例: www.dansteinman.com/dynduo/examples/fontscaling2.html (文本缩放)
或者: www.dansteinman.com/dynduo/examples/fontscaling3.html


-------------------------------------------------------------
5DMedia版权所有, 转载请注明出处!