云儿【拒绝聊天】

莫愁春雨//QQ1139322036//2558600823

最近空间日志里时常看见图片或文字的蛇形移动。和传统的水平或垂直移动相比，蛇形移动新颖，更能吸引空间网友的眼球。如果代码日志网友要做一个适合自己个性化的蛇形移动，就需要了解其制作原理，这样才能举一反三，做出自己喜欢的蛇形移动图片或文字。本文试图通过几个实例来详解其制作原理。

简单地说：蛇形移动是利用微软浏览器的矩阵坐标转换，叠加分段移动，再加上填补空白的方法而制作出来的。

1. 矩阵坐标转换定义蛇形移动区域
   要制作蛇形移动，我们需要起伏上下移动区域。微软浏览器支持的矩阵转换方法如下：
   filter:progid:DXImageTransform.Microsoft.Matrix(M11=1.0, M12=0.0, M21=+0.6, M22=1.0, SizingMethod='auto expand')
   

   如果我们更改M21的符号从+0.6变为-0.6，其结果如下：
   filter:progid:DXImageTransform.Microsoft.Matrix(M11=1.0, M12=0.0, M21=-0.6, M22=1.0, SizingMethod='auto expand')
   

   所以交替使用以上两个坐标转换函数，我们就定义出了蛇形移动区域了。
   

   位置3 (宽度200px)

   位置2 (宽度200px)

   位置1 (宽度200px)

2. 设置空白和叠加分区移动
   用以上三个区段（位置1至位置3，每段宽度200px）为例，来解析蛇形移动制作原理。我们知道标签<marquee></marqquee>定义的移动是从右至左的，即图片或文字是从区段1移动至区段3（见上图）。
   

   位置1：
   图片从位置1开始向左移动，移动完自己的区块是200px，然后要等剩下的两个区块宽度＝2x200px=400px，才完成一个循环总宽度＝3x200px=600px，所以说对于位置1的图片，自己向左移动200px ，然后等待400px。我们可以定义下面的两格子的表格来完成：

   <marquee>
   <table align="center" >
   <tbody><tr>
   <td>
   <p style="vertical-align:center;font-family:黑体;color:yellow;display:inline-block;font-weight:bolder;font-size:36pt;"  >
   莫愁春雨欢迎您！</p>
   </td> <td>
   <table style="width:400px;" align="center">
   <tbody>
   <tr><td>
   </td></tr>
   </tbody>
   </table>
   </td>
   </marquee>
   

   位置2：
   图片在位置2要等位置1的图片移动200px后，才能开始向左移动，移动完自己的区块是200px，然后要等剩下的一个区块宽度＝200px，才完成一个循环总宽度＝3x200px=600px，所以说对于位置2的图片：先等位置1的图片移动200px，然后自己向左移动200px ，再等待位置3的图片向左移动200px。我们可以定义下面的三格子的表格来完成：

   <marquee>
   <table align="center" >
   <tbody><tr>
   <td>
   <table style="width:200px;" align="center"  >
   <tbody>
   <tr><td>
   </td></tr></tbody>
   </table>
   </td><td>
   <p style="vertical-align:center;font-family:黑体;color:yellow;display:inline-block;font-weight:bolder;font-size:36pt;"  >
   莫愁春雨欢迎您！</p>
   </td><td>
   <table style="width:200px;" align="center"  >
   <tbody>
   <tr><td>
   </td></tr></tbody>
   </table>
   </td>
   </marquee>

   位置3：
   图片在位置3要等位置1和位置2的图片移动2x200px=400px后，才能开始向左移动，移动完自己的区块是200px，就完成一个循环总宽度＝3x200px=600px，所以说对于位置3的图片：先等位置1和位置2的图片移动完400px，然后自己向左移动200px。我们可以定义下面的两格子的表格来完成：

   <marquee>
   <table align="center" >
   <tbody><tr>
   <td>
   <p style="vertical-align:center;font-family:黑体;color:yellow;display:inline-block;font-weight:bolder;font-size:36pt;"  >
   莫愁春雨欢迎您！</p>
   </td><td>
   <table style="width:400px;" align="center">
   <tbody>
   <tr><td>
   </td></tr>
   </tbody>
   </table>
   </td>
   </marquee>

   这样我们可以把以上三个分段移动显示叠加起来，就成了下面的连续运动了。

3. 范例1：十区段连续蛇形移动
   基于以上三区段叠加移动的例子原理，我们可以做出任意区段蛇形显示，下面的移动是10区段连续显示结果。