jCarousel用羽毛装饰的剪贴膜

时间:2011-08-16 21:14:58

标签: javascript jquery html css jcarousel

我有一组用jCarousel连续滚动的图像。一次只能完全显示一个图像,我希望能够“羽化”旋转木马的边缘,以便图像在穿过可见性时淡入淡出。

希望这是有道理的。

此外,旋转木马的动作有时似乎有点儿麻烦。在偶尔的页面加载中,似乎轮播初始化中的animation和/或auto参数未正确实现,导致轮播要么比预期更快地移动,要么延迟更长时间等等想法?

编辑添加:可能有一种方法,代替真正的剪贴蒙版,使用jCarousel的一个回调来对图像执行fadeOut(),因为它移出旋转木马的焦点(然后{{ 1}}当图像移动到焦点时)?

2 个答案:

答案 0 :(得分:1)

Here是具有羽化边缘的jcarousel的示例

从技术上讲,它并不是真正的羽毛,顶部只有半透明的PNG。我认为没有办法让真正的羽毛

答案 1 :(得分:0)

这样做的一种方法是制作一个透明的PNG,其渐变从透明渐变到旋转木马背景的颜色,并使用比旋转木马更高position:absolute的CSS z-index容器div将它放在上面。 Here's a page with some examples- pay attention to the transparency section in particular.