滑动即是动画式的运动或可称为重复效果(平滑的移动). 使用重复函数和小增量的层移动, 你可以把能想到的各种动画运动组合到一起.
以下面的移动代码作为基本概念:
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-position)运动达到或超过 300 pixels 这个坐标值时函数就会停止运行. setTimeout() 的作用是生成并限制重复动作. 一定时间内它会执行括号内的所有内容. 具体到本例此函数每30毫秒重复一次.
点击这里观看示例.
要做到斜线移动也并非很困难 -- 你只需将 xpos(左) 和 ypos(上) 的值同时改变就可以了. 点击这里看看斜线移动的示例.
运用中学的三角知识我们就可以做到使元素以一定的角度移动. 如果你忘记了这部分基础知识, 这里有一个小图表可以帮助你寻回记忆:
为了初始化对象, 使其将角度包含在内, 你将需要四个新属性:
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 增量并用它们来定义 left 和 top 的移动值. 你需要用角度乘 Math.PI/180 以便把角度转换为弧度 -- sin 和 cos 总是以弧度来计算的. 计算属性将添加在重复函数中以设定重复的次数.
以下是关于一个元素以指定角度移动的完整代码.
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 }
if (block.count < 25)意思是函数将在停止前运行25次 -- IE4. 小方块将滑动共125个象素.
点击这里看示例.
我还创建了另一个例子以使你能变换角度. 点击这里观看.
首页 | 下一课: 鼠标点击动画 |