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>

 

posted @ 2016-06-07 00:34  zcynine  阅读(245)  评论(0)  编辑  收藏  举报