官网上的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. 通过C#的HttpClient模拟form表单请求

    post提交表单一般无非是一般text文本和文件类型,如下 <input type="file"/> <input type="text"/& ...

  2. 记录：TensorFlow 中的 padding 方式

    TensorFlow 中卷积操作和池化操作中都有一个参数 padding,其可选值有 ['VALID', 'SAME']. 在 TensorFlow 文档中只是给出了输出张量的维度计算方式,但是并没有 ...

  3. WebGL模型拾取——射线法二

    这篇文章是对射线法raycaster的补充,上一篇文章主要讲的是raycaster射线法拾取模型的原理,而这篇文章着重讲使用射线法要注意的地方.首先我们来看下图. 我来解释一下上图中的originTr ...

  4. 审评（HelloWorld团队）

    炸弹人:我觉得炸弹人的构想很不错,很像以前玩的qq堂,不过上课时讲的不够深入,我没有找到项目的思路,项目的介绍也很粗糙,后面说的目标很大,希望你可以实现,我觉得越多的功能,就意味着越多的工作量,总的来 ...

  5. Linux 信号：signal 与 sigaction

    0.Linux下查看支持的信号列表: france@Ubuntux64:~$ kill -l ) SIGHUP ) SIGINT ) SIGQUIT ) SIGILL ) SIGTRAP ) SIGA ...

  6. 人民币-欧元预测（ARIMA算法）代码

    import pandas as pd import matplotlib.pyplot as plt import statsmodels as sm from statsmodels.graphi ...

  7. 阅读c#程序——回答问题

    c#“小”程序: using System; using System.Collections.Generic; using System.Text; namespace FindTheNumber ...

  8. IIS错误提示：另一个程序正在使用此文件 进程无法访问

    在IIS管理中,启动一个配置好的网站时,提示:另一个程序正在使用此文件 进程无法访问 原因:网站绑定端口被占用 解决办法:更换绑定端口或者将占用此端口的程序关掉即可

  9. 微信小程序简易table组件实现

    前提:微信小程序自1.6.3基础库版本库开始支持简洁组件,之前的版本因不支持,故在引用组件处默认为空节点.关于微信小程序已有模板为何还需构建组件?一是因为组件可以更方便的自定义并绑定行为,二是在其他页 ...

  10. RabbitMQ-从基础到实战（3）— 消息的交换（上）

    转载请注明出处 0.目录 RabbitMQ-从基础到实战(1)— Hello RabbitMQ RabbitMQ-从基础到实战(2)— 防止消息丢失 RabbitMQ-从基础到实战(4)— 消息的交换 ...