可视化音频特效-炫酷!

  <!DOCTYPE html>
    <html>
    	<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>html5 canvas酷炫的可视化音频动画特效</title>
    
        <link href="/static/css/demo.css" rel="stylesheet" media="all">
    
        <!--[if IE]>
    
        <style type="text/css">
            li.remove_frame a {
                padding-top: 5px;
                background-position: 0px -3px;
            }
        </style>
    
        <![endif]-->
    
        <script src="https://hm.baidu.com/hm.js?382f81c966395258f239157654081890"></script><script type="text/javascript" src="/static/js/jquery.min.js"></script>
        <script type="text/javascript" src="/static/js/jquery.qrcode.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                function fixHeight() {
                    var headerHeight = $("#switcher").height();
                    $("#iframe").attr("height", $(window).height()-54+ "px");
                }
                $(window).resize(function () {
                    fixHeight();
                }).resize();
    
                $('.icon-monitor').addClass('active');
    
                $(".icon-mobile-3").click(function () {
                    $("#by").css("overflow-y", "auto");
                    $('#iframe-wrap').removeClass().addClass('mobile-width-3');
                    $('.icon-tablet,.icon-mobile-1,.icon-monitor,.icon-mobile-2,.icon-mobile-3').removeClass('active');
                    $(this).addClass('active');
                    return false;
                });
    
                $(".icon-mobile-2").click(function () {
                    $("#by").css("overflow-y", "auto");
                    $('#iframe-wrap').removeClass().addClass('mobile-width-2');
                    $('.icon-tablet,.icon-mobile-1,.icon-monitor,.icon-mobile-2,.icon-mobile-3').removeClass('active');
                    $(this).addClass('active');
                    return false;
                });
    
                $(".icon-mobile-1").click(function () {
                    $("#by").css("overflow-y", "auto");
                    $('#iframe-wrap').removeClass().addClass('mobile-width');
                    $('.icon-tablet,.icon-mobile,.icon-monitor,.icon-mobile-2,.icon-mobile-3').removeClass('active');
                    $(this).addClass('active');
                    return false;
                });
    
                $(".icon-tablet").click(function () {
                    $("#by").css("overflow-y", "auto");
                    $('#iframe-wrap').removeClass().addClass('tablet-width');
                    $('.icon-tablet,.icon-mobile-1,.icon-monitor,.icon-mobile-2,.icon-mobile-3').removeClass('active');
                    $(this).addClass('active');
                    return false;
                });
    
                $(".icon-monitor").click(function () {
                    $("#by").css("overflow-y", "hidden");
                    $('#iframe-wrap').removeClass().addClass('full-width');
                    $('.icon-tablet,.icon-mobile-1,.icon-monitor,.icon-mobile-2,.icon-mobile-3').removeClass('active');
                    $(this).addClass('active');
                    return false;
                });
            });
        </script>
    
        <script type="text/javascript">
    	function Responsive($a) {
    		if ($a == true) $("#Device").css("opacity", "100");
    		if ($a == false) $("#Device").css("opacity", "0");
    		$('#iframe-wrap').removeClass().addClass('full-width');
    		$('.icon-tablet,.icon-mobile-1,.icon-monitor,.icon-mobile-2,.icon-mobile-3').removeClass('active');
    		$(this).addClass('active');
    		return false;
    	};
        </script>
    	
    </head>
    	<body id="by">
    
    <div id="switcher">
        <div class="center">
            <ul>
                <div id="Device">
                    <li class="device-monitor"><a href="javascript:"><div class="icon-monitor active"></div></a></li>
                    <li class="device-mobile"><a href="javascript:"><div class="icon-tablet"></div></a></li>
                    <li class="device-mobile"><a href="javascript:"><div class="icon-mobile-1"></div></a></li>
                    <li class="device-mobile-2"><a href="javascript:"><div class="icon-mobile-2"></div></a></li>
                    <li class="device-mobile-3"><a href="javascript:"><div class="icon-mobile-3"></div></a></li>
                </div>
                
                    
                </li>
               
            </ul>
        </div>
    </div>
    
    <div id="iframe-wrap">
        <iframe id="iframe" src="http://www.17sucai.com/preview/1266961/2018-07-06/music/index.html" frameborder="0" width="100%" height="577px"></iframe>
    </div>
    
    <!--百度流量统计代码-->
    <script>
        var _hmt = _hmt || [];
        (function() {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?382f81c966395258f239157654081890";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>
    
    
    
    </body>
    </html>

你可能感兴趣的:(练习,JS,前端)