修改css界面
|
|
@ -75,9 +75,7 @@ body {
|
|||
height: 30px;
|
||||
line-height:30px;
|
||||
/* IE9+ */
|
||||
background-color: rgba(255,255,255,0.4);
|
||||
/* IE6-IE8 */
|
||||
filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#68FFFFFF,endColorStr=#68FFFFFF);
|
||||
background:rgba(255,255,255,0.5);
|
||||
z-index: 19930813;
|
||||
}
|
||||
|
||||
|
|
@ -133,8 +131,8 @@ body {
|
|||
float: left;
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
text-align: left;
|
||||
|
|
@ -202,24 +200,24 @@ body {
|
|||
top:-70%;
|
||||
}
|
||||
|
||||
#win10-menu .blocks::-webkit-scrollbar,.list::-webkit-scrollbar,#win10_command_center::-webkit-scrollbar {
|
||||
#win10-menu .list::-webkit-scrollbar,#win10_command_center::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
#win10-menu .blocks::-webkit-scrollbar-track,.list::-webkit-scrollbar-track,#win10_command_center::-webkit-scrollbar-track {
|
||||
#win10-menu .list::-webkit-scrollbar-track,#win10_command_center::-webkit-scrollbar-track {
|
||||
background-color: rgba(74, 84, 78, 0.41);
|
||||
}
|
||||
|
||||
#win10-menu .blocks::-webkit-scrollbar-thumb,.list::-webkit-scrollbar-thumb,#win10_command_center::-webkit-scrollbar-thumb {
|
||||
#win10-menu .list::-webkit-scrollbar-thumb,#win10_command_center::-webkit-scrollbar-thumb {
|
||||
background-color: #6a6a6a;
|
||||
}
|
||||
|
||||
#win10-menu .blocks::-webkit-scrollbar-button ,.list::-webkit-scrollbar-button ,#win10_command_center::-webkit-scrollbar-button {
|
||||
#win10-menu .list::-webkit-scrollbar-button ,#win10_command_center::-webkit-scrollbar-button {
|
||||
/*background-color: #6a6a6a;*/
|
||||
}
|
||||
|
||||
#win10-menu .list,.blocks{
|
||||
#win10-menu .list{
|
||||
float: left;
|
||||
width: 180px;
|
||||
height:100%;
|
||||
|
|
@ -283,10 +281,6 @@ body {
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
#win10-menu .blocks{
|
||||
max-width: 650px;
|
||||
width:calc(100% - 260px);
|
||||
}
|
||||
|
||||
#win10-menu-switcher{
|
||||
position: absolute;
|
||||
|
|
@ -327,6 +321,9 @@ body {
|
|||
color: grey;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
#win10 #win10-shortcuts {
|
||||
height: calc(100% - 40px);
|
||||
position: relative;
|
||||
|
|
@ -517,9 +514,9 @@ body {
|
|||
|
||||
#win10_btn_group_middle .btn.active{
|
||||
/* background: #F6F6F6; */
|
||||
-webkit-box-shadow: 0 0 30px 2px rgba(0, 0, 0, 0.8);
|
||||
-moz-box-shadow: 0 0 30px 2px rgba(0, 0, 0, 0.8);
|
||||
box-shadow: 0 0 30px 2px rgba(0, 0, 0, 0.8);
|
||||
-webkit-box-shadow: 1px 0 1px 1px rgba(0, 0, 0, 0.8);
|
||||
-moz-box-shadow: 1px 0 1px 1px rgba(0, 0, 0, 0.8);
|
||||
box-shadow: 1px 0 1px 1px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
#win10_btn_group_middle .btn:hover{
|
||||
|
|
@ -546,7 +543,7 @@ body {
|
|||
|
||||
.win10-open-iframe .layui-layer-title{
|
||||
box-sizing: border-box;
|
||||
background-color: #F6F6F6;
|
||||
background: rgba(250, 250, 250, 0.9);
|
||||
padding-right: 160px;
|
||||
border-radius:4px 4px 0px 0px;
|
||||
color: #333;
|
||||
|
|
@ -760,53 +757,34 @@ body {
|
|||
height: calc(100% - 40px);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
top: 40px;
|
||||
z-index: 0;
|
||||
background-color: transparent;
|
||||
}
|
||||
/*--------------尾部--------------------*/
|
||||
|
||||
.dock {
|
||||
width: 100%;
|
||||
bottom: 0px;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
height: 65px;
|
||||
text-align: center;
|
||||
z-index:1000;
|
||||
#footer{
|
||||
height: 60px;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
text-align: center;
|
||||
}
|
||||
.dock-container {
|
||||
position: absolute;
|
||||
height: 60px;
|
||||
border-radius: 5px;
|
||||
|
||||
#footer .dock{
|
||||
/*width: 72%; */
|
||||
height: 100%;
|
||||
line-height: 60px;
|
||||
display: inline-block;
|
||||
border-radius: 5px 5px 0 0;
|
||||
background-color: rgba(255,255,255,0.45) ;/* IE9、标准浏览器、IE6和部分IE7内核的浏览器(如QQ浏览器)会读懂 */
|
||||
padding:0 20px;
|
||||
-webkit-box-shadow: 0 0 50px 0 rgba(0, 0, 0, 0.8);
|
||||
-moz-box-shadow: 0 0 50px 0 rgba(0, 0, 0, 0.8);
|
||||
box-shadow: 0 0 50px 0 rgba(0, 0, 0, 0.8);
|
||||
-webkit-border-top-left-radius: 5px 5px 0 0;
|
||||
-webkit-border-top-right-radius: 5px 5px 0 0;
|
||||
}
|
||||
|
||||
.dock a.dock-item {
|
||||
display: block;
|
||||
font: bold 12px Arial, Helvetica, sans-serif;
|
||||
width: 60px;
|
||||
color: #fff;
|
||||
bottom: 0px;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
}
|
||||
.dock-item span {
|
||||
display: none;
|
||||
padding:3px 0px;
|
||||
border-radius: 5px;
|
||||
background-color: rgba(0,0,0,0.45);
|
||||
}
|
||||
.dock-item img {
|
||||
border: none;
|
||||
margin: 5px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media \0screen\,screen\9 {/* 只支持IE6、7、8 */
|
||||
.dock{
|
||||
#footer .dock{
|
||||
/*width: 72%; */
|
||||
height: 100%;
|
||||
line-height: 60px;
|
||||
|
|
@ -817,11 +795,51 @@ body {
|
|||
position:static; /* IE6、7、8只能设置position:static(默认属性) ，否则会导致子元素继承Alpha值 */
|
||||
*zoom:1; /* 激活IE6、7的haslayout属性，让它读懂Alpha */
|
||||
}
|
||||
.dock ul{
|
||||
.demo ul{
|
||||
position: relative;/* 设置子元素为相对定位，可让子元素不继承Alpha值 */
|
||||
}
|
||||
}
|
||||
#footer .dock ul{
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#footer .dock img{
|
||||
z-index:222;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
#footer .dock ul li{
|
||||
float: left;
|
||||
width: 60px;
|
||||
margin: 5px auto;
|
||||
/*过渡的时间 效果*/
|
||||
-webkit-transition: 0.15s linear;
|
||||
}
|
||||
|
||||
#footer .dock .dock-tips{
|
||||
color:#333;
|
||||
font-size:0.4em;
|
||||
border-radius: 5px;
|
||||
background: rgba(255,255,255,0.5);
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
display: none;
|
||||
padding:0px 5px;
|
||||
margin-top: -30px;
|
||||
margin-bottom: 10px;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
#footer .dock .dock-tips .arrow{
|
||||
opacity: 0.5;
|
||||
border-left:5px solid transparent;
|
||||
border-right:5px solid transparent;
|
||||
border-top:5px solid rgba(255,255,255,0.5);
|
||||
border-bottom:5px solid transparent;
|
||||
width:0;
|
||||
height:0;
|
||||
}
|
||||
|
||||
/*各种颜色 具体效果见 https://www.kancloud.cn/qq85569256/xzui/350010*/
|
||||
.win10-open-iframe .black-green, #win10 .black-green{background:#009688!important;}
|
||||
|
|
@ -887,13 +905,6 @@ body {
|
|||
top: 0;
|
||||
|
||||
}
|
||||
#win10-menu .blocks{
|
||||
overflow-x: hidden;
|
||||
position: absolute;
|
||||
width:calc(100% - 31px);
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
#win10-menu .menu_group {
|
||||
width: 90%;
|
||||
|
|
@ -915,22 +926,12 @@ body {
|
|||
.win10-open-iframe .layui-layer-setwin a {
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
.dock{
|
||||
width: 100%;
|
||||
height:60px;
|
||||
border-radius: 0px;
|
||||
#footer{
|
||||
bottom:0;
|
||||
}
|
||||
.dock .dock-container{
|
||||
|
||||
#footer .dock{
|
||||
width: 100%;
|
||||
border-radius: 0px;
|
||||
}
|
||||
|
||||
.dock a.dock-item{
|
||||
width: 100%;
|
||||
margin-left: 25px;
|
||||
float:left;
|
||||
position: static;
|
||||
}
|
||||
|
||||
}
|
||||
86
demo.html
|
|
@ -5,14 +5,18 @@
|
|||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
|
||||
<title>mac桌面</title>
|
||||
<link rel='Shortcut Icon' type='image/x-icon' href='./img/favicon.ico'>
|
||||
<link rel='Shortcut Icon' type='image/x-icon' href='./macimg/apple.ico'>
|
||||
<script type="text/javascript" src="./js/jquery-2.2.4.min.js"></script>
|
||||
<link href="./css/animate.css" rel="stylesheet">
|
||||
<script type="text/javascript" src="./component/layer-v3.0.3/layer/layer.js"></script>
|
||||
<link rel="stylesheet" href="./component/font-awesome-4.7.0/css/font-awesome.min.css">
|
||||
<link href="./css/macdefault.css" rel="stylesheet">
|
||||
<script type="text/javascript" src="./js/jquery-2.2.4.min.js"></script>
|
||||
<script type="text/javascript" src="./js/interface.js"></script>
|
||||
<script type="text/javascript" src="./component/layer-v3.0.3/layer/layer.js"></script>
|
||||
<script type="text/javascript" src="./js/mac.js"></script>
|
||||
<style>
|
||||
* {
|
||||
font-family: "Microsoft YaHei", 微软雅黑, "MicrosoftJhengHei", 华文细黑, STHeiti, MingLiu
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
Win10.onReady(function () {
|
||||
|
||||
|
|
@ -26,24 +30,24 @@
|
|||
'animated flip',
|
||||
'animated bounceIn',
|
||||
], 0.01);
|
||||
setTimeout(function () {
|
||||
Win10.newMsg('推荐全屏', '按下F11全屏以达到最佳视觉效果(点击进入)',function () {
|
||||
Win10.enableFullScreen();
|
||||
})
|
||||
}, 1500);
|
||||
|
||||
setTimeout(function () {
|
||||
Win10.newMsg('官方交流一群', '欢迎各位大侠加入讨论：<a target="_blank" href="https://jq.qq.com/?_wv=1027&k=4Er0u8i">[点击加入]205546163</a>')
|
||||
}, 2500);
|
||||
|
||||
setTimeout(function () {
|
||||
layer.open({
|
||||
type: 2,
|
||||
title: '最新资讯',
|
||||
area: ['300px', '380px'],
|
||||
shade:0,
|
||||
layer.open({
|
||||
type: 2,
|
||||
title: '最新资讯',
|
||||
area: ['300px', '380px'],
|
||||
shade:0,
|
||||
skin:'win10-open-iframe',
|
||||
offset: 'rb',
|
||||
content: 'broadcast.html'
|
||||
})
|
||||
},2000);
|
||||
offset: 'rb',
|
||||
content: '//win10ui.yuri2.cn/src/broadcast.html'
|
||||
})
|
||||
},2000)
|
||||
});
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -97,7 +101,8 @@
|
|||
<div class="sub-item" onclick="Win10.openUrl('win10ui.yuri2.cn/src/tools/builder-tile.html','磁贴代码生成器')">磁贴代码生成器</div>
|
||||
<div class="sub-item" onclick="Win10.openUrl('win10ui.yuri2.cn/src/tools/builder-menu.html','菜单代码生成器')">菜单代码生成器</div>
|
||||
<div class="item" onclick="Win10.aboutUs()"><i class="icon fa fa-star fa-fw"></i>关于</div>
|
||||
<div class="item" onclick=" Win10.exit();"><i class="icon fa fa-window-close fa-fw"></i>关闭</div>
|
||||
|
||||
<div class="item" onclick=" Win10.exit();"><i class="icon fa fa-power-off fa-fw"></i>关闭</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="win10_command_center" class="hidden_right">
|
||||
|
|
@ -114,29 +119,34 @@
|
|||
</div>
|
||||
<div id="win10_btn_group_middle" class="btn_group"></div>
|
||||
<div id="win10_btn_group_right" class="btn_group">
|
||||
<div class="btn" id="win10_btn_time">
|
||||
<!--0:00<br/>-->
|
||||
<!--1993/8/13-->
|
||||
</div>
|
||||
<div class="btn" id="win10_btn_time"></div>
|
||||
<div class="btn" id="win10_btn_command"><span id="win10-msg-nof" class="fa fa-list-ul"></span></div>
|
||||
<div class="btn" id="win10_btn_show_desktop"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!--bottom dock -->
|
||||
<div class="dock" id="dock">
|
||||
<div class="dock-container">
|
||||
<a class="dock-item" href="#"><span>finder</span><img src="./img/icon/finder.png" alt="finder" /></a>
|
||||
<a class="dock-item" href="#"><span>appstore</span><img src="./img/icon/appstore.png" alt="appstore" /></a>
|
||||
<a class="dock-item" href="#"><span>gamecenter</span><img src="./img/icon/gamecenter.png" alt="gamecenter" /></a>
|
||||
<a class="dock-item" href="#"><span>imusic</span><img src="./img/icon/imusic.png" alt="imusic" /></a>
|
||||
<a class="dock-item" href="#"><span>notes</span><img src="./img/icon/notes.png" alt="notes" /></a>
|
||||
<a class="dock-item" href="#"><span>setting</span><img src="./img/icon/icloud.png" alt="setting" /></a>
|
||||
<a class="dock-item" href="#"><span>iTunes</span><img src="./img/icon/iTunes.png" alt="iTunes" /></a>
|
||||
<a class="dock-item" href="#"><span>mail</span><img src="./img/icon/mail.png" alt="mail" /></a>
|
||||
<a class="dock-item" href="#"><span>maps</span><img src="./img/icon/maps.png" alt="maps" /></a>
|
||||
<a class="dock-item" href="#"><span>trashicon</span><img src="./img/icon/trashicon.png" alt="trashicon" /></a>
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer">
|
||||
<div class="dock">
|
||||
<ul>
|
||||
<li><span class="dock-tips">finder<span class="arrow"></span></span><a href="#"> <img src="./img/icon/finder.png"></a></li>
|
||||
<li><span class="dock-tips">computer<span class="arrow"></span></span><a onclick="Win10.openUrl('http://win10ui.yuri2.cn','<img class=\'icon\' src=\'./img/icon/computer.png\'/>我的电脑')"> <img src="./img/icon/computer.png"></a></li>
|
||||
<li><span class="dock-tips">gamecenter<span class="arrow"></span></span><a href="#"> <img src="./img/icon/gamecenter.png"></a></li>
|
||||
<li><span class="dock-tips">icloud<span class="arrow"></span></span><a href="#"> <img src="./img/icon/icloud.png"></a></li>
|
||||
<li><span class="dock-tips">prefapp<span class="arrow"></span></span><a href="#"> <img src="./img/icon/prefapp.png"></a></li>
|
||||
<li><span class="dock-tips">trashicon<span class="arrow"></span></span><a href="#"> <img src="./img/icon/trashicon.png"></a></li>
|
||||
<li><span class="dock-tips">appstore<span class="arrow"></span></span><a href="#"> <img src="./img/icon/appstore.png"></a></li>
|
||||
<li><span class="dock-tips">iTunes<span class="arrow"></span></span><a href="#"> <img src="./img/icon/iTunes.png"></a></li>
|
||||
<li><span class="dock-tips">imusic<span class="arrow"></span></span><a href="#"> <img src="./img/icon/imusic.png"></a></li>
|
||||
<li><span class="dock-tips">preview<span class="arrow"></span></span><a href="#"> <img src="./img/icon/preview.png"></a></li>
|
||||
<li><span class="dock-tips">mail<span class="arrow"></span></span><a href="#"> <img src="./img/icon/mail.png"></a></li>
|
||||
<li><span class="dock-tips">notes.png<span class="arrow"></span></span><a href="#"> <img src="./img/icon/notes.png"></a></li>
|
||||
<li><span class="dock-tips">messages<span class="arrow"></span></span><a href="#"> <img src="./img/icon/messages.png"></a></li>
|
||||
<li><span class="dock-tips">maps<span class="arrow"></span></span><a href="#"> <img src="./img/icon/maps.png"></a></li>
|
||||
<li><span class="dock-tips">ibooks<span class="arrow"></span></span><a href="#"> <img src="./img/icon/ibooks.png"></a></li>
|
||||
<li><span class="dock-tips">facetime<span class="arrow"></span></span><a href="#"> <img src="./img/icon/facetime.png"></a></li>
|
||||
<li><span class="dock-tips">launchpad<span class="arrow"></span></span><a href="#"> <img src="./img/icon/launchpad.png"></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 19 KiB |
|
Before Width: | Height: | Size: 19 KiB After Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 392 KiB |
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 10 KiB |
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 720 KiB |
|
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 50 KiB |
|
Before Width: | Height: | Size: 19 KiB After Width: | Height: | Size: 596 KiB |
|
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 179 KiB |
|
Before Width: | Height: | Size: 19 KiB After Width: | Height: | Size: 111 KiB |
|
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 4.6 KiB |
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 46 KiB |
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 83 KiB |
|
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 477 KiB |
|
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 596 KiB |
|
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 615 KiB |
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 23 KiB |
|
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 81 KiB |
|
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 13 KiB |
64
index.html
|
|
@ -5,13 +5,12 @@
|
|||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
|
||||
<title>mac桌面</title>
|
||||
<link rel='Shortcut Icon' type='image/x-icon' href='./img/favicon.ico'>
|
||||
<link rel='Shortcut Icon' type='image/x-icon' href='./macimg/apple.ico'>
|
||||
<script type="text/javascript" src="./js/jquery-2.2.4.min.js"></script>
|
||||
<link href="./css/animate.css" rel="stylesheet">
|
||||
<script type="text/javascript" src="./component/layer-v3.0.3/layer/layer.js"></script>
|
||||
<link rel="stylesheet" href="./component/font-awesome-4.7.0/css/font-awesome.min.css">
|
||||
<link href="./css/macdefault.css" rel="stylesheet">
|
||||
<script type="text/javascript" src="./js/jquery-2.2.4.min.js"></script>
|
||||
<script type="text/javascript" src="./js/interface.js"></script>
|
||||
<script type="text/javascript" src="./component/layer-v3.0.3/layer/layer.js"></script>
|
||||
<script type="text/javascript" src="./js/mac.js"></script>
|
||||
<style>
|
||||
* {
|
||||
|
|
@ -33,20 +32,22 @@
|
|||
], 0.01);
|
||||
|
||||
setTimeout(function () {
|
||||
Win10.newMsg('官方交流一群', '欢迎各位大侠加入讨论：<a target="_blank" href="https://jq.qq.com/?_wv=1027&k=4Er0u8i">[点击加入]205546163</a>')
|
||||
}, 2500);
|
||||
Win10.newMsg('推荐全屏', '按下F11全屏以达到最佳视觉效果(点击进入)',function () {
|
||||
Win10.enableFullScreen();
|
||||
})
|
||||
}, 1500);
|
||||
|
||||
setTimeout(function () {
|
||||
layer.open({
|
||||
type: 2,
|
||||
title: '最新资讯',
|
||||
area: ['300px', '380px'],
|
||||
shade:0,
|
||||
layer.open({
|
||||
type: 2,
|
||||
title: '最新资讯',
|
||||
area: ['300px', '380px'],
|
||||
shade:0,
|
||||
skin:'win10-open-iframe',
|
||||
offset: 'rb',
|
||||
content: 'broadcast.html'
|
||||
})
|
||||
},2000);
|
||||
offset: 'rb',
|
||||
content: '//win10ui.yuri2.cn/src/broadcast.html'
|
||||
})
|
||||
},2000)
|
||||
});
|
||||
|
||||
</script>
|
||||
|
|
@ -68,9 +69,8 @@
|
|||
<div id="win10-menu" class="hidden">
|
||||
<div class="list win10-menu-hidden animated animated-slideOutLeft">
|
||||
<div class="item" onclick="Win10.aboutUs()"><i class="icon fa fa-star fa-fw"></i>关于</div>
|
||||
<div class="item" onclick=" Win10.exit();"><i class="icon fa fa-window-close fa-fw"></i>关闭</div>
|
||||
<div class="item" onclick=" Win10.exit();"><i class="icon fa fa-power-off fa-fw"></i>关闭</div>
|
||||
</div>
|
||||
<div id="win10-menu-switcher"></div>
|
||||
</div>
|
||||
<div id="win10_command_center" class="hidden_right">
|
||||
<div class="title">
|
||||
|
|
@ -86,27 +86,23 @@
|
|||
</div>
|
||||
<div id="win10_btn_group_middle" class="btn_group"></div>
|
||||
<div id="win10_btn_group_right" class="btn_group">
|
||||
<div class="btn" id="win10_btn_time">
|
||||
<!--0:00<br/>-->
|
||||
<!--1993/8/13-->
|
||||
</div>
|
||||
<div class="btn" id="win10_btn_time"></div>
|
||||
<div class="btn" id="win10_btn_command"><span id="win10-msg-nof" class="fa fa-list-ul"></span></div>
|
||||
<div class="btn" id="win10_btn_show_desktop"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dock" id="dock">
|
||||
<div class="dock-container">
|
||||
<a class="dock-item" href="#" onclick="Win10.openUrl('http://win10ui.yuri2.cn','<img class=\'icon\' src=\'./img/icon/computer.png\'/>UI官网')" ><span>finder</span><img src="./img/icon/finder.png" alt="finder" /></a>
|
||||
<a class="dock-item" href="#"><span>appstore</span><img src="./img/icon/appstore.png" alt="appstore" /></a>
|
||||
<a class="dock-item" href="#"><span>gamecenter</span><img src="./img/icon/gamecenter.png" alt="gamecenter" /></a>
|
||||
<a class="dock-item" href="#"><span>imusic</span><img src="./img/icon/imusic.png" alt="imusic" /></a>
|
||||
<a class="dock-item" href="#"><span>notes</span><img src="./img/icon/notes.png" alt="notes" /></a>
|
||||
<a class="dock-item" href="#"><span>setting</span><img src="./img/icon/icloud.png" alt="setting" /></a>
|
||||
<a class="dock-item" href="#"><span>iTunes</span><img src="./img/icon/iTunes.png" alt="iTunes" /></a>
|
||||
<a class="dock-item" href="#"><span>mail</span><img src="./img/icon/mail.png" alt="mail" /></a>
|
||||
<a class="dock-item" href="#"><span>maps</span><img src="./img/icon/maps.png" alt="maps" /></a>
|
||||
<a class="dock-item" href="#"><span>trashicon</span><img src="./img/icon/trashicon.png" alt="trashicon" /></a>
|
||||
</div>
|
||||
<div id="footer">
|
||||
<div class="dock">
|
||||
<ul>
|
||||
<li><span class="dock-tips">finder<span class="arrow"></span></span><a href="#"> <img src="./img/icon/finder.png"></a></li>
|
||||
<li><span class="dock-tips">computer<span class="arrow"></span></span><a onclick="Win10.openUrl('http://win10ui.yuri2.cn','<img class=\'icon\' src=\'./img/icon/computer.png\'/>我的电脑')"> <img src="./img/icon/computer.png"></a></li>
|
||||
<li><span class="dock-tips">gamecenter<span class="arrow"></span></span><a href="#"> <img src="./img/icon/gamecenter.png"></a></li>
|
||||
<li><span class="dock-tips">icloud<span class="arrow"></span></span><a href="#"> <img src="./img/icon/icloud.png"></a></li>
|
||||
<li><span class="dock-tips">prefapp<span class="arrow"></span></span><a href="#"> <img src="./img/icon/prefapp.png"></a></li>
|
||||
<li><span class="dock-tips">trashicon<span class="arrow"></span></span><a href="#"> <img src="./img/icon/trashicon.png"></a></li>
|
||||
<li><span class="dock-tips">appstore<span class="arrow"></span></span><a href="#"> <img src="./img/icon/appstore.png"></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
|
|||
59
js/mac.js
|
|
@ -608,47 +608,30 @@ window.Win10 = {
|
|||
},
|
||||
//渲染DOCK
|
||||
renderDocks:function () {
|
||||
var cell_width=50;
|
||||
var cell_width=74;
|
||||
var width=document.body.clientWidth ;
|
||||
var docks=$(".dock .dock-container a");
|
||||
var max_num=parseInt((width-40)/(cell_width+25))-1;
|
||||
for (var i = 0; i <= docks.length; i++) {
|
||||
if (i>=max_num) {
|
||||
docks.eq(i).hide();
|
||||
}else{
|
||||
docks.eq(i).show();
|
||||
}
|
||||
}
|
||||
if(width>768){
|
||||
$('#dock').Fisheye({
|
||||
maxWidth: 70,
|
||||
items: 'a',
|
||||
itemsText: 'span',
|
||||
container: '.dock-container',
|
||||
itemWidth: 50,
|
||||
proximity: 80,
|
||||
alignment : 'left',
|
||||
valign: 'bottom',
|
||||
halign : 'center'
|
||||
})
|
||||
}else{
|
||||
$('.dock-container').css({'width':width});
|
||||
for (var i = 0; i < max_num; i++) {
|
||||
|
||||
docks.on('mouseover', function(e) {
|
||||
e.preventDefault();
|
||||
});
|
||||
docks.on('mouseout', function(e) {
|
||||
e.preventDefault();
|
||||
});
|
||||
docks.on('click', function(e) {
|
||||
e.preventDefault();
|
||||
});
|
||||
docks.unbind("mouseover").unbind('mouseout').unbind('click').css({"width":cell_width});
|
||||
if(i==0){
|
||||
docks.eq(i).css("margin-left",0);
|
||||
$("#footer .dock li a img").hover(
|
||||
function(){
|
||||
$(this).parent('a').prev().css('display','flex');
|
||||
},
|
||||
function(){
|
||||
$(this).parent('a').prev().css('display','none');
|
||||
}
|
||||
}
|
||||
);
|
||||
var docks=$("#footer .dock li");
|
||||
var max_num=parseInt(width/cell_width)-1;
|
||||
for (var i = 0; i < docks.length; i++) {
|
||||
if (i>max_num) {
|
||||
docks.eq(i).css('display','none');
|
||||
}else{
|
||||
docks.eq(i).css('display','list-item');
|
||||
}
|
||||
}
|
||||
}else{
|
||||
$("#footer .dock li a img").hover(function(){
|
||||
$(this).parent('a').prev().css('display','none');
|
||||
});
|
||||
}
|
||||
},
|
||||
commandCenterToggle: function () {
|
||||
|
|
|
|||