仿苹果Cover Flow特效Js脚本 – ImageFlow

2012 年 5 月 3 日

最后更新于 2012 年 6 月 26 日

ImageFlow是一款基于Javascript的图集脚本，使用了Cover Flow技术，如果你想做一个仿苹果Cover Flow特效的图集或者首页幻灯片展示模块，ImageFlow非常适合，非商业用途可以使用免费版本。

目录

ImageFlow特性

支持同时渲染多个实例（面向对象开发）
容易使用（用户需要些的js代码少的不起眼）
与大多数主流浏览器兼容
每个图集支持100张以上的图片
支持图片倒影（通过服务器端php脚本实现）
100% Javascript （除了倒影是用php实现的）
带有滚动条
支持鼠标滚轮翻阅相册
图片载入提示条
100%动态缩放
用div标签构建HTML结构
支持Iphone和Ipad触摸操作
幻灯片展示（新特性）
Circular modus循环展示（新特性）

浏览器兼容性

如何使用

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="utf-8" /> 
   <link rel="stylesheet" href="style.css" type="text/css" />
 
   <!-- This includes the ImageFlow CSS and JavaScript -->
   <link rel="stylesheet" href="imageflow.packed.css" type="text/css" />
   <script type="text/javascript" src="imageflow.packed.js"></script>
 
</head>

<body>
<h1>ImageFlow</h1>
 
		<!-- This is all the XHTML ImageFlow needs -->
<div id="myImageFlow" class="imageflow">
			<img src="img/img1.png" longdesc="img/img1.png" width="400" height="300" alt="Image 1" />
			<img src="img/img2.png" longdesc="img/img2.png" width="300" height="400" alt="Image 2" />
			<img src="img/img3.png" longdesc="img/img3.png" width="400" height="400" alt="Image 3" />
			<img src="img/img1.png" longdesc="img/img1.png" width="400" height="300" alt="Image 4" />
			<img src="img/img2.png" longdesc="img/img2.png" width="300" height="400" alt="Image 5" />
			<img src="img/img1.png" longdesc="img/img1.png" width="400" height="300" alt="Image 6" />
			<img src="img/img2.png" longdesc="img/img2.png" width="300" height="400" alt="Image 7" />
			<img src="img/img3.png" longdesc="img/img3.png" width="400" height="400" alt="Image 8" />
			<img src="img/img1.png" longdesc="img/img1.png" width="400" height="300" alt="Image 9" />
			<img src="img/img1.png" longdesc="img/img1.png" width="400" height="300" alt="Image 10" />
			<img src="img/img2.png" longdesc="img/img2.png" width="300" height="400" alt="Image 11" />
			<img src="img/img3.png" longdesc="img/img3.png" width="400" height="400" alt="Image 12" />
			<img src="img/img2.png" longdesc="img/img2.png" width="300" height="400" alt="Image 13" />
			<img src="img/img3.png" longdesc="img/img3.png" width="400" height="400" alt="Image 14" />
			<img src="img/img3.png" longdesc="img/img3.png" width="400" height="400" alt="Image 15" />
		</div>
 
</body>
</html>

ImageFlow实例

带有方向导航按钮

图片带有透明度

循环滚动，没有导航条

参考文档

ImageFlow介绍：http://finnrudolph.de/ImageFlow/Introduction
ImageFlow特性：http://finnrudolph.de/ImageFlow/Features
ImageFlow实例：http://finnrudolph.de/ImageFlow/Examples
ImageFlow文档：http://finnrudolph.de/ImageFlow/Documentation

1条评论

Pingback： Coverflow特效脚本 | ~SolagirL~

评论已关闭。