动态HTML创作之二(滑动)
普通滑动

把一系列连续的移动串起来，就形成了滑动，通过滑动可以建立各种滚动或者动画的效果。同时，我们还可以使用循环语句来使每一次移动很小的间隔，由此组成了一系列的运动效果。使用这种技术几乎可以建立任意想象得到的动画。

最基本的思想方法就是建立移动代码：

block.xpos+=5

block.left=block.xpos

这段代码使每一次向右移动5个像素。然后，把这段代码粘贴到一个循环语句中：
function slide() {
  if(block.xpos<300) {
    block.xpos+=5
    block.left=block.xpos
    setTimeout("slide()",30)
  }
}
if语句用来决定何时中止动画。在上面的例子中，循环将在x定位达到300像素时停止，setTimeout()函数是建立循环的依据。也就是说，在一定的毫秒以后，它将执行双引号中的内容。因此上面这个函数将会每30毫秒重复执行一次。 我们具体一个例子来看：
<HTML>

<HEAD>
<TITLE>DHTML Demo</TITLE>
<script language="javascript">
<!--

ns4=(document.layers)?true:false
ie4=(document.all)?true:false

function init() {
if(ns4) block=document.blockDiv
if(ie4) block=blockDiv.style
block.xpos=parseInt(block.left)
}

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

function restart() {
block.xpos=50
block.left=block.xpos
}

function moveTo(obj,x,y) {
obj.xpos=x
obj.ypos=y
obj.left=obj.xpos
obj.top=obj.ypos
}
//-->
</script>
</HEAD>

<BODY onLoad="init()">
<p>
<a href="javascript:slide()">滑动</a>
<a href="javascript:moveTo(block,50,100)">重新开始</a>
</p>
<div id="blockDiv" style="position:absolute;left:50;top:100;width:30">
<img src="../image/block.gif">
</div>
</BODY>
</HTML>
这个例子的演示效果是，当单击“滑动”后，对象会向右侧滑动到300像素的地方；当单击“重新开始”后，对象又回到原始的位置。

当然，要使得对象按照一定角度斜向移动有一些困难，需要同时改变“xpos(left)”和“ypos(top)”值。这里有一个斜向移动的例子：
<HTML>

<HEAD>
<TITLE>DHTML Demo</TITLE>
<script language="javascript">
<!--

ns4=(document.layers)?true:false
ie4=(document.all)?true:false

function init() {
if(ns4) block=document.blockDiv
if(ie4) block=blockDiv.style
block.xpos=parseInt(block.left)
block.ypos=parseInt(block.top)
}

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

function moveTo(obj,x,y) {
obj.xpos=x
obj.ypos=y
obj.left=obj.xpos
obj.top=obj.ypos
}
//-->
</script>
</HEAD>

<BODY onLoad="init()">
<p>
<a href="javascript:slide()">按一个角度斜向滑动</a>
<a href="javascript:moveTo(block,50,100)">重新开始</a>
</p>
<div id="blockDiv" style="position:absolute;left:50;top:100;width:30">
<img src="../image/block.gif">
</div>
</BODY>
</HTML>
当单击“按一个角度斜向滑动”后，对象会向右下方移动。

按照给定的角度移动

这里，我们需要一些在高中里学过的知识：三角函数。通过这种函数形式，我们可以指定一个元素按照任何的角度移动。现在初始化对象，其中包含有角度的信息值，需要4个新的属性：

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的增量以决定每一次让对象沿垂直和水平方向移动多少距离。需要把角度值转换成弧度值：
弧度值=角度值*(3.1416/180)。“count”属性被用来决定循环多少次。if(block.count<25)表示函数将在执行25次以后停止。也就是说，这个对象将移动125像素单位。这个例子的完整形式如下：
<HTML>

<HEAD>
<TITLE>DHTML Demo</TITLE>
<script language="javascript">
<!--

ns4=(document.layers)?true:false
ie4=(document.all)?true:false

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
}

function restart() {
block.count=0
moveTo(block,150,150)
}

function moveTo(obj,x,y) {
obj.xpos=x
obj.ypos=y
obj.left=obj.xpos
obj.top=obj.ypos
}
//-->
</script>
</HEAD>

<BODY onLoad="init()">
<a href="javascript:slide()">滑动</a>-
<a href="javascript:restart()">重新开始</a>
<div id="blockDiv" style="position:absolute;left:150;top:150;width:30">
<img src="../image/block.gif">
</div>
</BODY>
</HTML>
当单击“滑动”后，对象就会按照事先给定的角度滑动，“重新开始”就会使对象回归初始的位置。

或许这种滑动方式还不是非常方便，因为每次如果需要改变角度，都需要重新编辑 HTML 源文件。因此，我们可以改变角度的工作放在页面上来做，这样，就显得非常灵活了。这个完整的程序如下：

<HTML>

<HEAD>
<TITLE>DHTML Demo</TITLE>
<script language="javascript">
<!--

ns4=(document.layers)?true:false
ie4=(document.all)?true:false

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

//在你移动之前，必须首先计算xinc和yinc的值

function start() {
block.angle=document.changeangle.angletext.value
block.xinc=5*Math.cos(block.angle*Math.PI/180)
block.yinc=5*Math.sin(block.angle*Math.PI/180)
slide()
}

function slide() {
if(block.count<20) {
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
}

function restart() {
block.count=0
moveTo(block,150,150)
}

function moveTo(obj,x,y) {
obj.xpos=x
obj.ypos=y
obj.left=obj.xpos
obj.top=obj.ypos
}
//-->
</script>
</HEAD>

<BODY onLoad="init()">
<form name="changeangle">
<p>输入一个角度并且单击“滑动”：
<br><input name="angletext" type="text" size=4 value="0">
<input type="button" value="滑动" onClick="start()">
<input type="button" value="重置" onClick="restart()"></p>
</form>
<div id="blockDiv" style="position:absolute;left:150;top:150;width:30">
<img src="../image/block.gif">
</div>
</BODY>
</HTML>
在输入角度的文本框中，可以输入任何的角度值。