zoukankan      html  css  js  c++  java
  • jQuery Lightbox效果插件Boxer

    演示:http://www.jq22.com/yanshi1139

    下载:链接: https://pan.baidu.com/s/1o8zaV2q 密码: 2ccy

    Boxer 是一款基于 jQuery 的 Lightbox 效果插件,可用于显示图片、视频、iframe和其他内容,和其他Lightbox 效果插件一样,Boxer 在显示组图的时候,有左右箭头控制。Boxer 还能自动检测设备是否为移动设备,针对移动设备显示更适合的样式和更友好的触摸控制。

    兼容性

    浏览器兼容:simpleGal 兼容所有浏览器,包括 IE6。

    jQuery 版本兼容:simpleGal 兼容 1.7 以上版本。

     

     

    使用方法

    以下介绍最基本的用法,更多用法请查看参数或演示。

    1、引入文件

    <link rel="stylesheet" href="css/jquery.fs.boxer.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.fs.boxer.js"></script>

    2、HTML

    <a title="标题闪电闪电" href="images/1b.jpg">
        <img src="http://www.dowebok.com/images/1s.jpg" alt="">
    </a>

    标签 a 的属性 title 用于显示图片的标题。

    3、JavaScript

    $('.boxer').boxer();

    参数

    参数类型默认值说明
    callback function 打开后的回调函数
    customClass string 增加自定义 class
    duration int 250 动画持续时间
    fixed boolean false 是否固定在浏览器中央(不显示关滚动条)
    formatter function 标题格式函数
    height int 100 加载时的初始高度
    labels.close string ‘Close’ 关闭按钮的文字
    labels.count string ‘of’ 组图的文字
    labels.next string ‘Next’ 下一个按钮的文字
    labels.previous string ‘Previous’ 上一个按钮的文字
    margin int 50 与浏览器视口的边距
    minHeight int 100 最小高度
    minWidth int 100 最小宽度
    mobile boolean false 是否强制使用移动模式显示
    opacity number 0.75 遮罩不透明度
    retina boolean false 是否兼容 retina 高清显示
    requestKey string ‘boxer’ GET variable for ajax / iframe requests
    top int   距离顶部位置
    videoRadio number 0.5625 视频的高度
    videoWidth int 600 视频的宽度
    width int 100 加载时的初始宽度

  • 相关阅读:
    docker学习笔记1-- 用Toolbox安装Docker--介绍Docker Machine
    IDEA中文出现乱码解决
    hadoop本地运行与集群运行
    关于IDEA导出项目jar包/runnable jar
    IDEA 添加jar包的三种方式(重点:new uer Libraries)
    windows下客户端开发hdf--环境搭建
    junit在idea中的使用(1)--理论篇
    word的"bug"
    第4章 控制执行流程
    第3章 操作符
  • 原文地址:https://www.cnblogs.com/agen-su/p/7793258.html
Copyright © 2011-2022 走看看