alloffthelights使用方法
Posted zcynine
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了alloffthelights使用方法相关的知识，希望对你有一定的参考价值。
官网上的demo没有用，因为官网用的jquery是谷歌的CDN，download下来的demo也没有用，因为demo的路径下少了jquery。所以自己写demo的时候要把jquery和alloffthelights.js部署好，如果想让download下来的demo生效也是如此。另外，视频如果不生效是因为iframe的链接指向的是youtube的服务器，没FQ的同学看不到。
用法官网上说的很明白
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使用方法的主要内容，如果未能解决你的问题，请参考以下文章