zoukankan      html  css  js  c++  java
  • 转 原生js canvas实现苹果电脑mac OS窗口最小化效果

    http://www.17sucai.com/pins/demo-show?id=2459

    http://www.17sucai.com/pins/demo-show?id=2458   

     很多资料 ,前端代码,网站代码 要钱的也不贵,买点来玩玩,很妥 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <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>原生js canvas实现苹果电脑mac OS窗口最小化效果</title>
    
        <link href="http://www.17sucai.com/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 type="text/javascript" src="http://www.17sucai.com/static/js/jquery.min.js"></script>
        <script type="text/javascript" src="http://www.17sucai.com/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"></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 class="top2">
                    <a href="#">手机二维码预览</a>
                    <div class="vm">
                        <div id="output"></div>
                        <p style="color:#808080;margin:10px 0 0 0;">扫一扫,直接在手机上打开</p>
                    </div>
                </li>
                <li class="logoTop">
                    <a href="http://www.17sucai.com/pins/2459.html">原生js canvas实现苹果电脑mac OS窗口最小化效果</a>            <script type="text/javascript">
                    jQuery('#output').qrcode({150,height: 150,text: window.location.href});
                </script>
                <li class="remove_frame"><a href="http://www.17sucai.com/preview/7197/2013-09-27/js实现macOS窗口最小化效果1/demo.html" title="移除框架"></a></li>
            </ul>
        </div>
    </div>
    
    <div id="iframe-wrap">
        <iframe id="iframe" src="http://www.17sucai.com/preview/7197/2013-09-27/js实现macOS窗口最小化效果1/demo.html" frameborder="0"  width="100%"></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>
    View Code

  • 相关阅读:
    loopback 03
    loopback 02
    loopback 01
    node.js整理 02文件操作-常用API
    node.js整理 01代码的组织和部署
    express-21 静态内容
    coffeeScript学习02
    coffeeScript学习01
    jade学习02
    Android 读取Assets中资源
  • 原文地址:https://www.cnblogs.com/rogge7/p/10021348.html
Copyright © 2011-2022 走看看