官网上的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# List left join

    public class Test1 { public int ID { get; set; } public string Name { get; set; } } public class Tes ...

  2. Unity XLua 官方教程学习

    一.Lua 文件加载 1. 执行字符串 using UnityEngine; using XLua; public class ByString : MonoBehaviour { LuaEnv lu ...

  3. codeforces 1141G Privatization of Roads in Treeland

    题目链接:http://codeforces.com/contest/1141/problem/G 题目大意: 给你一个无向连通图.每条边都有颜色,如果存在一个点的临边中有超过两条边颜色相同,这个点就 ...

  4. PHPMyWind5.4存储XSS后续getshell提权

    0x0 前言 通过留言处的xss,我们可以得到管理员的cookie,进而登陆后台: https://www.cnblogs.com/Rain99-/p/10701769.html 现在要从后台入手,进 ...

  5. React Router学习

    React Router教程 本教程引用马伦老师的的教程 React项目的可用的路由库是React-Router,当然这也是官方支持的.它也分为: react-router 核心组件 react-ro ...

  6. 一个java实现的简单的4则运算器

    有些基础知识有欠缺,补一下,顺便练习一下java import com.sun.deploy.util.ArrayUtil; import java.util.*; public class Main ...

  7. Mininet入门与实战 3.9参课记录

    Mininet入门与实战 Mininet简介 由来:斯坦福大学发明,基于Linux Container架构开发的进程虚拟化网络仿真工具,交换机支持OF协议. 使用情况: 控制器,不推荐自带控制器(bu ...

  8. 安装visual studio过程

    昨天上了一天课 ,晚上回到寝室就开始装visual studio这个软件,由于室友有安装包,免去了下载软件的时间,下面是装载软件的步骤: 点击安装,就可以了,安装完显示文件包失败,还以为是哪里弄错了, ...

  9. mosquitto集群配置

    --------------------------------------------------------前言------------------------------------------ ...

  10. mysql & java & spring transaction isolation level

    mysql /*SESSION LEVEL*/ select @@tx_isolation; /*GLOBAL LEVEL*/ select @@global.tx_isolation; select ...