滑移和翻转
标题新闻翻转效果,就像走马灯一样,
其实现原理是:
把要显示的第一份内容放在放在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两个参数来放大。
动画实现示意图
这里就不阐述实现过程了。