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


    日期:2011/11/12 

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

    在线演示

    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配置更方便的web2.0图片显示jQuery插件: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

  • 相关阅读:
    Balanced Binary Tree
    Swap Nodes in Pairs
    Reverse Nodes in k-Group
    Reverse Linked List II
    Remove Nth Node From End of List
    Remove Duplicates from Sorted List II
    Remove Duplicates from Sorted List
    Partition List
    Merge Two Sorted Lists
    【Yii2.0】1.2 Apache检查配置文件语法
  • 原文地址:https://www.cnblogs.com/gbin1/p/2246882.html
Copyright © 2020-2023  润新知