imageflow

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

ImageFlow特性

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

浏览器兼容性

ImageFlow浏览器兼容性

如何使用

<!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实例

带有方向导航按钮

navigation-button

图片带有透明度

图像带有透明度

循环滚动,没有导航条

循环滚动,无导航条

参考文档

1条留言

评论功能已关闭