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

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

 很多资料 ，前端代码，网站代码 要钱的也不贵，买点来玩玩，很妥 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <title>原生js canvas实现苹果电脑mac OS窗口最小化效果</title>
  8.  
  9.     <link href="http://www.17sucai.com/static/css/demo.css" rel="stylesheet" media="all" />
  10.  
  11.     <!--[if IE]>
  12.  
  13.     <style type="text/css">
  14.         li.remove_frame a {
  15.             padding-top: 5px;
  16.             background-position: 0px -3px;
  17.         }
  18.     </style>
  19.  
  20.     <![endif]-->
  21.  
  22.     <script type="text/javascript" src="http://www.17sucai.com/static/js/jquery.min.js"></script>
  23.     <script type="text/javascript" src="http://www.17sucai.com/static/js/jquery.qrcode.min.js"></script>
  24.     <script type="text/javascript">
  25.         $(document).ready(function () {
  26.             function fixHeight() {
  27.                 var headerHeight = $("#switcher").height();
  28.                 $("#iframe").attr("height", $(window).height()-54+ "px");
  29.             }
  30.             $(window).resize(function () {
  31.                 fixHeight();
  32.             }).resize();
  33.  
  34.             $('.icon-monitor').addClass('active');
  35.  
  36.             $(".icon-mobile-3").click(function () {
  37.                 $("#by").css("overflow-y", "auto");
  38.                 $('#iframe-wrap').removeClass().addClass('mobile-width-3');
  39.                 $('.icon-tablet,.icon-mobile-1,.icon-monitor,.icon-mobile-2,.icon-mobile-3').removeClass('active');
  40.                 $(this).addClass('active');
  41.                 return false;
  42.             });
  43.  
  44.             $(".icon-mobile-2").click(function () {
  45.                 $("#by").css("overflow-y", "auto");
  46.                 $('#iframe-wrap').removeClass().addClass('mobile-width-2');
  47.                 $('.icon-tablet,.icon-mobile-1,.icon-monitor,.icon-mobile-2,.icon-mobile-3').removeClass('active');
  48.                 $(this).addClass('active');
  49.                 return false;
  50.             });
  51.  
  52.             $(".icon-mobile-1").click(function () {
  53.                 $("#by").css("overflow-y", "auto");
  54.                 $('#iframe-wrap').removeClass().addClass('mobile-width');
  55.                 $('.icon-tablet,.icon-mobile,.icon-monitor,.icon-mobile-2,.icon-mobile-3').removeClass('active');
  56.                 $(this).addClass('active');
  57.                 return false;
  58.             });
  59.  
  60.             $(".icon-tablet").click(function () {
  61.                 $("#by").css("overflow-y", "auto");
  62.                 $('#iframe-wrap').removeClass().addClass('tablet-width');
  63.                 $('.icon-tablet,.icon-mobile-1,.icon-monitor,.icon-mobile-2,.icon-mobile-3').removeClass('active');
  64.                 $(this).addClass('active');
  65.                 return false;
  66.             });
  67.  
  68.             $(".icon-monitor").click(function () {
  69.                 $("#by").css("overflow-y", "hidden");
  70.                 $('#iframe-wrap').removeClass().addClass('full-width');
  71.                 $('.icon-tablet,.icon-mobile-1,.icon-monitor,.icon-mobile-2,.icon-mobile-3').removeClass('active');
  72.                 $(this).addClass('active');
  73.                 return false;
  74.             });
  75.         });
  76.     </script>
  77.  
  78.     <script type="text/javascript">
  79.     function Responsive($a) {
  80.         if ($a == true) $("#Device").css("opacity", "100");
  81.         if ($a == false) $("#Device").css("opacity", "0");
  82.         $('#iframe-wrap').removeClass().addClass('full-width');
  83.         $('.icon-tablet,.icon-mobile-1,.icon-monitor,.icon-mobile-2,.icon-mobile-3').removeClass('active');
  84.         $(this).addClass('active');
  85.         return false;
  86.     };
  87.     </script>
  88.  
  89. </head>
  90. <body id="by">
  91.  
  92. <div id="switcher">
  93.     <div class="center">
  94.         <ul>
  95.             <div id="Device">
  96.                 <li class="device-monitor"><a href="javascript:"><div class="icon-monitor"></div></a></li>
  97.                 <li class="device-mobile"><a href="javascript:"><div class="icon-tablet"></div></a></li>
  98.                 <li class="device-mobile"><a href="javascript:"><div class="icon-mobile-1"></div></a></li>
  99.                 <li class="device-mobile-2"><a href="javascript:"><div class="icon-mobile-2"></div></a></li>
  100.                 <li class="device-mobile-3"><a href="javascript:"><div class="icon-mobile-3"></div></a></li>
  101.             </div>
  102.             <li class="top2">
  103.                 <a href="#">手机二维码预览</a>
  104.                 <div class="vm">
  105.                     <div id="output"></div>
  106.                     <p style="color:#808080;margin:10px 0 0 0;">扫一扫，直接在手机上打开</p>
  107.                 </div>
  108.             </li>
  109.             <li class="logoTop">
  110.                 <a href="http://www.17sucai.com/pins/2459.html">原生js canvas实现苹果电脑mac OS窗口最小化效果</a>            <script type="text/javascript">
  111.                 jQuery('#output').qrcode({width:150,height: 150,text: window.location.href});
  112.             </script>
  113.             <li class="remove_frame"><a href="http://www.17sucai.com/preview/7197/2013-09-27/js实现macOS窗口最小化效果1/demo.html" title="移除框架"></a></li>
  114.         </ul>
  115.     </div>
  116. </div>
  117.  
  118. <div id="iframe-wrap">
  119.     <iframe id="iframe" src="http://www.17sucai.com/preview/7197/2013-09-27/js实现macOS窗口最小化效果1/demo.html" frameborder="0"  width="100%"></iframe>
  120. </div>
  121.  
  122. <!--百度流量统计代码-->
  123. <script>
  124.     var _hmt = _hmt || [];
  125.     (function() {
  126.         var hm = document.createElement("script");
  127.         hm.src = "https://hm.baidu.com/hm.js?382f81c966395258f239157654081890";
  128.         var s = document.getElementsByTagName("script")[0];
  129.         s.parentNode.insertBefore(hm, s);
  130.     })();
  131. </script>
  132.  
  133. </body>
  134. </html>

转 原生js canvas实现苹果电脑mac OS窗口最小化效果的更多相关文章

  1. 苹果电脑Mac OS系统重装图文详解

    苹果电脑Mac OS系统重装图文详解 本文来自于[系统之家] www.xp85.com现在电脑都很强大,可是也很脆弱,常常需要你去维护,甚至经常需要你重装系统,那么Mac OS又如何重装系统呢?刚刚使 ...

  2. Mac技巧之苹果电脑Mac OS X系统自带的鼠标所在点颜色RGB值查看工具：数码测色计

    转自http://www.mac52ipod.cn/post/show-mouse-point-rgb-color-by-apple-mac-os-x-tool.php

  3. 完美解决苹果电脑mac终端无法输入大写T的问题

    [本文出自天外归云的博客园] 最近突然发现我的苹果电脑mac终端无法输入大写字母T,今天终于在同事的帮助下解决了!之前在网上查解决方法,感觉步骤描述欠佳!今天记录一下这个踩坑经验: 完美解决! 首先打 ...

  4. 实现支持在Mac OS的最小大化的过渡效果

    实现支持在Mac OS的最小大化的过渡效果,该源码是刚刚在源码天堂那个网站上转载过来的,个人感觉还不错的,大家可以学习一下吧. 源码下载:http://code.662p.com/view/2250. ...

  5. 原生JS+Canvas实现五子棋游戏

    一.功能模块 先看下现在做完的效果: 线上体验:https://wj704.github.io/five_game.html 主要功能模块为: 1.人机对战功能 2.悔棋功能 3.撤销悔棋功能 二.代 ...

  6. 回顾苹果操作系统Mac OS的发展历史

    在新的MacBook AIR和Mac OS X Lion即将发布之际,我们仅以此文向伟大的苹果和乔布斯致敬.并祝Apple教主乔布斯早日康复,长命百岁,千秋万载,一统苹果! Mac OS是指运行于苹果 ...

  7. 苹果操作系统Mac OS X

    OS X 是先进的操作系统.基于坚如磐石的 UNIX 基础,设计简单直观,让处处创新的 Mac 安全易用,高度兼容,出类拔萃. UNIX 之威力,Mac 之简单OS X 既简单易用且功能强大.所有的一 ...

  8. [No0000E2]Vmware虚拟机安装 苹果系统 mac OS 10.12

    1.下载并安装Vmware:实验版本号:VMware-workstation-full-12.5.5-5234757:(忽略网上说的这个版本不行.可以装C盘,不过转C盘后后面都要用管理员权限运行其他软 ...

  9. 苹果全新 Mac OS X 系统开放下载

    在今天的发布会上,苹果除了发布多款硬件产品之外,还更新了Mac OS X Mavericks(小牛)系统,作为重大改变,这一Mac系统将从今天起开始免费升级. 升级后的Mavericks系统将进一步与 ...

随机推荐

  1. css 3 新特性

    CSS3的新特性大致分为以下六类 1.CSS3选择器 2.CSS3边框与圆角 3.CSS3背景与渐变 4.CSS3过渡 5.CSS3变换 6.CSS3动画 下面分别说一说以上六类都有哪些内容 CSS3 ...

  2. SpringBoot+AOP整合

    SpringBoot+AOP整合 https://blog.csdn.net/lmb55/article/details/82470388 https://www.cnblogs.com/onlyma ...

  3. Quill 富文本编辑器

    Quill 富文本编辑器 https://quilljs.com/ https://github.com/quilljs/quill https://github.com/quilljs/awesom ...

  4. CSS绝对定位元素居中的几种方法

    转载自-CSS居中绝对https://www.cnblogs.com/skura23/p/6530556.html 作者:PajamaCat 1,div宽度未知1 <body> <d ...

  5. 基于Vue cli生成的Vue项目的webpack4升级

    前面的话 本文将详细介绍从webpack3到webpack4的升级过程 概述 相比于webpack3,webpack4可以零配置运行,打包速度比之前提高了90%,可以直接到ES6的代码进行无用代码剔除 ...

  6. 标准3层神经网络搭建Demo

    上面我们说了神经网络的基础知识,根据上章的基础尝试搭建一个标准的3层神经网络,参考https://www.cnblogs.com/bestExpert/p/9128645.html 1.框架代码 1. ...

  7. iOS NSInteger 的输出 %d %ld %zd %ld （long）

    NSInteger 输出类型 %zd

  8. 【Linux】CentOS7下安装JDK详细过程

    https://www.cnblogs.com/sxdcgaq8080/p/7492426.html

  9. Flask 构建微电影视频网站(八)

    评论收藏及弹幕 实现电影评论添加及列表.数据查询实现统计播放量和评论量.jquery ajax实现收藏电影,flask结合redis消息队列实现电影弹幕,bug处理等功能. 电影评论-统计 class ...

  10. 题解 P4783 【【模板】矩阵求逆】

    题目大意 求一个N×N的矩阵的逆矩阵.答案对10^9+7取模.N<=400 前置知识 矩阵的初等变换 矩阵的逆定义为 A*B=E(E为单位矩阵)此时B为A的逆 思路 如果矩阵有逆 那么这个矩阵经 ...