您的位置：首页 > Web前端 > JQuery

分享一个比lightbox配置更方便的jQuery web2.0图片显示插件：Topup

2011-11-12 23:22 701 查看

日期：2011/11/12

在线演示

Topup是一个使用非常简单的javascript类库用来使用web2.0的弹出方式展示图片。这个类库基于jQuery和jQuery UI以保证跨浏览器的兼容性。提供如下特性：

主要特性：

绝对免费，甚至对于商业使用也同样免费

配置非常简单，只需要包括一个include语句，没有其它更多配置

使用Topup能保持你的HTML代码简单清晰，不需要添加多余的代码

能够显示图片，flash，电影(Quicktime, windows media和realplay),iframe, DOM元素和纯HTML

可以和prototype一起使用

能够使用Yahoo！YUI Compressor压缩到47.6KB（包括JS, HTML和CSS）

可以使用CSS sprites来减少图片请求，用来加快加载速度

支持多浏览器

非常棒的布局效果，动画和变化

自动修改大小并且定位‘

可以创建分组

支持AJAX请求

开源，你可以自己修改Topup

更多其它特性

和其它的lightbox实现相比， Topup配置更简单，不需要你配置复杂的HTML，CSS及其javascript。你只需要简单将包含一个文件，就能实现苹果类似的效果。

如何使用？

只需将topup的类库加入head标签即可，当然如果你需要下载到本地，也可以。

然后指定图片出现的方式，你可以使用样式表定义来设定，例如, top_up或者tu_ql，代码如下：

<html>
<head>
<script type="text/javascript" src="http://gettopup.com/releases/latest/top_up-min.js"></script>
</head>
<body>
<a href="photos/1.jpg" class="top_up"><img src="thumbnails/1.jpg"/></a>
<a href="photos/2.jpg" class="tu_ql"><img src="thumbnails/2.jpg"/></a>
<a href="http://www.google.com" class="tu_iframe_800x600">Open Google</a>
</body>
</html>

来源：分享一个比lightbox配置更方便的web2.0图片显示jQuery插件：Topup

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航