jQuery基础教程第九章学习

滑移和翻转

标题新闻翻转效果，就像走马灯一样，

其实现原理是：

把要显示的第一份内容放在放在div的正常位置，将第二份、第三份。。等等，待显示的

内容通过overflow:hidden隐藏在div容器的下端（这里所有的内容是在同一个容器之下的，因

为当虽然固定了高度，但内容可以撑开容器，所以需要前面的那个属性来隐藏）。当动画移动时，

是将第一份内容向上移动height（参考下面div样式）高度（有动画效果）后再把它移动回div下端（无动画效果）。

在第一份移动的同时隐藏在下端的第二份也从下面移动top（参考下面文字样式）高度上到正常位置，就这样可以

形成周而复始的循环效果。

动画实现的示意图：

效果的实现：

前期工作，创建一个div用其来放入内容，然后创建两个css样式。一个用来固定div，另一个来设置文字格式。

div的样式：

必须有：1.固定的height和width（保证文字显示和动画的移动）

2.overflow:hidden（保证我们将文字放在下面时会隐藏）

可选：position:relative.......等还有很多

文字样式（div下面的文字）：

必须有：1.position:absolute（要是这个的话，div样式就必须有position:relative，具体为什么，可以去查下absolute是如何定位的）抑或position:relative

2.固定的height（数值与上面的div相同就好了）

3.固定的top（这些文字内容是放在div中的，所以要将第二份内容、第三份内容。。等等这些的放在超过div容器的下端，其数值在上面div的height上加上一定的数值，让其超过div容器的高度）

4.overflow:hidden.

工作开始：

把文字分成一段一段，创建与文字段数量相同的div，然后将文字放入div中，接着，把这些放入一个总的div中，总的div应用前期工作中的div的样式，放文字的div应用文字div。

接下来就是通过animate方法来移动这些div和设置setTimeout()来实现动画的不断移动。

图像传送带效果，有放大镜功能

实现原理

同样的，把所有的相片放在一个div中，然后固定好这个div的width，使其刚刚承载三张图片，然后利用overflow:hidden来

隐藏后面的图片，当点击左边的图片时，左边的图片向左移动一段距离然后重新插入（.appendTo()方法）这个div的结尾，而中间

的向右边移动，右边的向中间移动，这样就形成的点击左边的的动画效果。在这里最关键的是插入，因为是利用.appendTo方法插入，

所以不会复制，它仅仅把其重新插入到结尾，为什么关键呢？因为在操作的时候我们可以直接利用遍历，然后取前三个元素来操作，即

.eq(0)，.eq(1)，eq(2)，而当重新插入时，这些元素都会重新排列一次，所以不用记录第几个什么的。

放大镜功能其实是通过设置图片的width和height两个参数来放大。

动画实现示意图

这里就不阐述实现过程了。