alloffthelights使用方法
官网上的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使用方法的更多相关文章
- javaSE27天复习总结
JAVA学习总结 2 第一天 2 1:计算机概述(了解) 2 (1)计算机 2 (2)计算机硬件 2 (3)计算机软件 2 (4)软件开发(理解) 2 (5) ...
- mapreduce多文件输出的两方法
mapreduce多文件输出的两方法 package duogemap; import java.io.IOException; import org.apache.hadoop.conf ...
- 【.net 深呼吸】细说CodeDom(6):方法参数
本文老周就给大伙伴们介绍一下方法参数代码的生成. 在开始之前,先补充一下上一篇烂文的内容.在上一篇文章中,老周检讨了 MemberAttributes 枚举的用法,老周此前误以为该枚举不能进行按位操作 ...
- IE6、7下html标签间存在空白符,导致渲染后占用多余空白位置的原因及解决方法
直接上图:原因:该div包含的内容是靠后台进行print操作,输出的.如果没有输出任何内容,浏览器会默认给该空白区域添加空白符.在IE6.7下,浏览器解析渲染时,会认为空白符也是占位置的,默认其具有字 ...
- 多线程爬坑之路-Thread和Runable源码解析之基本方法的运用实例
前面的文章:多线程爬坑之路-学习多线程需要来了解哪些东西?(concurrent并发包的数据结构和线程池,Locks锁,Atomic原子类) 多线程爬坑之路-Thread和Runable源码解析 前面 ...
- [C#] C# 基础回顾 - 匿名方法
C# 基础回顾 - 匿名方法 目录 简介 匿名方法的参数使用范围 委托示例 简介 在 C# 2.0 之前的版本中,我们创建委托的唯一形式 -- 命名方法. 而 C# 2.0 -- 引进了匿名方法,在 ...
- ArcGIS 10.0紧凑型切片读写方法
首先介绍一下ArcGIS10.0的缓存机制: 切片方案 切片方案包括缓存的比例级别.切片尺寸和切片原点.这些属性定义缓存边界的存在位置,在某些客户端中叠加缓存时匹配这些属性十分重要.图像格式和抗锯齿等 ...
- [BOT] 一种android中实现“圆角矩形”的方法
内容简介 文章介绍ImageView(方法也可以应用到其它View)圆角矩形(包括圆形)的一种实现方式,四个角可以分别指定为圆角.思路是利用"Xfermode + Path"来进行 ...
- JS 判断数据类型的三种方法
说到数据类型,我们先理一下JavaScript中常见的几种数据类型: 基本类型:string,number,boolean 特殊类型:undefined,null 引用类型:Object,Functi ...
随机推荐
- docker之搭建LNMP
一.部署mysql [root@node03 web]# docker run -itd --name lnmp_mysql -p 3308:3306 -e MYSQL_ROOT_PASSWORD=1 ...
- SpringBoot入门学习记录(一)
最近,SpringBoot.SpringCloud.Dubbo等框架非常流行,作为Coder里的一名小学生,借着改革开放的东风,自然也是需要学习学习的,于是将学习经历记录于此,以备日后查看. 官网:h ...
- Go语言简单学习
GO 支持goroutine 和通道,并且推荐使用消息而不是共享内存来进行并发编程,总体来说,Go语言是一个非常现代化的语言,精小但非常强大 Go语言的主要特性: 1.自动垃圾回收 2.更丰富的内置类 ...
- 7. Reverse Integer【Leetcode by java】
Given a 32-bit signed integer, reverse digits of an integer. Example 1: Input: 123 Output: 321 Examp ...
- VC++代码上传到VSS上 注意事项
1.删除Debug文件,删除Release 文件2.删掉ncb,opt,clw,aps文件注.opt 工程关于开发环境的参数文件.ncb 无编译浏览文件(no compile browser).当自动 ...
- 【Beta阶段】第一次Scrum Meeting!
本次会议为第一次Scrum Meeting会议~ 会议时长:20分 会议地点:依旧是7公寓1楼会客室 昨日任务一览 明日任务一览 刘乾 预定任务:(未完成)#128 学习如何在Github上自动构 ...
- 查询过的问题关于HTML的问题
一.Bootstrap字体图标(Glyphicons) http://www.runoob.com/bootstrap/bootstrap-glyphicons.html 二.Jquery 实现 “下 ...
- Python 四种数值类型(int,long,float,complex)区别及转换
Python支持四种不同的数值类型,包括int(整数)long(长整数)float(浮点实际值)complex (复数), 数字数据类型存储数值.他们是不可改变的数据类型,这意味着改变数字数据类型的结 ...
- freopen stdout 真的更快?
freopen stdout 真的更快? 在一次数独作业中,我发现大部分同学提交的代码中都使用 freopen 来将 stdout 重新指向目标文件进行文件输出操作.我感到十分好奇,关于 freope ...
- 使用phantomjs进行无界面UI自动化测试
PhantomJS(http://phantomjs.org/) 是一个基于WebKit的服务器端JavaScript API.它全面支持web而不需浏览器支持,其快速.原生支持各种Web标准:DOM ...