蛇形移动原理及其制作技巧

。。。动移形蛇的字文或片图作制何如你教，学我跟

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

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

矩阵坐标转换定义蛇形移动区域

要制作蛇形移动，我们需要起伏上下移动区域。微软浏览器支持的矩阵转换方法如下：

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)设置空白和叠加分区移动

用以上三个区段（位置1至位置3，每段宽度200px）为例，来解析蛇形移动制作原理。我们知道标签定义的移动是从右至左的，即图片或文字是从区段1移动至区段3（见上图）。

位置1：

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

位置2：

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

莫愁春雨欢迎您！

位置3：

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

莫愁春雨欢迎您！

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

莫愁春雨欢迎您！

范例1：十区段连续蛇形移动

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

莫愁春雨欢迎您！

范例2：五区段图片蛇形移动 <<<<<<
蛇形移动原理及其制作技巧

<<<<<<

范例4：四区段文字从左向右蛇形移动
！幸荣我顾光的您,您迎欢雨春愁莫
！幸荣我顾光的您,您迎欢雨春愁莫
！幸荣我顾光的您,您迎欢雨春愁莫
！幸荣我顾光的您,您迎欢雨春愁莫
范例5：四区段图片从左向右蛇形移动
范例3：五区段双FLASH动画蛇形移动

渔舟唱晚

2014/6/27 20:30:30

举报不良信息

流淌的红水河铁打的营盘！流水的兵秋狼

大小

莫愁春雨欢迎您！