滑动(Sliding)
翻译:QQlan

Sliding就是我所说的动画或者滚动效果. 使用looping (或者 iterating) functons. 慢慢的移动层,你能制作出任何你能想象的动画效果.

首先要有移动代码:

block.xpos += 5
block.left = block.xpos


这一段实现向右移动5 pixels. 然后做一个循环.

function slide() {
    if (block.xpos < 300) {
        block.xpos += 5
        block.left = block.xpos
        setTimeout("slide()",30)
    }
}

if 是一个条件语句, 用来判断什么时候停止移动. 在这段代码中, 当x-位置 超过300 pixels将停止移动. setTimeout() 用来创建循环. 30是以毫秒计的时间. 本例中, function将每个30毫秒重复运行一次.

范例: sliding1.html (http://www.dansteinman.com/dynduo/examples/sliding1.html)

按照给定的角度移动

使用初中学的三角函数, 我们能够创建能按角度移动的元素.
如果你已经忘记了, 这里有一张快照帮你回忆.


需要4个属性来初始化带角度的object.


object.angle = 30
object.xinc = 5*Math.cos(object.angle*Math.PI/180)
object.yinc = 5*Math.sin(object.angle*Math.PI/180)
object.count = 0

我们计算x 和 y 的变化值 来确定需要向上向下移动多少. 用角度*MathPI/180 得到弧度 -- 也就是sin 和cos. count 将被用来确定需要循环多少次.

还是用block例子来解释. 下面是一个能按给定角度移动元素的function.


function init() {
    if (ns4) block = document.blockDiv
    if (ie4) block = blockDiv.style
    block.xpos = parseInt(block.left)
    block.ypos = parseInt(block.top)
    block.angle = 30
    block.xinc = 5*Math.cos(block.angle*Math.PI/180)
    block.yinc = 5*Math.sin(block.angle*Math.PI/180)
    block.count = 0
}

function slide() {
    if (block.count < 25) {
        block.xpos += block.xinc
        block.ypos -= block.yinc
        block.left = block.xpos
        block.top = block.ypos
        block.count += 1
        setTimeout("slide()",30)
    }
    else block.count = 0


[b] if (block.count < 25) 表示, function将循环执行25次. ie4中, 这个block总共滑行125像素单位.

范例: sliding3.html (http://www.dansteinman.com/dynduo/examples/sliding3.html)

同时也有其他的范例, 用来改变角度.

Example: sliding4.html (http://www.dansteinman.com/dynduo/examples/sliding4.html)




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