zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    Enumerable类
    富客户端
    Entity Framework
    使用C库函数写文件出错
    VC 打开目录 打开上次打开目录
    boost_1_45_0安装
    boost中bimap双向映射的初级学习
    VS2008安装失败
    最近使用文档, 最近保存文档, 最近运行记录
    IE升级为8.0后, VS2008出现Internet Explorer脚本错误对话框
  • 原文地址:https://www.cnblogs.com/zcynine/p/5565649.html
Copyright © 2011-2022 走看看