官网上的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. 【原】python3.7 无法pip安装提示ssl错误解决方案

    问题 pip is configured with locations that require TLS/SSL, however the ssl module in Python is not av ...

  2. PAT甲题题解-1122. Hamiltonian Cycle (25)-判断路径是否是哈密顿回路

    博主欢迎转载,但请给出本文链接,我尊重你,你尊重我,谢谢~http://www.cnblogs.com/chenxiwenruo/p/6789799.html特别不喜欢那些随便转载别人的原创文章又不给 ...

  3. Daily Scrumming* 2015.12.10 今天集体请假一天

    今天由于所有成员均在进行编译原理实验的相关工作,全体请假一天.......

  4. 《Linux内核设计与实现》第四章学习笔记——进程调度

                                                                        <Linux内核设计与实现>第四章学习笔记——进程调 ...

  5. 小学四则运算APP 第一阶段冲刺 第二天-补

    团队成员:陈淑筠.杨家安.陈曦 团队选题:小学四则运算APP 第一次冲刺阶段时间:11.17~11.27 本次发布已经解决上次问题,问题是写程序逻辑错误,问题已经修改!我们还增加两个模块的面板设置,如 ...

  6. C++的OOP特性

    内存模型和名称空间 存储持续性,作用域和链接性 C++有三种方案来存储数据 自动存储持续性:在函数定义中声明的变量,包括函数参数.在函数或代码块开始执行时创建.执行完函数或者代码块,内存自动释放. 静 ...

  7. KindEditor：Ajax提交表单时获取不到HTML内容

    当用Ajax提交表单时,KindEditor的内容获取不到,HTML数据获取不了 原因:当ajax提交时,KindEdito的HTML数据还没有同步到表单中来,那怎么去获取HTML数据呢? ----- ...

  8. ElasticSearch 2 (4) - API Convention

    ElasticSearch 2.1.1 (4) - API Convention The elasticsearch REST APIs are exposed using JSON over HTT ...

  9. 2-Python3从入门到实战—基础之运算符

    Python从入门到实战系列--目录 Python语言支持以下类型的运算符: 算术运算符 比较(关系)运算符 赋值运算符 逻辑运算符 位运算符 成员运算符 身份运算符 运算符优先级 算术运算符 Pyt ...

  10. php学习部分总结

    php Apache 阿帕奇PHP 解释器MySQL 数据库 php php文件后缀就是.php 比如1.php 2.phpphp代码 要写在<?php echo "assss&quo ...