官网上的demo没有用，因为官网用的jquery是谷歌的CDN，download下来的demo也没有用，因为demo的路径下少了jquery。所以自己写demo的时候要把jquery和alloffthelights.js部署好，如果想让download下来的demo生效也是如此。另外，视频如果不生效是因为iframe的链接指向的是youtube的服务器，没翻墙的同学看不到。

用法官网上说的很明白

Step 1 - Link to resources

Add these links to your page. You could choose to have the jQuery 1.7+ file hosted on your server.

Step 2 - Add the video and the switch

Give the video iframe an CSS id or class and place the switch button anywhere you like on the page (remember, it's must match the switch_selector option).

Step 3 - Call Allofthelights.js

Call the JS function on your video frame... and there you go !

Demo

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

    <title>Demo</title>

    <style type="text/css">

        .switch{

            width: 200px;

            height: 50px;

            line-height: 50px;

            background: #ECEE03;

            text-align: center;

            color: #fff;

            margin: 10px;

            padding: 10px;

            cursor: pointer;

            font-size: 20px;

            border-radius: 5px;

            -webkit-transition: background 2s;

        }

        .switch:hover{

            background: #7AEE03;

        }

    </style>

</head>

<body>

    <div class="switch">Turn off the lights</div>

    <iframe class="video" width="50%" height="500" src="http://www.iqiyi.com/v_19rrls50i4.html#vfrm=2-3-0-1" frameborder="0" allowfullscreen=""></iframe>

    <script type="text/javascript" src="./lib/jquery-1.11.3.min.js"></script>

    <script type="text/javascript" src="./lib/alloffthelights/jquery.allofthelights.js"></script>

    <script type="text/javascript">

        $('.video').allofthelights();

    </script>

</body>

</html>

alloffthelights使用方法的更多相关文章

  1. javaSE27天复习总结

    JAVA学习总结    2 第一天    2 1:计算机概述(了解)    2 (1)计算机    2 (2)计算机硬件    2 (3)计算机软件    2 (4)软件开发(理解)    2 (5) ...

  2. mapreduce多文件输出的两方法

    mapreduce多文件输出的两方法   package duogemap;   import java.io.IOException;   import org.apache.hadoop.conf ...

  3. 【.net 深呼吸】细说CodeDom（6）：方法参数

    本文老周就给大伙伴们介绍一下方法参数代码的生成. 在开始之前,先补充一下上一篇烂文的内容.在上一篇文章中,老周检讨了 MemberAttributes 枚举的用法,老周此前误以为该枚举不能进行按位操作 ...

  4. IE6、7下html标签间存在空白符，导致渲染后占用多余空白位置的原因及解决方法

    直接上图:原因:该div包含的内容是靠后台进行print操作,输出的.如果没有输出任何内容,浏览器会默认给该空白区域添加空白符.在IE6.7下,浏览器解析渲染时,会认为空白符也是占位置的,默认其具有字 ...

  5. 多线程爬坑之路-Thread和Runable源码解析之基本方法的运用实例

    前面的文章:多线程爬坑之路-学习多线程需要来了解哪些东西?(concurrent并发包的数据结构和线程池,Locks锁,Atomic原子类) 多线程爬坑之路-Thread和Runable源码解析 前面 ...

  6. [C#] C# 基础回顾 - 匿名方法

    C# 基础回顾 - 匿名方法 目录 简介 匿名方法的参数使用范围 委托示例 简介 在 C# 2.0 之前的版本中,我们创建委托的唯一形式 -- 命名方法. 而 C# 2.0 -- 引进了匿名方法,在 ...

  7. ArcGIS 10.0紧凑型切片读写方法

    首先介绍一下ArcGIS10.0的缓存机制: 切片方案 切片方案包括缓存的比例级别.切片尺寸和切片原点.这些属性定义缓存边界的存在位置,在某些客户端中叠加缓存时匹配这些属性十分重要.图像格式和抗锯齿等 ...

  8. [BOT] 一种android中实现“圆角矩形”的方法

    内容简介 文章介绍ImageView(方法也可以应用到其它View)圆角矩形(包括圆形)的一种实现方式,四个角可以分别指定为圆角.思路是利用"Xfermode + Path"来进行 ...

  9. JS 判断数据类型的三种方法

    说到数据类型,我们先理一下JavaScript中常见的几种数据类型: 基本类型:string,number,boolean 特殊类型:undefined,null 引用类型:Object,Functi ...

随机推荐

  1. HyperLedger Fabric 学习思路分享

    HyperLedger Fabric 学习思路分享 HyperLedger Fabric最初是由Digital Asset和IBM公司贡献的.由Linux基金会主办的一个超级账本项目,它是一个目前非常 ...

  2. classpath与clsspath*

    classpath是指 WEB-INF文件夹下的classes目录 classes含义: 1.存放各种资源配置文件 eg.init.properties log4j.properties struts ...

  3. time since epoch

    C++11 提供了新的获取系统时间的库函数,在获取时间的时候一般常用的是获取time since epoch,下面来看一下如何获取这个时间. #include <iostream> #in ...

  4. Beta阶段敏捷冲刺②

    1.提供当天站立式会议照片一张. 每个人的工作 (有work item 的ID),并将其记录在码云项目管理中: 1.1昨天已完成的工作. 姓名 昨天已完成的工作 徐璐琳 完成设置界面的排版 祁泽文 实 ...

  5. jmeter 获取执行脚本的路径

    需求:向jmeter.jmx 的路径下 写日志 : import org.apache.jmeter.services.FileServer; import com.bzj.utils.*; Stri ...

  6. 4 vuex的安装

    安装可以看,引入又问题https://blog.csdn.net/u014196765/article/details/78022065?locationNum=9&fps=1(引入) htt ...

  7. Spring之AOP实现原理

  8. selenium_UI自动化——篇1（基础）

    元素定位的几种方式: (1)driver.find_element_by_id("idname") (2)driver.find_element_by_name("nam ...

  9. Fantastic Graph 2018 沈阳赛区网络预赛 F题

    题意: 二分图 有k条边,我们去选择其中的几条 每选中一条那么此条边的u 和 v的度数就+1,最后使得所有点的度数都在[l, r]这个区间内 , 这就相当于 边流入1,流出1,最后使流量平衡 解析: ...

  10. BZOJ3193 [JLOI2013]地形生成 【dp】

    题目链接 BZOJ3193 题解 注意\(key\)是小于 第一问,显然按高度降序排序,逐个插入 如果高度各不相同,那么之前插入的都比当前插入的\(i\)大,可插入的位置个数就确定了 由于存在高度相同 ...