zoukankan      html  css  js  c++  java
  • 分享一个比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

  • 相关阅读:
    使用webpack + momentjs
    关于vue3的proxy代理的简单实现
    电脑网卡重置
    Cookie加密处理
    浅谈 JS 防抖和节流
    WebSocket 与 Socket.IO
    React中useState,useEffect的使用
    react中Context的使用
    React中匿名插槽与具名插槽的使用
    React中PureComponent的使用
  • 原文地址:https://www.cnblogs.com/gbin1/p/2246882.html
Copyright © 2011-2022 走看看