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>
  • 相关阅读:
    题解CF566D Restructuring Company
    题解CF986F Oppa Funcan Style Remastered
    题解P2371 [国家集训队]墨墨的等式
    题解 CF1203D2 Remove the Substring (hard version)
    题解 CF1202D Print a 1337-string...
    ubuntu apt-get install php
    jwt refresh token
    读过的laravel文章
    delete all untracked files
    自定义UserProvider,更改验证方法
  • 原文地址:https://www.cnblogs.com/zcynine/p/5565649.html
Copyright © 2011-2022 走看看