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>
  • 相关阅读:
    TOJ1017: Tour Guide
    tzcacm去年训练的好题的AC代码及题解
    Educational Codeforces Round 40 (Rated for Div. 2)
    AtCoder Regular Contest 092
    浙南联合训练赛20180318
    [Offer收割]编程练习赛50
    牛客练习赛13
    AtCoder Regular Contest 091
    Codeforces Round #470 (rated, Div. 2, based on VK Cup 2018 Round 1)
    csa Round #73 (Div. 2 only)
  • 原文地址:https://www.cnblogs.com/zcynine/p/5565649.html
Copyright © 2011-2022 走看看