├── README.md ├── css ├── cj_index.css ├── desktop.css ├── lgc_desktop.css └── lgc_iconDesktop.css ├── images ├── about.png ├── background │ ├── 10.jpg │ ├── 100yi.png │ ├── 11.jpg │ ├── 142043.jpg │ ├── Wood.jpg │ ├── Yuanye.jpg │ ├── adf28bd4530214450153070163890009.png │ ├── aiqiyi.png │ ├── angryBird.png │ ├── baiducloud.png │ ├── baiduditu.png │ ├── cangba.png │ ├── cangbaico.png │ ├── cloud.jpg │ ├── duoyun.png │ ├── kugoumusic.png │ ├── leishiIco.png │ ├── leshi.png │ ├── logo.png │ ├── meituan.png │ ├── mycallmenu.png │ ├── newsQQ.png │ ├── preloader.gif │ ├── progressOn.png │ ├── qichezhijia.png │ ├── qqclock.png │ ├── shizhong.png │ ├── taobao.png │ ├── wallpaper.jpg │ ├── wangyi.png │ ├── weiyun.png │ ├── xiecheangico.png │ ├── xiecheng.png │ ├── xinlangimg.png │ ├── yingyongshop.png │ ├── youdao.png │ ├── youdaobiji.png │ ├── youdaocd.png │ ├── youtube.png │ └── zhihu.png ├── close.png ├── desktop │ ├── 1.mp3 │ ├── 10.jpg │ ├── 100yi.png │ ├── 11.jpg │ ├── 142043.jpg │ ├── Wood.jpg │ ├── adf28bd4530214450153070163890009.png │ ├── aiqiyi.png │ ├── angryBird.png │ ├── appfolder.png │ ├── baiducloud.png │ ├── baiduditu.png │ ├── black_about.png │ ├── black_all.png │ ├── black_guanli.png │ ├── black_shezhi.png │ ├── black_shichang.png │ ├── black_user.png │ ├── black_xitong.png │ ├── black_zhankai.png │ ├── block.png │ ├── cangba.png │ ├── cangbaico.png │ ├── clock.png │ ├── cloud.jpg │ ├── duoyun.png │ ├── kugoumusic.png │ ├── leishiIco.png │ ├── leshi.png │ ├── lock.png │ ├── logo.png │ ├── meituan.png │ ├── musicpeo.jpg │ ├── mycallmenu.png │ ├── myfolder.png │ ├── newsQQ.png │ ├── next.png │ ├── out.png │ ├── pause.png │ ├── play.png │ ├── preloader.gif │ ├── progressOn.png │ ├── qichezhijia.png │ ├── qq.png │ ├── qqclock.png │ ├── shizhong.png │ ├── taobao.png │ ├── turn.png │ ├── wallpaper.jpg │ ├── wangyi.png │ ├── weiyun.png │ ├── xiecheangico.png │ ├── xiecheng.png │ ├── xinlangimg.png │ ├── yingyongshop.png │ ├── youdao.png │ ├── youdaobiji.png │ ├── youdaocd.png │ ├── youtube.png │ └── zhihu.png ├── fankui.png ├── folder │ ├── CSS-Edit.png │ ├── Candy.png │ ├── Flash.png │ ├── Front-Row.png │ ├── Maya.png │ ├── Photobooth.png │ ├── Picture.png │ ├── Reader.png │ ├── Voice-Candy.png │ ├── backriver.mp3 │ ├── baihualin.mp3 │ ├── music.png │ ├── musicPic01.jpeg │ ├── musicPic02.jpeg │ ├── myVideo.mp4 │ ├── pic01.jpeg │ ├── pic01.jpg │ ├── pic02.jpeg │ ├── pic03.jpeg │ └── video_play.png ├── list.png ├── logo.png ├── open.png ├── preloader.gif ├── shezhi.png ├── shili.png ├── suoxiao-1.png ├── suoxiao.png ├── tongxun.png ├── turn.png ├── user.png ├── xitong.png ├── xixin.png ├── yingyong.png └── youdao.png ├── js ├── cj_about.js ├── cj_index.js ├── dkCSSJS.js ├── dkHTML.js ├── dk_data.js ├── dk_desk.js ├── lgcCss.js ├── lgcHTML.js ├── lgcJS.js ├── lgc_DesktopaData.js ├── lgc_about.js ├── lgc_folder.js ├── lgc_folderData.js ├── lgc_iconDesktop.js ├── lgc_mark.js ├── lgc_myBottomBox.js ├── lgc_pb_right.js ├── lgc_tools.js ├── pb_right.js └── public.js ├── media ├── css │ └── media.css ├── images │ ├── frx.jpeg │ ├── nextbtn.png │ ├── pause.png │ ├── play.png │ ├── prevbtn.png │ └── yq.jpeg └── js │ └── media.js └── newLgcIndex.html /README.md: -------------------------------------------------------------------------------- 1 | ## 原生JS实现web桌面应用操作（win8风格） 2 | * 通过对windows桌面的模拟，实现无刷新图标桌面以及磁贴页面的切换，以及文件夹的模拟…… 3 | 4 | * 简述；这是一个原生javascript实现的一个两种桌面无切换刷新的风格的web桌面应用系统，效果上只处理了前端相关的技术： 5 | 包括图标的拖拽，应用框的动画弹出，以及拖出拖进，点击出现浏览网页的窗口，组件，文件夹相关操作，音乐视频播放 等等 6 | 7 | * 补充： 这个作品还不太完整 ， 比如后台逻辑没有处理，也没有提供相关添加应用的借口，数据也是静态的，没有通过数据库取出数据响应到前端页面等等 ， 技术在于分享 ， 谢谢大家指正 ！ 8 | 9 | * 在线浏览地址：[仿win8风格Web桌面](https://riverscoder.github.io/web_desktop_application/newLgcIndex.html) -------------------------------------------------------------------------------- /css/cj_index.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | } 5 | ul,li{ 6 | list-style: none; 7 | } 8 | a{ 9 | text-decoration: none; 10 | } 11 | html { 12 | width: 100%; 13 | height: 100%; 14 | } 15 | body { 16 | width: 100%; 17 | height: 100%; 18 | font-family: "微软雅黑",'Luxi Sans','DejaVu Sans',Tahoma,'Hiragino Sans GB',STHeiti; 19 | } 20 | .clearfix:after { 21 | display: block; 22 | content: ''; 23 | height: 0; 24 | clear: both; 25 | overflow: hidden; 26 | visibility: hidden; 27 | } 28 | 29 | /*滚动条*/ 30 | .scrollbar{ 31 | width: 12px; 32 | height: inherit; 33 | background: rgba(255,255,255,.3); 34 | position: fixed; 35 | right: 0; 36 | } 37 | .slider{ 38 | width: 12px; 39 | height: 75%; 40 | background: rgba(255,255,255,.4); 41 | position: absolute; 42 | } 43 | 44 | .out_Wrap { 45 | width: 100%; 46 | height: 100%; 47 | background-image:url(../images/background/10.jpg); 48 | background-size: cover; 49 | 50 | /*display: none;*/ 51 | } 52 | 53 | .hte-quickbar-show { 54 | width: 36px; 55 | height: 90px; 56 | position: fixed; 57 | top: 42%; 58 | left: 0; 59 | background-color: #9b1dab; 60 | cursor: pointer; 61 | z-index:9; 62 | transition: all .3s; 63 | } 64 | .hte-quickbar-show img{ 65 | position: absolute; 66 | top: 32px; 67 | left: 5px; 68 | transition: 0.5s; 69 | } 70 | .hte-quickbar-show:hover{ 71 | background-color: rgba(155,29,171,0.8); 72 | } 73 | .hte-quickbar-show:hover img{ 74 | transform: rotate(-360deg); 75 | } 76 | 77 | .hte-quickbar{ 78 | width: 80px; 79 | height: 100%; 80 | background-color: #9b1dab; 81 | z-index: 99; 82 | position: fixed; 83 | left: -80px; 84 | top: 0; 85 | transition: all .3s; 86 | } 87 | .hte-quickbar-header{ 88 | height: 56px; 89 | border-bottom:1px #ccc solid ; 90 | position: relative; 91 | } 92 | .hte-quickbar-header img{ 93 | position: absolute; 94 | left: 27px; 95 | top: 15px; 96 | transition: 0.5s; 97 | cursor: pointer; 98 | } 99 | .hte-quickbar-header img:hover{ 100 | transform: rotate(-180deg); 101 | } 102 | 103 | .hte-quickbar-body{ 104 | width: 60px; 105 | height: 180px; 106 | margin: 10px auto 0; 107 | } 108 | .hte-quickbar1{ 109 | display: block; 110 | width: 60px; 111 | height: 60px; 112 | cursor: pointer; 113 | position: relative; 114 | -webkit-user-select: none; 115 | } 116 | .hte-quickbar1 img{ 117 | width: 36px; 118 | height: 36px; 119 | position: absolute; 120 | left: 12px; 121 | top: 12px; 122 | 123 | } 124 | .hte-quickbar1:hover{background-color: rgba(0,0,0,0.3); 125 | } 126 | .hte-taskbar{ 127 | position: fixed; 128 | bottom: 0; 129 | left: 0; 130 | width: 100%; 131 | height: 35px; 132 | z-index: 100; 133 | transition: all .25s; 134 | background-color: rgba(155,29,171,0.8); 135 | overflow: hidden; 136 | } 137 | .hte-taskbar-action-left{ 138 | width:120px; 139 | height: 100%; 140 | float: left; 141 | } 142 | 143 | .hte-taskbar-action{ 144 | float: left; 145 | width: 36px; 146 | height: 100%; 147 | cursor: pointer; 148 | background-repeat:no-repeat ; 149 | background-position: 10px 10px; 150 | } 151 | .hte-taskbar-action:hover{background-color: rgba(255,255,255,0.1); 152 | 153 | } 154 | .hte-taskbar-inner{ 155 | float: left; 156 | width: auto; 157 | height: 100%; 158 | position: absolute; 159 | left:120px ; 160 | right: 278px; 161 | white-space: nowrap; 162 | overflow: hidden; 163 | } 164 | .hte-task-bottom{ 165 | width: 160px; 166 | margin: 0 2px 2px; 167 | border-bottom: 2.5px solid rgba(255,255,255,0.6); 168 | height: 35px; 169 | color: white; 170 | overflow: hidden; 171 | position: relative; 172 | display: inline-block; 173 | box-sizing: border-box; 174 | } 175 | .hte-task-bottom:hover{ 176 | background-color:rgba(31,91,183,0.5) ; 177 | cursor: pointer; 178 | } 179 | .hte-task-icon{ 180 | position: absolute; 181 | top: 8px; 182 | left: 8px; 183 | width: 20px; 184 | height: 20px; 185 | } 186 | .hte-task-name{ 187 | font-size:12px; 188 | width: 100%; 189 | height: 100%; 190 | line-height:37px; 191 | padding-left: 35px; 192 | } 193 | .hte-task-active{ 194 | background-color: rgba(31,91,183,0.8); 195 | } 196 | .hte-taskbar-action-right{ 197 | float: right; 198 | height: 100%; 199 | } 200 | .hte-taskbar-action-time{ 201 | width: 57px; 202 | text-align: center; 203 | line-height: 35px; 204 | color: #fff; 205 | } 206 | .hte-task-contextmenu{ 207 | background-color:white; 208 | padding:5px 0; 209 | z-index: 999; 210 | width: 158px; 211 | position: absolute; 212 | border: 1px solid rgba(0,0,0,.15); 213 | display: none; 214 | } 215 | .hte-task-contextmenu > li{ 216 | font-size: 13px; 217 | position: relative; 218 | 219 | } 220 | .hte-task-contextmenu > li a:hover{ 221 | background-color: #1f5bb7; 222 | color: white; 223 | } 224 | .hte-task-contextmenu > li>a{ 225 | padding: 4px 30px 4px 20px; 226 | color: black; 227 | font-size: 13px; 228 | display: block; 229 | white-space: nowrap; 230 | 231 | } 232 | .hte-task-contextmenu > li>a span{ 233 | width: 13px; 234 | height: 13px; 235 | display: inline-block; 236 | } 237 | .hte-task-contextmenu .divider{ 238 | margin: 4px 0px; 239 | height: 1px; 240 | background-color: #e5e5e5; 241 | overflow: hidden; 242 | } 243 | .outBox-icon{ 244 | overflow-y:hidden; 245 | position: relative; 246 | width: 100%; 247 | height: 94.71%; 248 | } 249 | .auto{ 250 | 251 | } 252 | .hte-shortcut{ 253 | position: absolute; 254 | width: 72px; 255 | height: 72px; 256 | color: white; 257 | cursor:pointer; 258 | transition-duration:.2s; 259 | transition-property:transform,left,top; 260 | 261 | } 262 | .cjmessager{ 263 | display:none;position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color:rgba(0,0,0,.3);z-index: 9999;transition:all .3s; 264 | } 265 | .cjmessagercontent{background-color: #366d19;box-sizing:border-box;position: absolute;top:50%;left:50%;padding: 30px 10px;transform:translate(-50%,-50%);color: white;box-shadow: 0px 0px 8px rgba(0,0,0,0.3);} 266 | .cjmessagercontent h2{margin:20px 0 10px;font-size: 30px;font-weight: 100;} 267 | .cjmessagercontent p{font-size: 14px;margin: 24px 0 18px;} 268 | .cjmessagercontent input,.cjmessagercontent textarea{padding: 6px 12px;display: block;box-sizing:border-box;margin-bottom: 5px;width: 100%;} 269 | .cjmessagercontent textarea{height: 114px;} 270 | .cjmessagercontent button{padding: 6px 27px;float: right;margin-top: 30px;margin-left:10px;border: 1px solid transparent;background-color: #fff;cursor:pointer;font-size:14px;font-family:"微软雅黑",'Luxi Sans','DejaVu Sans',Tahoma,'Hiragino Sans GB',STHeiti;outline: none; 271 | } 272 | .cjmessagerabout ul{margin-left: 37px;width: 100%;}/*...........///////.*/ 273 | .cjmessagerabout ul li{list-style-type:disc; } 274 | 275 | #contextmenu{position: absolute;} 276 | ul{width: 160px;} 277 | #contextmenu ul{ 278 | position: absolute; 279 | top: -6px; 280 | left: 158px; 281 | } 282 | 283 | .loading{background-color: #544a4a;width: 100%;height: 100%;display: none;} 284 | .loadingmiddle{position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin:auto;font-size:25px;text-indent:50px;width: 343px;height: 193px;line-height: 38px;color: white;background-image: url(../images/logo.png);background-repeat: no-repeat;background-size: 30px 30px;} 285 | .loadingmiddle span{font-family: Segoe Script;display: initial;} 286 | .loadingmiddle p{margin-top:30px;font-size: 14px;text-align: center;background-image: url(../images/preloader.gif);background-size:30px 30px;background-position:100px 0;background-repeat: no-repeat;} 287 | .hte-shortcut-copy{ 288 | position: absolute; 289 | width: 72px; 290 | height: 72px; 291 | color: white; 292 | cursor: pointer; 293 | } 294 | .hte-shortcut img, .hte-shortcut-copy img{ 295 | width:36px; 296 | height: 36px; 297 | position: absolute; 298 | top:12px; 299 | left: 18px; 300 | } 301 | .hte-shortcut p.hte-shortcut-name, .hte-shortcut-copy p.hte-shortcut-name { 302 | position: absolute; 303 | bottom: 0; 304 | left: 0; 305 | height: 20px; 306 | line-height: 20px; 307 | font-size: 12px; 308 | text-align: center; 309 | text-overflow:ellipsis; 310 | width: 100%; 311 | } 312 | 313 | 314 | /*响应式设置*/ 315 | @media (min-width: 768px){ 316 | .cjmessagercontent{width: 700px;padding-left: 60px;padding-right: 60px;} 317 | // .cjmessagercontent input{width: 300px;} 318 | } 319 | @media all and(max-width:600px){ 320 | 321 | .outWrap{ 322 | display: none; 323 | } 324 | } 325 | 326 | @media all and (max-width:1024px) and (min-width:680px) 327 | { 328 | .slider{height:330px;} 329 | 330 | } 331 | @media all and (max-width:680px) and (min-width:340px) 332 | { 333 | .slider{height:180px;} 334 | } -------------------------------------------------------------------------------- /css/lgc_iconDesktop.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | } 5 | ul,li{ 6 | list-style: none; 7 | } 8 | a{ 9 | text-decoration: none; 10 | } 11 | html { 12 | width: 100%; 13 | height: 100%; 14 | background-image:url(../images/background/wallpaper.jpg); 15 | } 16 | body { 17 | width: 100%; 18 | height: 100%; 19 | font-family: "微软雅黑",'Luxi Sans','DejaVu Sans',Tahoma,'Hiragino Sans GB',STHeiti; 20 | overflow:hidden; 21 | } 22 | .clearfix:after { 23 | display: block; 24 | content: ''; 25 | height: 0; 26 | clear: both; 27 | overflow: hidden; 28 | visibility: hidden; 29 | } 30 | 31 | /* clocks 钟表 */ 32 | 33 | #clocks{width:200px;height:200px;background:red;position:absolute;right:50px;top:68px; 34 | background:url(../images/desktop/clock.png) no-repeat;background-size:200px 200px; 35 | box-shadow:0 0 8px #333;border-radius:50%;} 36 | 37 | #clocks .miaoz{width:2px;height:76px;position:absolute;background-color:red;left:99px;top:36px; 38 | transform-origin:1px 64px;transform:rotate(10deg);z-index:1;} 39 | 40 | #clocks .fenz{width:2px;height:66px;position:absolute;background-color:#333;left:99px;top:43px; 41 | transform-origin:1px 57px;transform:rotate(82deg);z-index:1;} 42 | 43 | 44 | #clocks .shiz{width:4px;height:58px;position:absolute;background-color:#333;left:98px;top:48px; 45 | transform-origin:2px 52px;transform:rotate(90deg);z-index:1;} 46 | 47 | #clocks #elecTime{width:auto;z-index:0;height:36px;position:absolute;left:54px;top:116px;overflow:hidden;} 48 | #clocks #elecTime .elcItem{transition:top 1s ease;width:30px;height:72px;background:#333;margin-right:3px;float:left;position:relative;left:0;top:0;} 49 | #clocks #elecTime .elecSec{margin-right:0px;} 50 | #clocks #elecTime .elcItem span{display:block;position:absolute;width:30px;height:36px;left:0;background:pink;text-align:center;line-height:36px; 51 | color:#fff;background:-webkit-radial-gradient(#525252,#333);font-size:13px;} 52 | #clocks #elecTime .elcItem span:nth-of-type(1){top:0;} 53 | #clocks #elecTime .elcItem span:nth-of-type(2){top:36px;} 54 | 55 | 56 | 57 | /* appFolder 操作 */ 58 | #appsFolder{transition:.5s ease;opacity:0;width:600px;height:auto;min-height:460px;z-index:99;border-radius:8px;box-shadow:0 0 12px #333;background:rgba(51,51,51,.2);position:absolute;left:50%;margin-left:-250px;top:-50%;margin-top:-190px;} 59 | #appsFolder .appFoClose{width:50px;height:50px;position:absolute;right:-36px;top:-36px;color:#fff;line-height:50px;text-align:center;font-size:30px;cursor:pointer; 60 | transition:.6s;transform-origin:center center;text-shadow:0 0 6px #333;} 61 | #appsFolder .appFoClose:hover{transform:rotate(180deg);} 62 | #appsFolder h3{width:100%;height:50px;line-height:50px;background:rgba(0,0,0,0.2);text-align:center;font-weight:500;font-size:20px;color:#fff;text-shadow:0 0 6px #333;} 63 | #appsFolder .appsFCon{width:100%;height:auto;min-height:310px;position:relative;} 64 | 65 | 66 | /* 文件夹操作 */ 67 | #folderAreaWrap{width:900px;right:-900px;height:560px;position:absolute;top:50%;background:;box-shadow:0 0 10px #333;transition:.3s ease;z-index:999;} 68 | #folderAreaWrap.folderToggle{left:50%;margin-left:-450px;top:50%;margin-top:-280px;width:900px;height:560px;} 69 | #folderAreaWrap .folderOpenBtn{width:30px;height:130px;background:pink;position:absolute;left:-30px;top:50%;margin-top:-65px;cursor:pointer;background:#000;color:#fff;line-height:130px;text-align:center;} 70 | #folderArea{width:900px;height:560px;position:relative;} 71 | #folderArea .folderContent{width:100%;height:530px;background:rgba(51,51,51,0.6);} 72 | #folderArea .folderMenu{width:100%;height:30px;background:rgba(0,0,0,0.3);} 73 | #folderArea .folderMenu a{width:100px;padding:0 6px;height:30px;font-size:13px;display:block;color:#fff;line-height:30px;text-align:center;border-right:1px solid rgba(0,0,0,0.4);background:rgba(0,0,0,0.3);float:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} 74 | #folderArea .folderMenu a:last-child{background:rgba(0,0,0,0.6);border-right:none;} 75 | #folderArea .folderMenu a:active{background:rgba(0,0,0,0.6);} 76 | #folderArea .folderMenu .fmFocusMenuA{background:rgba(0,0,0,0.6);border-right:none;} 77 | 78 | #folderArea .folderContent .fcItem{width:148px;height:160px;float:left;cursor:pointer;transition:.3s;margin-left:26px;margin-top:20px;color:#f1f1f1;} 79 | #folderArea .folderContent .fcItem:hover{background:rgba(255,255,255,0.3);color:#fff;} 80 | #folderArea .folderContent .fcItem .fciCon{width:100%height:100%;position:relative;} 81 | #folderArea .folderContent .fcItem .fciCon dt img{width:76%;margin-left:12%;} 82 | #folderArea .folderContent .fcItem .fciCon dd p{width:100%;text-align:center;text-shadow:1px 0px 3px #333;font-size:14px;} 83 | #folderArea .folderContent .fcItem .fciCon dd p:nth-of-type(2){display:none;} 84 | 85 | 86 | /* 预览图片 */ 87 | #previewPic{width:100%;height:100%;position:fixed;z-index:999;background:rgba(0,0,0,0.8);display:none;} 88 | #previewPic .pclose{position:absolute;right:30px;top:30px;transform-origin:25px 25px;transition:.6s;cursor:pointer;color:#fff;font-size:30px;width:50px;height:50px;line-height:50px;text-align:center;} 89 | #previewPic .pclose:hover{transform:rotate(180deg);} 90 | #previewPic .pimg{width:auto;border:3px solid #fff;position:absolute;left:calc(50% - 350px);top:10%;cursor:move;} 91 | 92 | 93 | 94 | /*弹出的iframe*/ 95 | .market_alert{background:rgba(255,255,255,0.6);transition:.5s;overflow:hidden;width:898px;height:498px;border:1px solid #1f5bb7;position:absolute; left: calc(50% - 450px); top: calc(50% - 250px);z-index:888;display: none;} 96 | .market_alert_con{width:100%;height:100%;position:relative;} 97 | .market_con_tit{width:100%;height:28px;background:#1f5bb7;min-width:300px;} 98 | .market_tit_logo{width:150px;height:28px;float:left;} 99 | .market_tit_logo a{display: block;width:150px;height:28px;font:14px/28px "微软雅黑";color:#fff;text-indent:20px;background-size: 18px 18px;} 100 | .c_small,.c_big,.c_close{display: block;width:48px;height:28px;float:right;} 101 | .c_close{background:url(../images/close.png) no-repeat 10px 5px;} 102 | .c_big{background:url(../images/open.png) no-repeat 10px 5px;} 103 | .c_small{background:url(../images/suoxiao.png) no-repeat 10px 5px;} 104 | .market_alert iframe{ width: 100%; height: 100%; position: absolute; left: 0; top:28px; border:none;} 105 | 106 | 107 | /*--点击桌面右键菜单--*/ 108 | 109 | .right_onclick{display:block;position:absolute;z-index:999;padding:5px 0;background:#fff;border:1px solid #ccc;top:0px;left:0px;width:160px;} 110 | .right_onclick ul{display:none;} 111 | .right_onclick li{height:26px;position: relative;} 112 | .right_onclick .divider{height:1px;background:#ccc;margin:4px 0;} 113 | .right_onclick li:hover{background:#366d19;} 114 | .right_onclick li a:hover{color:#fff;} 115 | 116 | .right_onclick li span{display:block;width:13px;height:15px;position:absolute;top:5px;right:5px;background: url(../images/desktop/black_zhankai.png) no-repeat;} 117 | .right_onclick li a{display: block;font:14px/26px "微软雅黑";color:#000;padding-left:40px;} 118 | .right_onclick li:nth-of-type(1) .menuitem{background: url(../images/desktop/block.png) no-repeat 20px 6px;} 119 | .right_onclick li:nth-of-type(2) .menuitem{background: url(../images/desktop/black_xitong.png) no-repeat 20px 6px;} 120 | .right_onclick li:nth-of-type(3) .menuitem{background: url(../images/desktop/black_all.png) no-repeat 20px 6px;} 121 | .right_onclick li:nth-of-type(5) .menuitem{background: url(../images/desktop/black_guanli.png) no-repeat 20px 6px;} 122 | .right_onclick li:nth-of-type(6) .menuitem{background: url(../images/desktop/black_shichang.png) no-repeat 20px 6px;} 123 | .right_onclick li:nth-of-type(8) .menuitem{background: url(../images/desktop/black_shezhi.png) no-repeat 20px 6px;} 124 | .right_onclick li:nth-of-type(9) .menuitem{background: url(../images/desktop/black_user.png) no-repeat 20px 6px;} 125 | .right_onclick li:nth-of-type(11) .menuitem{background: url(../images/desktop/black_about.png) no-repeat 20px 6px;} 126 | .right_onclick .rgt_click_item_ul{background:#fff;width:120px;position:absolute;left:160px;top:0;text-align:center;text-indent:0;} 127 | .right_onclick .rgt_click_item_ul a{width:120px;text-align:center;padding-left:0;} 128 | 129 | .outWrap { 130 | width: 100%; 131 | height: 100%; 132 | background-image:url(../images/background/wallpaper.jpg); 133 | background-size: cover; 134 | position:relative; 135 | overflow:hidden; 136 | } 137 | .icoGetBig{position:absolute;right:10px;top:10px;z-index:20;} 138 | 139 | .setColor .hte-shortcut:hover{background:rgba(255,255,255,0.3);} 140 | 141 | .hte-quickbar-show { 142 | width: 36px; 143 | height: 90px; 144 | position: fixed; 145 | top: 42%; 146 | left: 0; 147 | background-color: #9b1dab; 148 | cursor: pointer; 149 | z-index:9; 150 | transition: all .3s; 151 | display:none; 152 | } 153 | .hte-quickbar-show img{ 154 | position: absolute; 155 | top: 32px; 156 | left: 5px; 157 | transition: 0.5s; 158 | } 159 | .hte-quickbar-show:hover{ 160 | background-color: rgba(155,29,171,0.8); 161 | } 162 | .hte-quickbar-show:hover img{ 163 | transform: rotate(-360deg); 164 | } 165 | 166 | .hte-quickbar{ 167 | width: 80px; 168 | height: 100%; 169 | background-color: #9b1dab; 170 | z-index: 99; 171 | position: fixed; 172 | left: -80px; 173 | top: 0; 174 | transition: all .3s; 175 | } 176 | .hte-quickbar-header{ 177 | height: 56px; 178 | border-bottom:1px #ccc solid ; 179 | position: relative; 180 | } 181 | .hte-quickbar-header img{ 182 | position: absolute; 183 | left: 27px; 184 | top: 15px; 185 | transition: 0.5s; 186 | cursor: pointer; 187 | } 188 | .hte-quickbar-header img:hover{ 189 | transform: rotate(-180deg); 190 | } 191 | 192 | .hte-quickbar-body{ 193 | width: 60px; 194 | height: 180px; 195 | margin: 10px auto 0; 196 | } 197 | .hte-quickbar1{ 198 | display: block; 199 | width: 60px; 200 | height: 60px; 201 | cursor: pointer; 202 | position: relative; 203 | -webkit-user-select: none; 204 | } 205 | .hte-quickbar1 img{ 206 | width: 36px; 207 | height: 36px; 208 | position: absolute; 209 | left: 12px; 210 | top: 12px; 211 | 212 | } 213 | .hte-quickbar1:hover{background-color: rgba(0,0,0,0.3); 214 | } 215 | .hte-taskbar{ 216 | position: fixed; 217 | bottom: 0; 218 | left: 0; 219 | width: 100%; 220 | height: 35px; 221 | z-index:10000; 222 | transition: all .25s; 223 | background-color: rgba(155,29,171,1); 224 | overflow: hidden; 225 | } 226 | .hte-taskbar-action-left{ 227 | width:120px; 228 | height: 100%; 229 | float: left; 230 | } 231 | 232 | .hte-taskbar-action{ 233 | float: left; 234 | width: 36px; 235 | height: 100%; 236 | cursor: pointer; 237 | background-repeat:no-repeat ; 238 | background-position: 10px 10px; 239 | } 240 | .hte-taskbar-action:hover{background-color: rgba(255,255,255,0.1); 241 | 242 | } 243 | .hte-taskbar-inner{ 244 | float: left; 245 | width: auto; 246 | height: 100%; 247 | position: absolute; 248 | left:120px ; 249 | right: 278px; 250 | white-space: nowrap; 251 | overflow: hidden; 252 | } 253 | .hte-task-bottom{ 254 | width: 160px; 255 | border-bottom: 2.5px solid rgba(255,255,255,0.6); 256 | height: 35px; 257 | color: white; 258 | overflow: hidden; 259 | position: relative; 260 | display: block; 261 | float:left; 262 | box-sizing: border-box; 263 | } 264 | .hte-task-bottom:hover{ 265 | background-color:rgba(31,91,183,0.5) ; 266 | cursor: pointer; 267 | } 268 | .hte-task-icon{ 269 | position: absolute; 270 | top: 8px; 271 | left: 8px; 272 | width: 20px; 273 | height: 20px; 274 | } 275 | .hte-task-name{ 276 | font-size:12px; 277 | width: 100%; 278 | height: 100%; 279 | line-height:37px; 280 | padding-left: 35px; 281 | } 282 | .hte-task-active{ 283 | background-color: rgba(31,91,183,0.8); 284 | } 285 | .hte-taskbar-action-right{ 286 | float: right; 287 | height: 100%; 288 | } 289 | .hte-taskbar-action-time{ 290 | width: 57px; 291 | text-align: center; 292 | line-height: 35px; 293 | color: #fff; 294 | font-size:13px; 295 | } 296 | .hte-task-contextmenu{ 297 | background-color:white; 298 | padding:5px 0; 299 | z-index: 999; 300 | width: 158px; 301 | position: absolute; 302 | border: 1px solid rgba(0,0,0,.15); 303 | display: block; 304 | } 305 | .hte-task-contextmenu > li{ 306 | font-size: 13px; 307 | position: relative; 308 | 309 | } 310 | .hte-task-contextmenu > li a:hover{ 311 | background-color: #1f5bb7; 312 | color: white; 313 | } 314 | .hte-task-contextmenu > li>a{ 315 | padding: 4px 30px 4px 20px; 316 | color: black; 317 | font-size: 13px; 318 | display: block; 319 | white-space: nowrap; 320 | 321 | } 322 | .hte-task-contextmenu > li>a span{ 323 | width: 13px; 324 | height: 13px; 325 | display: inline-block; 326 | } 327 | .hte-task-contextmenu .divider{ 328 | margin: 4px 0px; 329 | height: 1px; 330 | background-color: #e5e5e5; 331 | overflow: hidden; 332 | } 333 | .outBox-icon{ 334 | overflow-y:hidden; 335 | position: relative; 336 | width: 100%; 337 | height: 94%; 338 | } 339 | .auto{ 340 | 341 | } 342 | .hte-shortcut{ 343 | position: absolute; 344 | width: 72px; 345 | height: 72px; 346 | color: white; 347 | cursor:pointer; 348 | transition:.2s; 349 | transition-property:transform,left,top; 350 | z-index:2; 351 | } 352 | #iconPage .hte-shortcut-bg{background-color:rgba(255,255,255,0.6);} 353 | .outBox-middle-icon .hte-shortcut{width:100px;height:100px;} 354 | .outBox-middle-icon .hte-shortcut img{width:50px;height:50px;left:25px;top:20px;} 355 | 356 | .hte-shortcut-copy{ 357 | position: absolute; 358 | width: 72px; 359 | height: 72px; 360 | color: white; 361 | cursor: pointer; 362 | } 363 | .hte-shortcut img, .hte-shortcut-copy img{ 364 | width:36px; 365 | height: 36px; 366 | position: absolute; 367 | top:12px; 368 | left: 18px; 369 | } 370 | .hte-shortcut p.hte-shortcut-name, .hte-shortcut-copy p.hte-shortcut-name { 371 | position: absolute; 372 | bottom: 0; 373 | left: 0; 374 | height: 20px; 375 | line-height: 20px; 376 | font-size: 12px; 377 | text-align: center; 378 | text-overflow:ellipsis; 379 | width: 100%; 380 | } 381 | /*响应式设置*/ 382 | 383 | @media all and(max-width:600px){ 384 | 385 | .outWrap{ 386 | display: none; 387 | } 388 | } -------------------------------------------------------------------------------- /images/about.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/about.png -------------------------------------------------------------------------------- /images/background/10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/background/10.jpg -------------------------------------------------------------------------------- /images/background/100yi.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/background/100yi.png -------------------------------------------------------------------------------- /images/background/11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/background/11.jpg -------------------------------------------------------------------------------- /images/background/142043.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/background/142043.jpg -------------------------------------------------------------------------------- /images/background/Wood.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/background/Wood.jpg -------------------------------------------------------------------------------- /images/background/Yuanye.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/background/Yuanye.jpg -------------------------------------------------------------------------------- /images/background/adf28bd4530214450153070163890009.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/background/adf28bd4530214450153070163890009.png -------------------------------------------------------------------------------- /images/background/aiqiyi.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/background/aiqiyi.png -------------------------------------------------------------------------------- /images/background/angryBird.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/background/angryBird.png -------------------------------------------------------------------------------- /images/background/baiducloud.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/background/baiducloud.png -------------------------------------------------------------------------------- /images/background/baiduditu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/background/baiduditu.png -------------------------------------------------------------------------------- /images/background/cangba.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/background/cangba.png -------------------------------------------------------------------------------- /images/background/cangbaico.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/background/cangbaico.png -------------------------------------------------------------------------------- /images/background/cloud.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/background/cloud.jpg -------------------------------------------------------------------------------- /images/background/duoyun.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/background/duoyun.png -------------------------------------------------------------------------------- /images/background/kugoumusic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/background/kugoumusic.png -------------------------------------------------------------------------------- /images/background/leishiIco.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/background/leishiIco.png -------------------------------------------------------------------------------- /images/background/leshi.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/background/leshi.png -------------------------------------------------------------------------------- /images/background/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/background/logo.png -------------------------------------------------------------------------------- /images/background/meituan.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/background/meituan.png -------------------------------------------------------------------------------- /images/background/mycallmenu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/background/mycallmenu.png -------------------------------------------------------------------------------- /images/background/newsQQ.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/background/newsQQ.png -------------------------------------------------------------------------------- /images/background/preloader.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/background/preloader.gif -------------------------------------------------------------------------------- /images/background/progressOn.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/background/progressOn.png -------------------------------------------------------------------------------- /images/background/qichezhijia.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/background/qichezhijia.png -------------------------------------------------------------------------------- /images/background/qqclock.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/background/qqclock.png -------------------------------------------------------------------------------- /images/background/shizhong.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/background/shizhong.png -------------------------------------------------------------------------------- /images/background/taobao.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/background/taobao.png -------------------------------------------------------------------------------- /images/background/wallpaper.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/background/wallpaper.jpg -------------------------------------------------------------------------------- /images/background/wangyi.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/background/wangyi.png -------------------------------------------------------------------------------- /images/background/weiyun.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/background/weiyun.png -------------------------------------------------------------------------------- /images/background/xiecheangico.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/background/xiecheangico.png -------------------------------------------------------------------------------- /images/background/xiecheng.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/background/xiecheng.png -------------------------------------------------------------------------------- /images/background/xinlangimg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/background/xinlangimg.png -------------------------------------------------------------------------------- /images/background/yingyongshop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/background/yingyongshop.png -------------------------------------------------------------------------------- /images/background/youdao.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/background/youdao.png -------------------------------------------------------------------------------- /images/background/youdaobiji.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/background/youdaobiji.png -------------------------------------------------------------------------------- /images/background/youdaocd.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/background/youdaocd.png -------------------------------------------------------------------------------- /images/background/youtube.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/background/youtube.png -------------------------------------------------------------------------------- /images/background/zhihu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/background/zhihu.png -------------------------------------------------------------------------------- /images/close.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/close.png -------------------------------------------------------------------------------- /images/desktop/1.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/desktop/1.mp3 -------------------------------------------------------------------------------- /images/desktop/10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/desktop/10.jpg -------------------------------------------------------------------------------- /images/desktop/100yi.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/desktop/100yi.png -------------------------------------------------------------------------------- /images/desktop/11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/desktop/11.jpg -------------------------------------------------------------------------------- /images/desktop/142043.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/desktop/142043.jpg -------------------------------------------------------------------------------- /images/desktop/Wood.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/desktop/Wood.jpg -------------------------------------------------------------------------------- /images/desktop/adf28bd4530214450153070163890009.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/desktop/adf28bd4530214450153070163890009.png -------------------------------------------------------------------------------- /images/desktop/aiqiyi.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/desktop/aiqiyi.png -------------------------------------------------------------------------------- /images/desktop/angryBird.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/desktop/angryBird.png -------------------------------------------------------------------------------- /images/desktop/appfolder.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/desktop/appfolder.png -------------------------------------------------------------------------------- /images/desktop/baiducloud.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/desktop/baiducloud.png -------------------------------------------------------------------------------- /images/desktop/baiduditu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/desktop/baiduditu.png -------------------------------------------------------------------------------- /images/desktop/black_about.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/desktop/black_about.png -------------------------------------------------------------------------------- /images/desktop/black_all.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/desktop/black_all.png -------------------------------------------------------------------------------- /images/desktop/black_guanli.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/desktop/black_guanli.png -------------------------------------------------------------------------------- /images/desktop/black_shezhi.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/desktop/black_shezhi.png -------------------------------------------------------------------------------- /images/desktop/black_shichang.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/desktop/black_shichang.png -------------------------------------------------------------------------------- /images/desktop/black_user.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/desktop/black_user.png -------------------------------------------------------------------------------- /images/desktop/black_xitong.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/desktop/black_xitong.png -------------------------------------------------------------------------------- /images/desktop/black_zhankai.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/desktop/black_zhankai.png -------------------------------------------------------------------------------- /images/desktop/block.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/desktop/block.png -------------------------------------------------------------------------------- /images/desktop/cangba.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/desktop/cangba.png -------------------------------------------------------------------------------- /images/desktop/cangbaico.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/desktop/cangbaico.png -------------------------------------------------------------------------------- /images/desktop/clock.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/desktop/clock.png -------------------------------------------------------------------------------- /images/desktop/cloud.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/desktop/cloud.jpg -------------------------------------------------------------------------------- /images/desktop/duoyun.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/desktop/duoyun.png -------------------------------------------------------------------------------- /images/desktop/kugoumusic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/desktop/kugoumusic.png -------------------------------------------------------------------------------- /images/desktop/leishiIco.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/desktop/leishiIco.png -------------------------------------------------------------------------------- /images/desktop/leshi.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/desktop/leshi.png -------------------------------------------------------------------------------- /images/desktop/lock.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/desktop/lock.png -------------------------------------------------------------------------------- /images/desktop/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/desktop/logo.png -------------------------------------------------------------------------------- /images/desktop/meituan.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/desktop/meituan.png -------------------------------------------------------------------------------- /images/desktop/musicpeo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/desktop/musicpeo.jpg -------------------------------------------------------------------------------- /images/desktop/mycallmenu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/desktop/mycallmenu.png -------------------------------------------------------------------------------- /images/desktop/myfolder.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/desktop/myfolder.png -------------------------------------------------------------------------------- /images/desktop/newsQQ.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/desktop/newsQQ.png -------------------------------------------------------------------------------- /images/desktop/next.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/desktop/next.png -------------------------------------------------------------------------------- /images/desktop/out.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/desktop/out.png -------------------------------------------------------------------------------- /images/desktop/pause.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/desktop/pause.png -------------------------------------------------------------------------------- /images/desktop/play.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/desktop/play.png -------------------------------------------------------------------------------- /images/desktop/preloader.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/desktop/preloader.gif -------------------------------------------------------------------------------- /images/desktop/progressOn.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/desktop/progressOn.png -------------------------------------------------------------------------------- /images/desktop/qichezhijia.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/desktop/qichezhijia.png -------------------------------------------------------------------------------- /images/desktop/qq.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/desktop/qq.png -------------------------------------------------------------------------------- /images/desktop/qqclock.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/desktop/qqclock.png -------------------------------------------------------------------------------- /images/desktop/shizhong.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/desktop/shizhong.png -------------------------------------------------------------------------------- /images/desktop/taobao.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/desktop/taobao.png -------------------------------------------------------------------------------- /images/desktop/turn.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/desktop/turn.png -------------------------------------------------------------------------------- /images/desktop/wallpaper.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/desktop/wallpaper.jpg -------------------------------------------------------------------------------- /images/desktop/wangyi.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/desktop/wangyi.png -------------------------------------------------------------------------------- /images/desktop/weiyun.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/desktop/weiyun.png -------------------------------------------------------------------------------- /images/desktop/xiecheangico.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/desktop/xiecheangico.png -------------------------------------------------------------------------------- /images/desktop/xiecheng.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/desktop/xiecheng.png -------------------------------------------------------------------------------- /images/desktop/xinlangimg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/desktop/xinlangimg.png -------------------------------------------------------------------------------- /images/desktop/yingyongshop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/desktop/yingyongshop.png -------------------------------------------------------------------------------- /images/desktop/youdao.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/desktop/youdao.png -------------------------------------------------------------------------------- /images/desktop/youdaobiji.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/desktop/youdaobiji.png -------------------------------------------------------------------------------- /images/desktop/youdaocd.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/desktop/youdaocd.png -------------------------------------------------------------------------------- /images/desktop/youtube.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/desktop/youtube.png -------------------------------------------------------------------------------- /images/desktop/zhihu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/desktop/zhihu.png -------------------------------------------------------------------------------- /images/fankui.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/fankui.png -------------------------------------------------------------------------------- /images/folder/CSS-Edit.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/folder/CSS-Edit.png -------------------------------------------------------------------------------- /images/folder/Candy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/folder/Candy.png -------------------------------------------------------------------------------- /images/folder/Flash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/folder/Flash.png -------------------------------------------------------------------------------- /images/folder/Front-Row.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/folder/Front-Row.png -------------------------------------------------------------------------------- /images/folder/Maya.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/folder/Maya.png -------------------------------------------------------------------------------- /images/folder/Photobooth.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/folder/Photobooth.png -------------------------------------------------------------------------------- /images/folder/Picture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/folder/Picture.png -------------------------------------------------------------------------------- /images/folder/Reader.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/folder/Reader.png -------------------------------------------------------------------------------- /images/folder/Voice-Candy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/folder/Voice-Candy.png -------------------------------------------------------------------------------- /images/folder/backriver.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/folder/backriver.mp3 -------------------------------------------------------------------------------- /images/folder/baihualin.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/folder/baihualin.mp3 -------------------------------------------------------------------------------- /images/folder/music.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/folder/music.png -------------------------------------------------------------------------------- /images/folder/musicPic01.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/folder/musicPic01.jpeg -------------------------------------------------------------------------------- /images/folder/musicPic02.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/folder/musicPic02.jpeg -------------------------------------------------------------------------------- /images/folder/myVideo.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/folder/myVideo.mp4 -------------------------------------------------------------------------------- /images/folder/pic01.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/folder/pic01.jpeg -------------------------------------------------------------------------------- /images/folder/pic01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/folder/pic01.jpg -------------------------------------------------------------------------------- /images/folder/pic02.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/folder/pic02.jpeg -------------------------------------------------------------------------------- /images/folder/pic03.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/folder/pic03.jpeg -------------------------------------------------------------------------------- /images/folder/video_play.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/folder/video_play.png -------------------------------------------------------------------------------- /images/list.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/list.png -------------------------------------------------------------------------------- /images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/logo.png -------------------------------------------------------------------------------- /images/open.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/open.png -------------------------------------------------------------------------------- /images/preloader.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/preloader.gif -------------------------------------------------------------------------------- /images/shezhi.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/shezhi.png -------------------------------------------------------------------------------- /images/shili.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/shili.png -------------------------------------------------------------------------------- /images/suoxiao-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/suoxiao-1.png -------------------------------------------------------------------------------- /images/suoxiao.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/suoxiao.png -------------------------------------------------------------------------------- /images/tongxun.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/tongxun.png -------------------------------------------------------------------------------- /images/turn.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/turn.png -------------------------------------------------------------------------------- /images/user.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/user.png -------------------------------------------------------------------------------- /images/xitong.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/xitong.png -------------------------------------------------------------------------------- /images/xixin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/xixin.png -------------------------------------------------------------------------------- /images/yingyong.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/yingyong.png -------------------------------------------------------------------------------- /images/youdao.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RiversCoder/web_desktop_application/f328b3d8fc99910349bc365a13cc1d480781da13/images/youdao.png -------------------------------------------------------------------------------- /js/cj_about.js: -------------------------------------------------------------------------------- 1 | !function(){ 2 | var auto_con=document.getElementById('auto_con'); 3 | var cjmessager=auto_con.getElementsByClassName('cjmessager')[0]; 4 | var taskbar_action_right=document.getElementsByClassName('hte-taskbar-action-right')[0];//底部右边栏 5 | 6 | var sure=cjmessager.children[1].getElementsByTagName('button')[0]; 7 | var canSure=cjmessager.children[0].getElementsByTagName('button'); 8 | 9 | //右键菜单 10 | var dkClick = document.getElementById('dkClick'); 11 | var dkList = dkClick.getElementsByTagName('li'); 12 | 13 | 14 | dkList[2].onclick = function(ev){ 15 | 16 | ev.cancelBubble = true; 17 | forView(); 18 | 19 | }; 20 | dkList[3].onclick = function(ev){ 21 | 22 | ev.cancelBubble = true; 23 | forAbout(); 24 | }; 25 | 26 | //点击关于弹出欢迎界面和确定 27 | taskbar_action_right.children[2].addEventListener('click',forAbout); 28 | function forAbout(){ 29 | cjmessager.children[1].style.backgroundColor=css(setColor[0], 'background-color'); 30 | 31 | cjmessager.style.display='block'; 32 | cjmessager.children[0].style.display='none'; 33 | cjmessager.children[1].style.display='block'; 34 | dkClick.style.display = 'none'; 35 | } 36 | sure.addEventListener('click',forSure); 37 | function forSure(){ 38 | cjmessager.style.display=''; 39 | } 40 | 41 | //点击意见反馈和确定取消 42 | taskbar_action_right.children[1].addEventListener('click',forView); 43 | function forView(){ 44 | cjmessager.children[0].style.backgroundColor=css(setColor[0], 'background-color'); 45 | 46 | cjmessager.style.display='block'; 47 | cjmessager.children[0].style.display='block'; 48 | cjmessager.children[1].style.display='none'; 49 | dkClick.style.display = 'none'; 50 | } 51 | canSure[0].addEventListener('click',forSure); 52 | canSure[1].addEventListener('click',forSure); 53 | 54 | /* //右下角点击即时通讯 55 | var msg=document.getElementsByClassName('msg')[0]; 56 | taskbar_action_right.children[0].onclick = function(){ 57 | 58 | alert('应用市场暂未开放'); 59 | }; 60 | taskbar_action_right.children[1].addEventListener('click',function(){ 61 | 62 | 63 | alert('游客不能使用即时通讯功能'); 64 | });*/ 65 | }(); -------------------------------------------------------------------------------- /js/cj_index.js: -------------------------------------------------------------------------------- 1 | var cj_show = document.getElementsByClassName('hte-quickbar-show')[0]; 2 | var cj_quickbar = document.getElementsByClassName('hte-quickbar')[0]; 3 | var cj_barheader = document.getElementsByClassName('hte-quickbar-header')[0]; 4 | var cj_htetask = document.getElementsByClassName('hte-task-bottom')[0]; 5 | var outBoxicon = document.getElementsByClassName('outBox-icon')[0]; 6 | 7 | cj_barheader.onclick = function() { 8 | cj_quickbar.style.left = '-80px'; 9 | cj_show.style.left = '0px'; 10 | }; 11 | cj_show.onclick = function() { 12 | cj_quickbar.style.left = '0px'; 13 | cj_show.style.left = '-36px'; 14 | }; 15 | 16 | 17 | //获得位置 18 | function getPos(obj) { 19 | return obj.getBoundingClientRect(); 20 | } 21 | 22 | /////磁贴界面滚动条 23 | var scrollbar = document.getElementsByClassName('scrollbar')[0]; 24 | var slider = scrollbar.getElementsByClassName('slider')[0]; 25 | var flex_module_wrap = document.getElementsByClassName('flex_module_wrap')[0]; 26 | var modulesWrap = document.getElementsByClassName('modulesWrap')[0]; 27 | slider.addEventListener('mousedown', forslider); 28 | 29 | function forslider(ev) { 30 | var ev = ev || event; 31 | var disy = ev.clientY - this.offsetTop; 32 | document.addEventListener('mousemove', forslider2); 33 | 34 | function forslider2(ev) { 35 | var t = ev.clientY - disy; 36 | if(t < 0) { t = 0; } 37 | if(t > scrollbar.clientHeight - slider.clientHeight) { 38 | t = scrollbar.clientHeight - slider.clientHeight; 39 | } 40 | slider.style.top = t + 'px'; 41 | var scale = t / (scrollbar.clientHeight - slider.clientHeight); 42 | flex_module_wrap.style.top = scale * (window.innerHeight - 65 - 35 - flex_module_wrap.clientHeight) + 'px'; 43 | }; 44 | document.addEventListener('mouseup', forslider3); 45 | 46 | function forslider3() { 47 | document.removeEventListener('mousemove', forslider2); 48 | }; 49 | ev.preventDefault(); 50 | }; 51 | //鼠标滚轮 52 | modulesWrap.onmousewheel = wheel; 53 | 54 | function wheel(ev) { 55 | var detail; 56 | var y = slider.offsetTop; 57 | if(ev.wheelDelta) { 58 | detail = ev.wheelDelta; 59 | 60 | } else { 61 | detail = -ev.detail; 62 | } 63 | if(detail > 0) { //上正 64 | y -= 20; 65 | } else { 66 | y += 20; 67 | } 68 | //限制滚动条范围 69 | if(y < 0) y = 0; 70 | if(y > scrollbar.clientHeight - slider.offsetHeight) y = scrollbar.clientHeight - slider.offsetHeight; 71 | var scale = y / (slider.clientHeight - scrollbar.offsetHeight); 72 | var value = -scale * (window.innerHeight - 65 - 35 - flex_module_wrap.clientHeight); 73 | slider.style.top = y + 'px'; 74 | flex_module_wrap.style.top = value + 'px'; 75 | } 76 | 77 | //改变主题颜色 78 | var taskbarActionRight = document.getElementsByClassName('hte-taskbar-action-right')[0]; //底部右栏 79 | var indt = document.getElementsByClassName('indt')[0]; 80 | var theme_tit = document.getElementsByClassName('theme_tit')[0]; 81 | var theme_tit_udline = document.getElementsByClassName('theme_tit_udline')[0]; 82 | var theme_content = document.getElementsByClassName('theme_content'); 83 | var theme_content_pack = document.getElementsByClassName('theme_content_pack')[0]; 84 | //点击弹出个性化设置 85 | taskbarActionRight.children[0].addEventListener('click', forSet); 86 | 87 | function forSet(ev) { 88 | 89 | 90 | indt.style.display = 'block'; 91 | indt.style.right = indt.offsetWidth + 'px'; 92 | 93 | ev.stopPropagation(); 94 | theme_content_pack.style.height = window.innerHeight - 72 - 65 - 20 + 'px'; 95 | if(theme_content[0].style.display != 'none') { 96 | fnPd(); 97 | } 98 | themescro.style.left = theme_content_pack.offsetWidth - 12 + 'px'; 99 | 100 | } 101 | //点击隐藏个性设置 102 | document.addEventListener('click', forSetno); 103 | 104 | function forSetno() { 105 | indt.style.right = 0; 106 | //indt.style.display = ''; 107 | }; 108 | indt.addEventListener('click', forCb); 109 | 110 | function forCb(ev) { 111 | ev.stopPropagation(); 112 | }; 113 | //点击主题 114 | theme_tit.children[1].addEventListener('click', forTheme); 115 | 116 | function forTheme(ev) { 117 | themeslider.style.top = 0; 118 | theme_content[0].style.display = 'block'; 119 | theme_content[1].style.display = 'none'; 120 | theme_tit_udline.style.left = ''; 121 | theme_content_pack.style.height = window.innerHeight - 72 - 65 - 20 + 'px'; 122 | fnPd(); 123 | themescro.style.left = theme_content_pack.offsetWidth - 12 + 'px'; 124 | } 125 | //点击背景 126 | theme_tit.children[2].addEventListener('click', forBg); 127 | 128 | function forBg(ev) { 129 | themeslider.style.top = 0; 130 | theme_content[1].style.top = 0; 131 | themescro.style.display = 'block'; 132 | theme_content[0].style.display = 'none'; 133 | theme_content[1].style.display = 'block'; 134 | theme_tit_udline.style.left = theme_tit_udline.parentNode.offsetWidth / 2 + 'px'; 135 | } 136 | 137 | //页面高度变化个性设置出现滚动条 138 | var themeslider = document.getElementsByClassName('themeslider')[0]; 139 | var themescro = document.getElementsByClassName('themescro')[0]; 140 | 141 | window.addEventListener('resize', function() { 142 | 143 | indt.style.height = window.innerHeight + 'px'; 144 | indt.style.right = 0 + 'px'; 145 | theme_content_pack.style.height = window.innerHeight - 72 - 65 - 20 + 'px'; 146 | 147 | fnPd(); 148 | themescro.style.left = theme_content_pack.offsetWidth - 12 + 'px'; 149 | 150 | if(theme_content[1].style.display == 'block') { 151 | themescro.style.display = 'block'; 152 | theme_tit_udline.style.left = theme_tit_udline.parentNode.offsetWidth / 2 + 'px'; 153 | } 154 | }); 155 | 156 | //按住拖动滚动条 157 | themeslider.addEventListener('mousedown', forTs); 158 | 159 | function forTs(ev) { 160 | var ev = ev || event; 161 | var disy = ev.clientY - this.offsetTop; 162 | document.addEventListener('mousemove', forslider2); 163 | 164 | function forslider2(ev) { 165 | var t = ev.clientY - disy; 166 | if(t < 0) { t = 0; } 167 | if(t > themescro.clientHeight - themeslider.clientHeight) { 168 | t = themescro.clientHeight - themeslider.clientHeight; 169 | } 170 | themeslider.style.top = t + 'px'; 171 | 172 | var scale = t / (themescro.clientHeight - themeslider.clientHeight); 173 | theme_content[0].style.top = scale * (theme_content_pack.clientHeight - theme_content[0].offsetHeight) + 'px'; 174 | theme_content[1].style.top = scale * (theme_content_pack.clientHeight - theme_content[1].offsetHeight) + 'px'; 175 | }; 176 | document.addEventListener('mouseup', forslider3); 177 | 178 | function forslider3() { 179 | document.removeEventListener('mousemove', forslider2); 180 | }; 181 | ev.preventDefault(); 182 | }; 183 | 184 | //添加滚轮 185 | theme_content_pack.onmousewheel = forWheel; 186 | theme_content_pack.addEventListener('DOMMouseScroll', forWheel); 187 | 188 | function forWheel(ev) { 189 | var detail; 190 | if(ev.wheelDelta) { 191 | detail = ev.wheelDelta; 192 | } else { 193 | detail = -ev.detail; 194 | } 195 | var y = themeslider.offsetTop; 196 | var num = 30; 197 | 198 | //最大可以移动距离 199 | var maxH = themescro.clientHeight - themeslider.offsetHeight; 200 | 201 | if(detail < 0) { 202 | y += num; 203 | } else { 204 | y -= num; 205 | } 206 | 207 | //范围限制 208 | if(y < 0) y = 0; 209 | if(y > maxH) y = maxH; 210 | 211 | var scaleY = y / maxH; 212 | 213 | themeslider.style.top = y + 'px'; 214 | var value = (theme_content_pack.clientHeight - theme_content[0].offsetHeight) * scaleY; 215 | var value2 = (theme_content_pack.clientHeight - theme_content[1].offsetHeight) * scaleY; 216 | theme_content[0].style.top = value + 'px'; 217 | theme_content[1].style.top = value2 + 'px'; 218 | } 219 | 220 | //点击变色 221 | var theme_content_bgc = document.getElementsByClassName('theme_content_bgc'); 222 | var hteTaskbar = document.getElementsByClassName('hte-taskbar')[0]; 223 | var setColor = document.getElementsByClassName('setColor'); 224 | 225 | var mbm_title = document.getElementsByClassName('mbm_title'); 226 | for(var i = 0; i < theme_content_bgc.length; i++) { 227 | theme_content_bgc[i].index = i; 228 | theme_content_bgc[i].onclick = function(ev) { 229 | for(var j = 0; j < setColor.length; j++) { 230 | setColor[j].style.backgroundColor = css(this, 'background-color'); 231 | } 232 | hteTaskbar.style.opacity = '.8'; 233 | 234 | }; 235 | } 236 | 237 | //mbm_title移入移出颜色 238 | for(var i = 0; i < mbm_title.length; i++) { 239 | mbm_title[i].addEventListener('mouseover', forHover); 240 | mbm_title[i].addEventListener('mouseout', forOut); 241 | } 242 | 243 | function forHover() { 244 | this.style.backgroundColor = css(setColor[0], 'background-color'); 245 | } 246 | 247 | function forOut() { 248 | this.style.backgroundColor = ''; 249 | } 250 | 251 | //改变背景壁纸 252 | var bgPic = document.getElementsByClassName('theme_content_bgm')[0].getElementsByTagName('img'); 253 | var html = document.getElementsByTagName('html')[0]; 254 | var arrPic = ['./images/background/10.jpg', './images/background/11.jpg', './images/background/cloud.jpg', './images/background/Wood.jpg'] 255 | for(var i = 0; i < bgPic.length; i++) { 256 | bgPic[i].addEventListener('click', changeBg); 257 | } 258 | 259 | function changeBg() { 260 | html.style.backgroundImage = 'url(' + this.src + ')'; 261 | }; 262 | 263 | 264 | function fnPd(){ 265 | if(theme_content[0].offsetHeight - 7 > theme_content_pack.clientHeight) { 266 | themescro.style.display = 'block'; 267 | theme_content[0].style.top = 0; 268 | theme_content[0].style.width = 92 + '%'; 269 | } else { 270 | themescro.style.display = ''; 271 | theme_content[0].style.width = ''; 272 | theme_content[0].style.top = 0; 273 | } 274 | } 275 | //获取css样式 276 | function css(obj, attr) { 277 | return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr]; 278 | } 279 | 280 | //右键菜单 281 | var dkClick = document.getElementById('dkClick'); 282 | var dkList = dkClick.getElementsByTagName('li'); 283 | 284 | 285 | dkList[1].onclick = function(ev){ 286 | 287 | ev.cancelBubble = true; 288 | forSet2(); 289 | }; 290 | 291 | 292 | document.oncontextmenu = function(ev){ 293 | 294 | var ev = ev||event; 295 | dkClick.style.display = 'block'; 296 | dkClick.style.left = ev.clientX + 'px'; 297 | dkClick.style.top = ev.clientY + 'px'; 298 | return false; 299 | }; 300 | 301 | function forSet2(){ 302 | dkClick.style.display = 'none'; 303 | 304 | indt.style.display = 'block'; 305 | indt.style.right = indt.offsetWidth + 'px'; 306 | 307 | theme_content_pack.style.height = window.innerHeight - 72 - 65 - 20 + 'px'; 308 | if(theme_content[0].style.display != 'none') { 309 | fnPd(); 310 | } 311 | themescro.style.left = theme_content_pack.offsetWidth - 12 + 'px'; 312 | } -------------------------------------------------------------------------------- /js/dkCSSJS.js: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /js/dkHTML.js: -------------------------------------------------------------------------------- 1 | var dkCSS = ['./css/cj_index.css','./css/desktop.css']; 2 | var dkJS = [ 3 | './js/dk_data.js', 4 | './js/cj_index.js', 5 | './js/dk_desk.js', 6 | './js/pb_right.js', 7 | './js/cj_about.js' 8 | ]; 9 | 10 | var dkHTML = ` 11 | 12 | 13 |
14 |
15 | HteOS-与众不同的web 16 |

正在加载应用...

17 |
18 |
19 | 20 | 21 |
22 | 23 |
24 |
25 | HteOS-与众不同的web 26 |

正在加载应用...

27 |
28 |
29 | 30 |
31 | 32 |
33 |
34 |
35 | 36 |
37 | 38 |
39 | 40 | 41 |
42 |
43 | 44 |
45 |
46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 |
57 |
58 | 59 | 60 |
61 | 62 |
63 | 64 | 65 | 66 |
67 | 68 |
69 | 73 |
74 | 75 | 76 |
77 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 |
87 |
88 | 89 | 90 | 93 |
94 | 95 |
96 |

97 | 我的HteOS 98 |

99 |
100 |
101 | 102 |
103 | 104 | 140 |
141 |
142 | 143 |
144 | 145 |
146 | 147 |
148 |
149 | 150 |
151 |
152 | 153 |
154 |
155 | 156 |
157 |
158 | 159 |
160 |
161 | 162 |
163 | 171 |
172 |
173 |
174 |
175 |
176 | 185 |
186 | 187 |
188 | 189 | 201 |
202 | 203 | 206 |
207 | 208 |
209 |

210 | 应用管理 211 |

212 |
213 | 214 |
215 | 216 |
217 | 218 |
219 |
220 | 221 |
222 |
公司新闻
223 |
224 |
225 | 226 |
227 |
腾讯新闻
228 |
229 |
230 | 233 | 247 |
248 |
249 |
250 |
251 |
252 | 255 |
256 | 257 |
258 |

259 | 个性化设置 260 |

261 |
262 | 263 |
264 | 265 |
266 | 267 |
268 |
269 | 270 |

主题

271 |

背景

272 |
273 | 274 |
275 | 276 |
277 |
278 |
279 |
280 |
281 |
282 |
283 |
284 |
285 |
286 |
287 |
288 |
289 |
    290 | 291 |
  • 292 | 293 |
    • 294 |
  • 295 | 296 |
    • 297 |
  • 298 | 299 |
    • 300 |
  • 301 | 302 |
    • 303 |
  • 304 | 305 |
    • 306 |
307 | 308 |
309 |
310 |
311 | 312 |
313 |
314 |
315 | 318 | 319 | 320 |
321 | 322 |
323 |
324 | 325 | 326 | HteOS- 327 | 与众不同 Web 328 | 329 |
330 |
331 | 332 | 333 | 334 |
335 | 336 | 337 |
338 | 339 |
340 | 341 | 342 | 343 |
344 | 345 |
346 | 347 |
348 |
349 | 356 | 377 | 378 |
379 |
380 |

意见反馈

381 |

我们迫切希望得到您有价值的反馈，有您的反馈，我们会做的更好！

382 | 383 | 384 | 385 | 386 |
387 | 388 | 389 |
390 |

欢迎

391 |

感谢您关注HteOS，HteOS是一个全新的Web桌面应用开发框架！

392 |
    393 |
  • 全新UI设计、多套皮肤，使用动态磁贴技术灵活配置，完美适配PC端和移动端
    • 394 |
  • 模块化开发模式，使用SASS进行CSS皮肤设置，使用Grunt自动编译生成文档
    • 395 |
  • 磁贴和图标两种桌面模式，兼容Chrome、Firefox、Edge、IE8+等主流浏览器
    • 396 |
  • 纯前端框架，不依赖于后台语言，与Java、.NET、PHP等服务器平台无缝集成
    • 397 |
398 |

如果您对HteOS有问题或意见，欢迎提出，谢谢。

399 | 400 |
401 |
402 | 403 |
404 | 405 |
406 | 407 | 408 | 409 | 410 |
411 | 412 | 413 |
414 |
415 |
416 | 419 | 420 | 421 | 422 | 423 |
424 |
425 | 428 |
429 | 430 | 431 | 432 | 438 | 439 | 440 |
441 | 442 | `; 443 | 444 | 445 | -------------------------------------------------------------------------------- /js/dk_data.js: -------------------------------------------------------------------------------- 1 | var Desktop = 2 | { 3 | //主页 相关数据 4 | homepage : 5 | { 6 | stickDesktop : //磁贴桌面 7 | { 8 | title : 9 | { 10 | logo : './images/logo.png', 11 | text : 'HteOS 与众不同的 Web', 12 | }, 13 | module : //磁贴模块 14 | { 15 | //模块一 ：新闻类模块 16 | news : 17 | { 18 | title : '公司新闻', 19 | content : 20 | [ 21 | { 22 | id : 11, 23 | title : '图片新闻', 24 | image : './images/desktop/newsQQ.png' 25 | }, 26 | { 27 | id : 12, 28 | title : '应用市场', 29 | image : './images/desktop/adf28bd4530214450153070163890009.png' 30 | }, 31 | { 32 | id : 13, 33 | title : '新浪新闻', 34 | image:'./images/desktop/xinlangimg.png', 35 | text : 36 | [ 37 | { 38 | text : '收评：恒指跌0.62%失守24000点 瑞声科技领跌蓝…', 39 | classify : '财经', 40 | time : '2017-2-24 16:14', 41 | href : '' 42 | }, 43 | { 44 | text : '巴萨携手观澜湖集团共建足校 将克隆拉马西亚青训体系', 45 | classify : '体育', 46 | time : '2017-2-24 16:13', 47 | href : '' 48 | }, 49 | { 50 | text : '新浪3X3黄金联赛携手我奥篮球 开启大数据时代', 51 | classify : '体育', 52 | time : '2017-2-24 16:13', 53 | href : '' 54 | }, 55 | { 56 | text : '《耳畔》阎维文曝年轻时被批瞎唱 自侃招人恨', 57 | classify : '娱乐', 58 | time : '2017-2-24 16:13', 59 | href : '' 60 | }, 61 | { 62 | text : '中甲诸强巡礼之毅腾：底蕴之师低调补强阵容', 63 | classify : '体育', 64 | time : '2017-2-24 16:13', 65 | href : '' 66 | }, 67 | { 68 | text : '解决员工住房问题，董明珠马云马化腾刘强东都放了大招', 69 | classify : '科技', 70 | time : '2017-2-24 16:13', 71 | href : '' 72 | }, 73 | { 74 | text : '美民调显示美国人对中国好感度创近30年来新高', 75 | classify : '军事', 76 | time : '2017-2-24 16:13', 77 | href : '' 78 | }, 79 | { 80 | text : '大冶特钢：2016年度净利2.93亿 拟10派2元', 81 | classify : '财经', 82 | time : '2017-2-24 16:13', 83 | href : '' 84 | } 85 | ] 86 | 87 | }, 88 | { 89 | id : 14, 90 | title : '有道词典', 91 | image : './images/desktop/youdao.png' 92 | } 93 | ] 94 | }, 95 | 96 | //模块二 ：任务管理模块 97 | mission : 98 | { 99 | title : '任务管理', 100 | content : 101 | [ 102 | { 103 | id : 15, 104 | title : '淘宝网', 105 | image : './images/desktop/taobao.png', 106 | text : '淘宝网' 107 | }, 108 | { 109 | id : 16, 110 | title : '北京 12 ~ -1℃', 111 | image : './images/desktop/duoyun.png', 112 | text : '多云/微风' 113 | }, 114 | { 115 | id : 17, 116 | title : '星期六', 117 | text : '2017-2-25', 118 | image : './images/desktop/angryBird.png' 119 | } 120 | ] 121 | }, 122 | 123 | //模块三 ：知识文档模块 124 | knowledge : 125 | { 126 | title : '知识文档', 127 | content : 128 | [ 129 | { 130 | id : 18, 131 | title : '音乐播放器', 132 | image : './images/desktop/youtube.png', 133 | content : 134 | [ 135 | { 136 | music : '陪你到终点', 137 | author : '孙子涵', 138 | src : '', 139 | image : './images/desktop/142043.jpg' 140 | }, 141 | { 142 | music : '歌曲名称', 143 | author : '作者', 144 | src : '链接地址', 145 | image : './images/desktop/142043.jpg' 146 | } 147 | ] 148 | 149 | }, 150 | { 151 | id : 19, 152 | title : 'progressOn', 153 | image : './images/desktop/progressOn.png', 154 | text : 'progressOn' 155 | }, 156 | { 157 | id : 20, 158 | title : '微云', 159 | image : './images/desktop/weiyun.png' 160 | }, 161 | { 162 | id : 21, 163 | title : '新浪股票', 164 | image : './images/desktop/youtube.png', 165 | content : 166 | [ 167 | { 168 | text : '卢森创业', 169 | data : '+0.12%', 170 | num : '1940.69' 171 | }, 172 | { 173 | text : '深圳城指', 174 | data : '+0.22%', 175 | num : '1200.69' 176 | }, 177 | { 178 | text : '卢深600', 179 | data : '-0.62%', 180 | num : '1900.69' 181 | }, 182 | { 183 | text : '上证指数', 184 | data : '＋2.62%', 185 | num : '2658.88' 186 | } 187 | ] 188 | } 189 | ] 190 | }, 191 | 192 | //模块四：督查督办 193 | inspector : 194 | { 195 | title : '督查督办', 196 | image : './images/desktop/youtube.png', 197 | content : 198 | [ 199 | { 200 | id : 22, 201 | title : '乐视网', 202 | image : './images/desktop/leshi.png' 203 | }, 204 | { 205 | id : 23, 206 | title : '网易新闻', 207 | image : './images/desktop/wangyi.png' 208 | }, 209 | { 210 | id : 24, 211 | title : '快递100', 212 | image : './images/desktop/100yi.png' 213 | }, 214 | { 215 | id : 25, 216 | title : '携程旅游', 217 | image : './images/desktop/xiecheng.png' 218 | }, 219 | { 220 | id : 26, 221 | title : '美团外卖', 222 | image : './images/desktop/meituan.png' 223 | }, 224 | { 225 | id : 27, 226 | title : '爱奇艺', 227 | image : './images/desktop/aiqiyi.png' 228 | }, 229 | { 230 | id : 28, 231 | title : '知乎', 232 | image : './images/desktop/zhihu.png' 233 | } 234 | ] 235 | }, 236 | 237 | //模块五：流程管理 238 | flowManage : 239 | { 240 | title : '流程管理', 241 | content : 242 | [ 243 | { 244 | id : 29, 245 | title : '有道云笔记', 246 | image : './images/desktop/youdaobiji.png' 247 | }, 248 | { 249 | id : 30, 250 | title : 'Youtube', 251 | image : './images/desktop/youtube.png' 252 | }, 253 | { 254 | id : 31, 255 | title : 'QQ日历', 256 | image : './images/desktop/qqclock.png' 257 | }, 258 | { 259 | id : 32, 260 | title : '唱吧', 261 | image : './images/desktop/cangba.png' 262 | }, 263 | { 264 | id : 33, 265 | title : '酷狗音乐', 266 | image : './images/desktop/kugoumusic.png' 267 | } 268 | ] 269 | }, 270 | 271 | //模块六 ：快速启动 272 | fastStart : 273 | { 274 | title : '快速启动', 275 | content : 276 | [ 277 | { 278 | id : 34, 279 | title : '我的桌面通讯', 280 | image : './images/desktop/mycallmenu.png' 281 | }, 282 | { 283 | id : 35, 284 | title : '百度地图', 285 | image : './images/desktop/baiduditu.png' 286 | }, 287 | { 288 | id : 36, 289 | title : '愤怒的小鸟', 290 | image : './images/desktop/angryBird.png' 291 | }, 292 | { 293 | id : 37, 294 | title : '汽车之家', 295 | image : './images/desktop/qichezhijia.png' 296 | }, 297 | { 298 | id : 38, 299 | title : '个性化设置', 300 | image : './images/desktop/logo.png', 301 | bgImage : './images/desktop/11.jpg' 302 | } 303 | ] 304 | } 305 | 306 | } 307 | }, 308 | bg : //背景相关设置 309 | { 310 | wallpaper : 311 | [ 312 | { 313 | id : 01, 314 | src : './images/background/10.jpg', 315 | title : 'bgImg01' 316 | }, 317 | { 318 | id : 02, 319 | src : './images/background/11.jpg', 320 | title : 'bgImg02' 321 | }, 322 | { 323 | id : 03, 324 | src : './images/background/cloud.jpg', 325 | title : 'bgImg03' 326 | }, 327 | { 328 | id : 04, 329 | src : './images/background/wallpaper.jpg', 330 | title : 'bgImg04' 331 | }, 332 | { 333 | id : 05, 334 | src : './images/background/Wood.jpg', 335 | title : 'bgImg05' 336 | }, 337 | { 338 | id : 06, 339 | src : './images/background/Yuanye.jpg', 340 | title : 'bgImg06' 341 | } 342 | ], 343 | theme : 344 | [ 345 | { 346 | id : 07, 347 | color : 'rgb(31,91,183)' 348 | }, 349 | { 350 | id : 08, 351 | color : 'rgb(89,183,40)' 352 | }, 353 | { 354 | id : 09, 355 | color : 'rgb(155,29,171)' 356 | }, 357 | { 358 | id : 10, 359 | color : 'rgb(204,53,53)' 360 | }, 361 | { 362 | id : 11, 363 | color : 'rgb(208, 150, 21)' 364 | }, 365 | { 366 | id : 12, 367 | color : 'rgb(84, 74, 74)' 368 | } 369 | ] 370 | } 371 | }, 372 | 373 | iconDesktop : //图标桌面 ｜ 应用管理 374 | [ 375 | { 376 | id : 100, 377 | title : '快递100', 378 | image : './images/background/100yi.png' 379 | }, 380 | { 381 | id : 101, 382 | title : '有道云笔记', 383 | image : './images/background/youdaobiji.png' 384 | }, 385 | { 386 | id : 102, 387 | title : '网易新闻', 388 | image : './images/background/wangyi.png' 389 | }, 390 | { 391 | id : 103, 392 | title : 'processOn', 393 | image : './images/background/progressOn.png' 394 | }, 395 | { 396 | id : 104, 397 | title : '新浪新闻', 398 | image : './images/background/xinlangimg.png' 399 | }, 400 | { 401 | id : 105, 402 | title : '时钟', 403 | image : './images/background/shizhong.png' 404 | }, 405 | { 406 | id : 106, 407 | title : 'Youtube', 408 | image : './images/background/youtube.png' 409 | }, 410 | { 411 | id : 107, 412 | title : 'QQ日历', 413 | image : './images/background/qqclock.png' 414 | }, 415 | { 416 | id : 108, 417 | title : '愤怒的小鸟', 418 | image : './images/background/angryBird.png' 419 | }, 420 | { 421 | id : 109, 422 | title : '微云', 423 | image : './images/background/weiyun.png' 424 | }, 425 | { 426 | id : 110, 427 | title : '新浪股市', 428 | image : './images/background/xinlangimg.png' 429 | }, 430 | { 431 | id : 111, 432 | title : '唱吧', 433 | image : './images/background/cangbaico.png' 434 | }, 435 | { 436 | id : 112, 437 | title : '百度地图', 438 | image : './images/background/baiduditu.png' 439 | }, 440 | { 441 | id : 113, 442 | title : '有道词典', 443 | image : './images/background/youdaocd.png' 444 | }, 445 | { 446 | id : 114, 447 | title : '百度天气', 448 | image : './images/background/baiducloud.png' 449 | }, 450 | { 451 | id : 115, 452 | title : '汽车之家', 453 | image : './images/background/qichezhijia.png' 454 | }, 455 | { 456 | id : 116, 457 | title : '应用市场', 458 | image : './images/background/yingyongshop.png' 459 | }, 460 | { 461 | id : 117, 462 | title : '携程旅游', 463 | image : './images/background/xiecheangico.png' 464 | }, 465 | { 466 | id : 118, 467 | title : '酷狗音乐', 468 | image : './images/background/kugoumusic.png' 469 | }, 470 | { 471 | id : 119, 472 | title : '乐视网', 473 | image : './images/background/leishiIco.png' 474 | } 475 | ] 476 | } -------------------------------------------------------------------------------- /js/lgcCss.js: -------------------------------------------------------------------------------- 1 | var lgcCss = 2 | ` 3 | 4 | sqwswqsqwx 5 | 6 | 7 | 8 | `; 9 | 10 | var myCss = 11 | [ 12 | './css/lgc_desktop.css', 13 | './css/lgc_iconDesktop.css', 14 | './media/css/media.css' 15 | ] -------------------------------------------------------------------------------- /js/lgcHTML.js: -------------------------------------------------------------------------------- 1 | var lgcHTML = ` 2 | 3 | 4 |
5 |
6 | HteOS-与众不同的web 7 |

正在加载应用...

8 |
9 |
10 | 11 | 12 |
13 | 14 | 15 | 16 | 56 | 57 | 58 | 59 | 60 |
61 | 62 | 63 | 64 | 65 | 66 |
67 |
68 | 1 69 | 1 70 |
71 | 72 | 22 73 | 22 74 | 75 | 76 | 33 77 | 34 78 | 79 |
80 | 81 |
82 | 83 | 84 | 85 |
86 |
<
87 |
88 |
89 | 返回目录 90 | 93 |
94 |
95 | 96 | 97 | 106 |
107 |
108 |
109 | 110 | 111 | 112 |
113 | X 114 | 115 |
116 | 117 | 118 | 119 |
120 | X 121 | 122 |
123 |
124 | 125 | 126 |
127 |
128 | 129 | 130 | 131 |
132 |
133 |
134 |
135 |
136 | 137 | 138 |
139 |
140 |
141 |
142 |
143 | 144 | 145 |
146 |
147 |
148 | 149 | 150 | 151 | 152 | 153 | 154 |
155 | 156 |
157 | 158 | 159 | 160 | 161 |
162 |
163 | 164 |
165 |
166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 |
177 |
178 | 179 | 180 | 181 |
182 | 183 | 184 |
185 | 186 | 187 | 188 |
189 | 190 | 191 | 192 | 193 | 194 |
195 | 215 |
216 | 217 | 218 | 219 | 220 | 221 |
222 | 223 | 224 | 225 | 226 | 227 | 00:00 228 | 229 |
230 |
231 | 232 | 233 | 234 | 235 |
236 | X 237 |

我的应用

238 |
239 | 243 |
244 |
245 | 246 | 247 | 248 | 249 |
250 | 258 |
259 | 260 | 261 | 262 | 263 | 264 | 285 |
286 | 287 | 288 | 289 | 290 | 291 |
292 | 293 |
294 |

295 | 个性化设置 296 |

297 |
298 | 299 |
300 | 301 |
302 | 303 |
304 |
305 | 306 |

主题

307 |

背景

308 |
309 | 310 |
311 | 312 |
313 |
314 |
315 |
316 |
317 |
318 |
319 |
320 |
321 |
322 |
323 |
324 |
325 |
    326 |
  • 327 | 328 |
    • 329 |
  • 330 | 331 |
    • 332 |
  • 333 | 334 |
    • 335 |
  • 336 | 337 |
    • 338 |
  • 339 | 340 |
    • 341 |
  • 342 | 343 |
    • 344 |
345 |
346 |
347 |
348 | 349 |
350 |
351 |
352 | 353 | 354 | 355 | 356 |
357 | 358 |
359 |

360 | 我的HteOS 361 |

362 |
363 |
364 | 365 |
366 | 367 | 403 |
404 |
405 | 406 |
407 | 408 |
409 | 410 |
411 |
412 | 413 |
414 |
415 | 416 |
417 |
418 | 419 |
420 |
421 | 422 |
423 |
424 | 425 |
426 | 434 |
435 |
436 |
437 |
438 |
439 | 448 |
449 | 450 |
451 | 452 | 453 |
454 | 460 | 466 |
467 |
468 | 469 | 470 | 471 | 472 | 473 | 474 | 475 | 476 | 477 | 478 |
479 | 480 |
481 |

482 | 应用管理 483 |

484 |
485 | 486 |
487 | 488 | 489 | 490 |
491 |
492 | 493 |
494 | 503 | 504 |
505 | 510 |
511 |
512 |
513 | 514 | 515 |
516 | 517 | 518 | 519 |
520 |
521 |

意见反馈

522 |

我们迫切希望得到您有价值的反馈，有您的反馈，我们会做的更好！

523 | 524 | 525 | 526 | 527 |
528 | 529 | 530 |
531 |

欢迎

532 |

感谢您关注HteOS，HteOS是一个全新的Web桌面应用开发框架！

533 | 539 |

如果您对HteOS有问题或意见，欢迎提出，谢谢。

540 | 541 |
542 |
543 | 544 | 545 | 546 | 547 | 548 | 549 | 550 | 551 | 565 | 566 | 567 | 568 | 569 | 572 | 573 | 574 | 575 | 579 | 580 | 583 | 584 | 585 | 586 | `; -------------------------------------------------------------------------------- /js/lgcJS.js: -------------------------------------------------------------------------------- 1 | var lgcJs = ` 2 | 3 | 4 | 5 | 8 | 9 | 10 | 11 | 15 | 16 | 19 | 20 | 21 | 22 | 23 | `; 24 | 25 | var arrLgcJs = 26 | [ 27 | { 28 | src : './js/lgc_DesktopaData.js', 29 | content : '', 30 | }, 31 | { 32 | src : './js/lgc_tools.js', 33 | content : '' 34 | }, 35 | { 36 | src : './js/lgc_iconDesktop.js', 37 | content : '' 38 | }, 39 | { 40 | src : '', 41 | content : 'iconDesktop.init();' 42 | }, 43 | { 44 | src : './js/lgc_folderData.js', 45 | content : '' 46 | }, 47 | { 48 | src : './js/lgc_folder.js', 49 | content : '' 50 | }, 51 | { 52 | src : './media/js/media.js', 53 | content : '' 54 | }, 55 | { 56 | src : '', 57 | content : 'Folder.init();media.init();' 58 | }, 59 | { 60 | src : './js/lgc_mark.js', 61 | content : '' 62 | }, 63 | { 64 | src : '', 65 | content : 'mark.init();' 66 | }, 67 | { 68 | src : './js/lgc_myBottomBox.js', 69 | content : '' 70 | }, 71 | { 72 | src : './js/lgc_pb_right.js', 73 | content : '' 74 | }, 75 | { 76 | src : './js/lgc_about.js', 77 | content : '' 78 | } 79 | ]; -------------------------------------------------------------------------------- /js/lgc_DesktopaData.js: -------------------------------------------------------------------------------- 1 | var Desktop = 2 | { 3 | //主页 相关数据 4 | homepage : 5 | { 6 | stickDesktop : //磁贴桌面 7 | { 8 | title : 9 | { 10 | logo : './images/logo.png', 11 | text : 'HteOS 与众不同的 Web', 12 | }, 13 | module : //磁贴模块 14 | { 15 | //模块一 ：新闻类模块 16 | news : 17 | { 18 | title : '公司新闻', 19 | content : 20 | [ 21 | { 22 | id : 11, 23 | title : '图片新闻', 24 | image : './images/desktop/newsQQ.png' 25 | }, 26 | { 27 | id : 12, 28 | title : '应用市场', 29 | image : './images/desktop/adf28bd4530214450153070163890009.png' 30 | }, 31 | { 32 | id : 13, 33 | title : '新浪新闻', 34 | image : './images/desktop/xinlangimg.png', 35 | text : 36 | [ 37 | { 38 | text : '收评：恒指跌0.62%失守24000点 瑞声科技领跌蓝…', 39 | classify : '财经', 40 | time : '2017-2-24 16:14', 41 | href : '' 42 | }, 43 | { 44 | text : '巴萨携手观澜湖集团共建足校 将克隆拉马西亚青训体系', 45 | classify : '体育', 46 | time : '2017-2-24 16:13', 47 | href : '' 48 | }, 49 | { 50 | text : '新浪3X3黄金联赛携手我奥篮球 开启大数据时代', 51 | classify : '体育', 52 | time : '2017-2-24 16:13', 53 | href : '' 54 | }, 55 | { 56 | text : '《耳畔》阎维文曝年轻时被批瞎唱 自侃招人恨', 57 | classify : '娱乐', 58 | time : '2017-2-24 16:13', 59 | href : '' 60 | }, 61 | { 62 | text : '中甲诸强巡礼之毅腾：底蕴之师低调补强阵容', 63 | classify : '体育', 64 | time : '2017-2-24 16:13', 65 | href : '' 66 | }, 67 | { 68 | text : '解决员工住房问题，董明珠马云马化腾刘强东都放了大招', 69 | classify : '科技', 70 | time : '2017-2-24 16:13', 71 | href : '' 72 | }, 73 | { 74 | text : '美民调显示美国人对中国好感度创近30年来新高', 75 | classify : '军事', 76 | time : '2017-2-24 16:13', 77 | href : '' 78 | }, 79 | { 80 | text : '大冶特钢：2016年度净利2.93亿 拟10派2元', 81 | classify : '财经', 82 | time : '2017-2-24 16:13', 83 | href : '' 84 | } 85 | ] 86 | }, 87 | { 88 | id : 14, 89 | title : '有道词典', 90 | image : './images/desktop/youdao.png' 91 | } 92 | ] 93 | }, 94 | 95 | //模块二 ：任务管理模块 96 | mission : 97 | { 98 | title : '任务管理', 99 | content : 100 | [ 101 | { 102 | id : 15, 103 | title : '淘宝网', 104 | image : './images/desktop/taobao.png', 105 | text : '淘宝网' 106 | }, 107 | { 108 | id : 16, 109 | title : '北京 12 ~ -1℃', 110 | image : './images/desktop/duoyun.png', 111 | text : '多云/微风' 112 | }, 113 | { 114 | id : 17, 115 | title : '星期六', 116 | text : '2017-2-25', 117 | image : './images/desktop/duoyun.png', 118 | } 119 | ] 120 | }, 121 | 122 | //模块三 ：知识文档模块 123 | knowledge : 124 | { 125 | title : '知识文档', 126 | content : 127 | [ 128 | { 129 | id : 18, 130 | title : '音乐播放器', 131 | image : './images/desktop/kugoumusic.png', 132 | content : 133 | [ 134 | { 135 | music : '陪你到终点', 136 | author : '孙子涵', 137 | src : '', 138 | image : './images/desktop/142043.jpg' 139 | }, 140 | { 141 | music : '歌曲名称', 142 | author : '作者', 143 | src : '链接地址', 144 | image : './images/desktop/142043.jpg' 145 | } 146 | ] 147 | 148 | }, 149 | { 150 | id : 19, 151 | title : 'progressOn', 152 | image : './images/desktop/progressOn.png', 153 | text : 'progressOn' 154 | }, 155 | { 156 | id : 20, 157 | title : '微云', 158 | image : './images/desktop/weiyun.png' 159 | }, 160 | { 161 | id : 21, 162 | title : '新浪股票', 163 | image : './images/desktop/xinlangimg.png', 164 | content : 165 | [ 166 | { 167 | text : '卢森创业', 168 | data : '+0.12%', 169 | num : '1940.69' 170 | }, 171 | { 172 | text : '深圳城指', 173 | data : '+0.22%', 174 | num : '1200.69' 175 | }, 176 | { 177 | text : '卢深600', 178 | data : '-0.62%', 179 | num : '1900.69' 180 | }, 181 | { 182 | text : '上证指数', 183 | data : '＋2.62%', 184 | num : '2658.88' 185 | } 186 | ] 187 | } 188 | ] 189 | }, 190 | 191 | //模块四：督查督办 192 | inspector : 193 | { 194 | title : '督查督办', 195 | content : 196 | [ 197 | { 198 | id : 22, 199 | title : '乐视网', 200 | image : './images/desktop/leshi.png' 201 | }, 202 | { 203 | id : 23, 204 | title : '网易新闻', 205 | image : './images/desktop/wangyi.png' 206 | }, 207 | { 208 | id : 24, 209 | title : '快递100', 210 | image : './images/desktop/100yi.png' 211 | }, 212 | { 213 | id : 25, 214 | title : '携程旅游', 215 | image : './images/desktop/xiecheng.png' 216 | }, 217 | { 218 | id : 26, 219 | title : '美团外卖', 220 | image : './images/desktop/meituan.png' 221 | }, 222 | { 223 | id : 27, 224 | title : '爱奇艺', 225 | image : './images/desktop/aiqiyi.png' 226 | }, 227 | { 228 | id : 28, 229 | title : '知乎', 230 | image : './images/desktop/zhihu.png' 231 | } 232 | ] 233 | }, 234 | 235 | //模块五：流程管理 236 | flowManage : 237 | { 238 | title : '流程管理', 239 | content : 240 | [ 241 | { 242 | id : 29, 243 | title : '有道云笔记', 244 | image : './images/desktop/youdaobiji.png' 245 | }, 246 | { 247 | id : 30, 248 | title : 'Youtube', 249 | image : './images/desktop/youtube.png' 250 | }, 251 | { 252 | id : 31, 253 | title : 'QQ日历', 254 | image : './images/desktop/qqclock.png' 255 | }, 256 | { 257 | id : 32, 258 | title : '唱吧', 259 | image : './images/desktop/cangba.png' 260 | }, 261 | { 262 | id : 33, 263 | title : '酷狗音乐', 264 | image : './images/desktop/kugoumusic.png' 265 | } 266 | ] 267 | }, 268 | 269 | //模块六 ：快速启动 270 | fastStart : 271 | { 272 | title : '快速启动', 273 | content : 274 | [ 275 | { 276 | id : 34, 277 | title : '我的桌面通讯', 278 | image : './images/desktop/mycallmenu.png' 279 | }, 280 | { 281 | id : 35, 282 | title : '百度地图', 283 | image : './images/desktop/baiduditu.png' 284 | }, 285 | { 286 | id : 36, 287 | title : '愤怒的小鸟', 288 | image : './images/desktop/angryBird.png' 289 | }, 290 | { 291 | id : 37, 292 | title : '汽车之家', 293 | image : './images/desktop/qichezhijia.png' 294 | }, 295 | { 296 | id : 38, 297 | title : '个性化设置', 298 | image : './images/desktop/logo.png', 299 | bgImage : './images/desktop/11.jpg' 300 | } 301 | ] 302 | } 303 | 304 | } 305 | }, 306 | bg : //背景相关设置 307 | { 308 | wallpaper : 309 | [ 310 | { 311 | id : 01, 312 | src : './images/background/10.jpg', 313 | title : 'bgImg01' 314 | }, 315 | { 316 | id : 02, 317 | src : './images/background/11.jpg', 318 | title : 'bgImg02' 319 | }, 320 | { 321 | id : 03, 322 | src : './images/background/cloud.jpg', 323 | title : 'bgImg03' 324 | }, 325 | { 326 | id : 04, 327 | src : './images/background/wallpaper.jpg', 328 | title : 'bgImg04' 329 | }, 330 | { 331 | id : 05, 332 | src : './images/background/Wood.jpg', 333 | title : 'bgImg05' 334 | }, 335 | { 336 | id : 06, 337 | src : './images/background/Yuanye.jpg', 338 | title : 'bgImg06' 339 | } 340 | ], 341 | theme : 342 | [ 343 | { 344 | id : 07, 345 | color : 'rgb(31,91,183)' 346 | }, 347 | { 348 | id : 08, 349 | color : 'rgb(89,183,40)' 350 | }, 351 | { 352 | id : 09, 353 | color : 'rgb(155,29,171)' 354 | }, 355 | { 356 | id : 10, 357 | color : 'rgb(204,53,53)' 358 | }, 359 | { 360 | id : 11, 361 | color : 'rgb(208, 150, 21)' 362 | }, 363 | { 364 | id : 12, 365 | color : 'rgb(84, 74, 74)' 366 | } 367 | ] 368 | } 369 | }, 370 | 371 | iconDesktop : //图标桌面 ｜ 应用管理 372 | [ 373 | { 374 | id : 100, 375 | type : 'app', 376 | title : '快递100', 377 | image : './images/desktop/100yi.png', 378 | url : 'http://www.kuaidi100.com/' 379 | }, 380 | { 381 | id : 101, 382 | type : 'app', 383 | title : '有道云笔记', 384 | image : './images/desktop/youdaobiji.png', 385 | url : 'http://note.youdao.com/' 386 | }, 387 | { 388 | id : 102, 389 | type : 'app', 390 | title : '网易新闻', 391 | image : './images/desktop/wangyi.png', 392 | url : 'http://news.163.com/' 393 | }, 394 | { 395 | id : 103, 396 | type : 'app', 397 | title : 'processOn', 398 | image : './images/desktop/progressOn.png', 399 | url : 'https://www.processon.com/' 400 | }, 401 | { 402 | id : 104, 403 | type : 'app', 404 | title : '新浪新闻', 405 | image : './images/desktop/xinlangimg.png', 406 | url : 'http://news.sina.com.cn/' 407 | }, 408 | { 409 | id : 105, 410 | type : 'app', 411 | title : '时钟', 412 | image : './images/desktop/shizhong.png', 413 | url : 'http://gb.weather.gov.hk/gts/time/clock_uc.html' 414 | }, 415 | { 416 | id : 106, 417 | type : 'app', 418 | title : 'Youtube', 419 | image : './images/desktop/youtube.png', 420 | url : 'http://baike.baidu.com/link?url=wGY9iIpf8dA5QQhp529zDUUxp9nBJCsYzNOgNkzJwOGSeqFcQ0E-976noYodffYUlgEhh8RefYl0cHvhE38Da_' 421 | }, 422 | { 423 | id : 107, 424 | type : 'app', 425 | title : 'QQ日历', 426 | image : './images/desktop/qqclock.png', 427 | url : 'http://qqapp.qq.com/app/100623928.html' 428 | }, 429 | { 430 | id : 108, 431 | type : 'app', 432 | title : '愤怒的小鸟', 433 | image : './images/desktop/angryBird.png', 434 | url : 'http://www.3366.com/flash/49401.shtml' 435 | }, 436 | { 437 | id : 109, 438 | type : 'app', 439 | title : '微云', 440 | image : './images/desktop/weiyun.png', 441 | url : 'https://www.weiyun.com/' 442 | }, 443 | { 444 | id : 110, 445 | type : 'app', 446 | title : '新浪股市', 447 | image : './images/desktop/xinlangimg.png', 448 | url : 'http://finance.sina.com.cn/' 449 | }, 450 | { 451 | id : 116, 452 | type : 'app', 453 | title : '应用市场', 454 | image : './images/desktop/yingyongshop.png', 455 | url : 'http://app.hicloud.com/' 456 | }, 457 | { 458 | id : 117, 459 | type : 'app', 460 | title : '携程旅游', 461 | image : './images/desktop/xiecheangico.png', 462 | url : 'http://www.ctrip.com/' 463 | }, 464 | { 465 | id : 13000, 466 | type : 'appsfolder', 467 | title : '应用合集', 468 | image : './images/desktop/appfolder.png', 469 | url : '', 470 | child : 471 | [ 472 | { 473 | id : 118, 474 | type : 'app', 475 | title : '酷狗音乐', 476 | image : './images/desktop/kugoumusic.png', 477 | url : 'http://web.kugou.com' 478 | }, 479 | { 480 | id : 119, 481 | type : 'app', 482 | title : '乐视网', 483 | image : './images/desktop/leishiIco.png', 484 | url : 'http://www.le.com/' 485 | }, 486 | { 487 | id : 111, 488 | type : 'app', 489 | title : '唱吧', 490 | image : './images/desktop/cangbaico.png', 491 | url : 'http://changba.com/' 492 | }, 493 | { 494 | id : 112, 495 | type : 'app', 496 | title : '百度地图', 497 | image : './images/desktop/baiduditu.png', 498 | url : 'http://map.baidu.com/' 499 | }, 500 | { 501 | id : 113, 502 | type : 'app', 503 | title : '有道词典', 504 | image : './images/desktop/youdaocd.png', 505 | url : 'http://dict.youdao.com/' 506 | }, 507 | { 508 | id : 114, 509 | type : 'app', 510 | title : '百度天气', 511 | image : './images/desktop/baiducloud.png', 512 | url : 'http://weather.mipang.com/tianqi-36551' 513 | }, 514 | { 515 | id : 115, 516 | type : 'app', 517 | title : '汽车之家', 518 | image : './images/desktop/qichezhijia.png', 519 | url : 'http://www.autohome.com.cn/beijing/' 520 | } 521 | ], 522 | url : '' 523 | } 524 | ] 525 | } -------------------------------------------------------------------------------- /js/lgc_about.js: -------------------------------------------------------------------------------- 1 | var cjmessager=document.getElementsByClassName('cjmessager')[0]; 2 | var taskbar_action_right=document.getElementsByClassName('hte-taskbar-action-right')[0];//底部右边栏 3 | 4 | var sure=cjmessager.children[1].getElementsByTagName('button')[0]; 5 | var canSure=cjmessager.children[0].getElementsByTagName('button'); 6 | 7 | var aboutMyIconHetOS = document.getElementById('aboutMyIconHetOS'); 8 | 9 | //点击关于弹出欢迎界面和确定 10 | taskbar_action_right.children[2].addEventListener('click',forAbout); 11 | function forAbout(){ 12 | cjmessager.style.display='block'; 13 | cjmessager.children[0].style.display='none'; 14 | cjmessager.children[1].style.display='block'; 15 | } 16 | 17 | sure.addEventListener('click',forSure); 18 | function forSure(){ 19 | cjmessager.style.display=''; 20 | 21 | } 22 | 23 | aboutMyIconHetOS.onclick = function(ev) 24 | { 25 | forAbout(); 26 | this.parentNode.parentNode.style.display = 'none'; 27 | } 28 | 29 | 30 | //点击意见反馈和确定取消 31 | taskbar_action_right.children[1].addEventListener('click',forView); 32 | function forView(){ 33 | cjmessager.style.display='block'; 34 | cjmessager.children[0].style.display='block'; 35 | cjmessager.children[1].style.display='none'; 36 | console.log('ss'); 37 | } 38 | canSure[0].addEventListener('click',forSure); 39 | canSure[1].addEventListener('click',forSure); 40 | 41 | var lgcIconPageTime = document.getElementById('lgcIconPageTime'); 42 | 43 | var lgcIconPageTimeTimer = null; 44 | 45 | lgcIconPageTimeTimer = setInterval(function(){ 46 | 47 | var date = new Date(); 48 | 49 | var hour = myAddZero(date.getHours()); 50 | var min = myAddZero(date.getMinutes()); 51 | 52 | var str = hour + ':' + min; 53 | 54 | lgcIconPageTime.innerHTML = str; 55 | 56 | },1000); 57 | 58 | 59 | function myAddZero(num) 60 | { 61 | if(num < 10) 62 | { 63 | num = '0' + num; 64 | } 65 | 66 | return num; 67 | } 68 | -------------------------------------------------------------------------------- /js/lgc_folder.js: -------------------------------------------------------------------------------- 1 | var Folder = 2 | { 3 | init : function() 4 | { 5 | this.wrap = tools.$(document,'#folderAreaWrap'); 6 | this.folderOpenBtn = tools.$(this.wrap,'.folderOpenBtn')[0]; 7 | this.folderMenu = tools.$(this.wrap,'.folderMenu')[0]; 8 | this.folderContent = tools.$(this.wrap,'.folderContent')[0]; 9 | 10 | this.data = folderData.folder; 11 | 12 | //切换文件夹框 13 | this.toggleFolder(); 14 | 15 | //生成文件夹列表 16 | this.createFolderList(this.data); 17 | 18 | //顶部菜单列表点击 19 | this.folderBackArr = []; 20 | this.folderMenuClick(this.data); 21 | 22 | //内容文件夹点击 23 | this.conFolderClick(); 24 | 25 | //获取所有父级元素 26 | this.getPsData = []; 27 | this.folderElem = null; 28 | 29 | 30 | /* 图片视频音乐 */ 31 | this.previewPic = document.getElementById('previewPic'); 32 | this.pimg = this.previewPic.getElementsByClassName('pimg')[0]; 33 | 34 | //拖动图片显示 35 | this.dragImg(); 36 | 37 | //关闭图片遮罩层 38 | this.closeImg(); 39 | 40 | }, 41 | toggleFolder : function() 42 | { 43 | var This = this; 44 | 45 | this.folderOpenBtn.onclick = function(ev) 46 | { 47 | var ev = window.event || ev; 48 | 49 | This.wrap.classList.toggle('folderToggle'); 50 | } 51 | }, 52 | createFolderList : function(data,callback) //生成内容 53 | { 54 | var fCon = this.folderContent; 55 | var str = ''; 56 | 57 | for(var i=0;i 61 |
62 |
63 |
64 |

${data[i].title}

65 |

66 |
67 |
68 | `; 69 | } 70 | fCon.innerHTML = str; 71 | 72 | callback&&callback(data); 73 | }, 74 | folderMenuClick : function(data) 75 | { 76 | var This = this; 77 | //this.addBackForData(this.folderBackArr,data); 78 | var backMenu = tools.$(this.folderMenu,'a')[0]; 79 | 80 | backMenu.onclick = function() 81 | { 82 | 83 | //点击渲染上一层 84 | This.createFolderList(This.data); 85 | 86 | //再次添加绑定事件方法 87 | This.conFolderClick(); 88 | } 89 | }, 90 | addBackForData : function(arr,value) 91 | { 92 | 93 | if(arr.length == 0) 94 | { 95 | arr.push(value); 96 | return; 97 | } 98 | 99 | for(var i=0;i= arr.length-1) 104 | { 105 | arr.push(value); 106 | } 107 | } 108 | else 109 | { 110 | break; 111 | } 112 | } 113 | }, 114 | conFolderClick : function() //给每个文件夹添加点击事件 115 | { 116 | var That = this; 117 | var cons = tools.$(this.folderContent,'.fcItem'); 118 | 119 | 120 | //给每个元素的onclick上绑定方法 121 | for(var i=0;i 0)) 197 | { 198 | this.getDataById(id,data[i].child); 199 | } 200 | } 201 | } 202 | }, 203 | forEach : function(arr,callback) 204 | { 205 | for(var i=0;i 58 | 59 |

${data[i].title}

60 | `; 61 | } 62 | 63 | parent.innerHTML = str; 64 | }, 65 | createAppFolderContent : function() 66 | { 67 | var boxs = this.appsFCon; 68 | var str = ''; 69 | 70 | var data = this.icoData; 71 | 72 | for(var i=0;i 80 | 81 |

${data[i].child[j].title}

82 | `; 83 | } 84 | } 85 | } 86 | 87 | boxs.innerHTML = str; 88 | 89 | }, 90 | arrangeIcon : function() 91 | { 92 | var parent = this.outBoxIcon; 93 | var icoChilds = parent.getElementsByClassName('hte-shortcut'); 94 | 95 | var wH = parent.clientHeight; 96 | var oW = icoChilds[0].offsetWidth; 97 | var oH = icoChilds[0].offsetHeight; 98 | 99 | var num = parseInt(wH/(oH+30)); 100 | 101 | //排列图标 102 | for(var i=0;i disW) 140 | { 141 | disX = disW; 142 | } 143 | if(disY > disH) 144 | { 145 | disY = disH; 146 | } 147 | 148 | 149 | 150 | img.style.left = disX + 'px'; 151 | img.style.top = disY + 'px'; 152 | } 153 | 154 | return false; 155 | } 156 | } 157 | } 158 | }; 159 | -------------------------------------------------------------------------------- /js/lgc_myBottomBox.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | //改变主题颜色 5 | var taskbarActionRight = document.getElementsByClassName('hte-taskbar-action-right')[0]; //底部右栏 6 | var indt = document.getElementsByClassName('indt')[0]; 7 | var theme_tit = document.getElementsByClassName('theme_tit')[0]; 8 | var theme_tit_udline = document.getElementsByClassName('theme_tit_udline')[0]; 9 | var theme_content = document.getElementsByClassName('theme_content'); 10 | var theme_content_pack = document.getElementsByClassName('theme_content_pack')[0]; 11 | 12 | var myIconGxHsZ = document.getElementById('myIconGxHsZ'); 13 | 14 | 15 | 16 | 17 | //点击弹出个性化设置 18 | taskbarActionRight.children[0].addEventListener('click', forSet); 19 | myIconGxHsZ.onclick = function(ev) 20 | { 21 | forSet(ev); 22 | this.parentNode.parentNode.style.display = 'none'; 23 | } 24 | 25 | 26 | 27 | 28 | function forSet(ev) { 29 | 30 | indt.style.display = 'block'; 31 | indt.style.right = -indt.offsetWidth + 'px'; 32 | indt.style.opacity = 0; 33 | 34 | setTimeout(function(){ 35 | indt.style.right = 0 + 'px'; 36 | indt.style.opacity = 1; 37 | indt.style.transform = 'translate(0)'; 38 | },30); 39 | 40 | 41 | ev.stopPropagation(); 42 | theme_content_pack.style.height = window.innerHeight - 72 - 65 - 20 + 'px'; 43 | if(theme_content[0].style.display != 'none') { 44 | fnPd(); 45 | } 46 | themescro.style.left = theme_content_pack.offsetWidth - 12 + 'px'; 47 | 48 | } 49 | //点击隐藏个性设置 50 | document.addEventListener('click', forSetno); 51 | 52 | function forSetno() { 53 | 54 | indt.style.right = - indt.offsetWidth + 'px'; 55 | indt.style.opacity = 1; 56 | indt.style.transform = 'translate(100%)'; 57 | setTimeout(function(){ 58 | //indt.style.display = 'none'; 59 | },30); 60 | }; 61 | indt.addEventListener('click', forCb); 62 | 63 | function forCb(ev) { 64 | ev.stopPropagation(); 65 | }; 66 | //点击主题 67 | theme_tit.children[1].addEventListener('click', forTheme); 68 | 69 | function forTheme(ev) { 70 | themeslider.style.top = 0; 71 | theme_content[0].style.display = 'block'; 72 | theme_content[1].style.display = 'none'; 73 | theme_tit_udline.style.left = ''; 74 | theme_content_pack.style.height = window.innerHeight - 72 - 65 - 20 + 'px'; 75 | fnPd(); 76 | themescro.style.left = theme_content_pack.offsetWidth - 12 + 'px'; 77 | } 78 | //点击背景 79 | theme_tit.children[2].addEventListener('click', forBg); 80 | 81 | function forBg(ev) { 82 | themeslider.style.top = 0; 83 | theme_content[1].style.top = 0; 84 | themescro.style.display = 'block'; 85 | theme_content[0].style.display = 'none'; 86 | theme_content[1].style.display = 'block'; 87 | theme_tit_udline.style.left = theme_tit_udline.parentNode.offsetWidth / 2 + 'px'; 88 | } 89 | 90 | //页面高度变化个性设置出现滚动条 91 | var themeslider = document.getElementsByClassName('themeslider')[0]; 92 | var themescro = document.getElementsByClassName('themescro')[0]; 93 | 94 | window.addEventListener('resize', function() { 95 | 96 | indt.style.height = window.innerHeight + 'px'; 97 | //indt.style.right = indt.offsetWidth + 'px'; 98 | theme_content_pack.style.height = window.innerHeight - 72 - 65 - 20 + 'px'; 99 | 100 | fnPd(); 101 | themescro.style.left = theme_content_pack.offsetWidth - 12 + 'px'; 102 | 103 | if(theme_content[1].style.display == 'block') { 104 | themescro.style.display = 'block'; 105 | theme_tit_udline.style.left = theme_tit_udline.parentNode.offsetWidth / 2 + 'px'; 106 | } 107 | }); 108 | 109 | //按住拖动滚动条 110 | themeslider.addEventListener('mousedown', forTs); 111 | 112 | function forTs(ev) { 113 | var ev = ev || event; 114 | var disy = ev.clientY - this.offsetTop; 115 | document.addEventListener('mousemove', forslider2); 116 | 117 | function forslider2(ev) { 118 | var t = ev.clientY - disy; 119 | if(t < 0) { t = 0; } 120 | if(t > themescro.clientHeight - themeslider.clientHeight) { 121 | t = themescro.clientHeight - themeslider.clientHeight; 122 | } 123 | themeslider.style.top = t + 'px'; 124 | 125 | var scale = t / (themescro.clientHeight - themeslider.clientHeight); 126 | theme_content[0].style.top = scale * (theme_content_pack.clientHeight - theme_content[0].offsetHeight) + 'px'; 127 | theme_content[1].style.top = scale * (theme_content_pack.clientHeight - theme_content[1].offsetHeight) + 'px'; 128 | }; 129 | document.addEventListener('mouseup', forslider3); 130 | 131 | function forslider3() { 132 | document.removeEventListener('mousemove', forslider2); 133 | }; 134 | ev.preventDefault(); 135 | }; 136 | 137 | //添加滚轮 138 | theme_content_pack.onmousewheel = forWheel; 139 | theme_content_pack.addEventListener('DOMMouseScroll', forWheel); 140 | 141 | function forWheel(ev) { 142 | var detail; 143 | if(ev.wheelDelta) { 144 | detail = ev.wheelDelta; 145 | } else { 146 | detail = -ev.detail; 147 | } 148 | var y = themeslider.offsetTop; 149 | var num = 30; 150 | 151 | //最大可以移动距离 152 | var maxH = themescro.clientHeight - themeslider.offsetHeight; 153 | 154 | if(detail < 0) { 155 | y += num; 156 | } else { 157 | y -= num; 158 | } 159 | 160 | //范围限制 161 | if(y < 0) y = 0; 162 | if(y > maxH) y = maxH; 163 | 164 | var scaleY = y / maxH; 165 | 166 | themeslider.style.top = y + 'px'; 167 | var value = (theme_content_pack.clientHeight - theme_content[0].offsetHeight) * scaleY; 168 | var value2 = (theme_content_pack.clientHeight - theme_content[1].offsetHeight) * scaleY; 169 | theme_content[0].style.top = value + 'px'; 170 | theme_content[1].style.top = value2 + 'px'; 171 | } 172 | 173 | //点击变色 174 | var theme_content_bgc = document.getElementsByClassName('theme_content_bgc'); 175 | var hteTaskbar = document.getElementsByClassName('hte-taskbar')[0]; 176 | var setColor = document.getElementsByClassName('setColor'); 177 | 178 | var mbm_title = document.getElementsByClassName('mbm_title'); 179 | for(var i = 0; i < theme_content_bgc.length; i++) { 180 | theme_content_bgc[i].index = i; 181 | theme_content_bgc[i].onclick = function(ev) { 182 | for(var j = 0; j < setColor.length; j++) { 183 | setColor[j].style.backgroundColor = css(this, 'background-color'); 184 | } 185 | hteTaskbar.style.opacity = '.8'; 186 | 187 | 188 | }; 189 | } 190 | 191 | //mbm_title移入移出颜色 192 | for(var i = 0; i < mbm_title.length; i++) { 193 | mbm_title[i].addEventListener('mouseover', forHover); 194 | mbm_title[i].addEventListener('mouseout', forOut); 195 | } 196 | 197 | function forHover() { 198 | this.style.backgroundColor = css(setColor[0], 'background-color'); 199 | } 200 | 201 | function forOut() { 202 | this.style.backgroundColor = ''; 203 | } 204 | 205 | //改变背景壁纸 206 | var bgPic = document.getElementsByClassName('theme_content_bgm')[0].getElementsByTagName('img'); 207 | var html = document.getElementsByTagName('html')[0]; 208 | var outer = document.getElementById('iconPage'); 209 | var arrPic = ['./images/background/10.jpg', './images/background/11.jpg', './images/background/cloud.jpg', './images/background/Wood.jpg'] 210 | for(var i = 0; i < bgPic.length; i++) { 211 | bgPic[i].addEventListener('click', changeBg); 212 | } 213 | 214 | function changeBg() { 215 | outer.style.backgroundImage = 'url(' + this.src + ')'; 216 | }; 217 | 218 | 219 | function fnPd(){ 220 | if(theme_content[0].offsetHeight - 7 > theme_content_pack.clientHeight) { 221 | themescro.style.display = 'block'; 222 | theme_content[0].style.top = 0; 223 | theme_content[0].style.width = 92 + '%'; 224 | } else { 225 | themescro.style.display = ''; 226 | theme_content[0].style.width = ''; 227 | theme_content[0].style.top = 0; 228 | } 229 | } 230 | //获取css样式 231 | function css(obj, attr) { 232 | return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr]; 233 | } 234 | 235 | 236 | 237 | -------------------------------------------------------------------------------- /js/lgc_pb_right.js: -------------------------------------------------------------------------------- 1 | //我的HteOS 2 | var p_deskTop = document.getElementById('p_deskTop'); 3 | var p_user = document.getElementById('p_user'); 4 | var p_manage = document.getElementById('p_manage'); 5 | var myhteos = document.getElementById('myhteos'); 6 | var myhteos_s = document.getElementById('myhteos_s'); 7 | var p_contro = document.getElementsByClassName('foot_nav_inner'); 8 | var login = document.getElementById('logining'); 9 | var mylogin = document.getElementById('mylogin'); 10 | var mylogined = document.getElementById('mylogined'); 11 | var zhuce = document.getElementById('zhuce'); 12 | var login_bottons = document.getElementById('login_bottons'); 13 | var out = document.getElementById('out'); 14 | var logined = document.getElementById('logined'); 15 | var zhuced = document.getElementById('zhuced'); 16 | var logined_s = document.getElementById('logined_s'); 17 | var outer =document.getElementById('iconPage'); 18 | var footNavInner = document.getElementsByClassName('foot_nav_inner'); 19 | 20 | var myIconYyGl = document.getElementById('myIconYyGl'); 21 | 22 | var myIconHetOS = document.getElementById('myIconHetOS'); 23 | 24 | 25 | //点击用户图标 26 | p_user.onclick = function(ev) 27 | { 28 | mhtos(); 29 | ev.cancelBubble = true; 30 | }; 31 | 32 | 33 | function mhtos() 34 | { 35 | for(var i=0;i 129 |
130 |
${Desktop.homepage.stickDesktop.module.news.title}
131 |
132 | `; 133 | 134 | var len_1 = Desktop.homepage.stickDesktop.module.news.content; 135 | 136 | for(var i=0;i 139 |
140 | 141 |
142 |
${Desktop.homepage.stickDesktop.module.news.content[i].title}
143 | `; 144 | } 145 | //生成任务管理新闻 146 | var mission = `
147 |
148 |
${Desktop.homepage.stickDesktop.module.mission.title}
149 |
150 |
`; 151 | var len_2 = Desktop.homepage.stickDesktop.module.mission.content; 152 | for(var i=0;i 155 |
156 | 157 |
158 |
${Desktop.homepage.stickDesktop.module.mission.content[i].title}
159 | `; 160 | } 161 | 162 | //生成知识文档模块 163 | 164 | var knowledge = `
165 |
166 |
${Desktop.homepage.stickDesktop.module.knowledge.title}
167 |
168 |
`; 169 | var len_3 = Desktop.homepage.stickDesktop.module.knowledge.content; 170 | for(var i=0;i 173 |
174 | 175 |
176 |
${Desktop.homepage.stickDesktop.module.knowledge.content[i].title}
177 | `; 178 | } 179 | 180 | //生成督查督办 181 | 182 | var inspector = `
183 |
184 |
${Desktop.homepage.stickDesktop.module.inspector.title}
185 |
186 |
`; 187 | var len_4 = Desktop.homepage.stickDesktop.module.inspector.content; 188 | for(var i=0;i 191 |
192 | 193 |
194 |
${Desktop.homepage.stickDesktop.module.inspector.content[i].title}
195 | `; 196 | } 197 | 198 | //生成流程管理 199 | 200 | var flowManage = `
201 |
202 |
${Desktop.homepage.stickDesktop.module.flowManage.title}
203 |
204 |
`; 205 | var len_5 = Desktop.homepage.stickDesktop.module.flowManage.content; 206 | for(var i=0;i 209 |
210 | 211 |
212 |
${Desktop.homepage.stickDesktop.module.flowManage.content[i].title}
213 | `; 214 | } 215 | 216 | //生成快速启动 217 | 218 | var fastStart = `
219 |
220 |
${Desktop.homepage.stickDesktop.module.fastStart.title}
221 |
222 |
`; 223 | var len_6 = Desktop.homepage.stickDesktop.module.fastStart.content; 224 | for(var i=0;i 227 |
228 | 229 |
230 |
${Desktop.homepage.stickDesktop.module.fastStart.content[i].title}
231 | `; 232 | } 233 | 234 | //模块儿相加 235 | 236 | abt_content.innerHTML = news+mission+knowledge+inspector+flowManage+fastStart; 237 | 238 | 239 | //滚动条 240 | 241 | var scroll_bars_nav = document.getElementById('scroll_bars_nav'); 242 | var p_slied = document.getElementById('p_slied'); 243 | var abt_contents = document.getElementsByClassName('abt_content'); 244 | p_slied.onmousedown = function(ev){ 245 | 246 | var disy = ev.clientY - getPos(this).top; 247 | 248 | 249 | var maxH = scroll_bars_nav.clientHeight - this.offsetHeight; 250 | document.onmousemove = function(ev){ 251 | var y = ev.clientY - disy; 252 | if(y<0) y=0; 253 | if(y>maxH) y=maxH; 254 | //滚动条移动比例 255 | var scaleY = y/maxH; 256 | p_slied.style.top = y+'px'; 257 | 258 | var value = abt_content.clientHeight*scaleY; 259 | abt_content.style.top = -value+ 'px'; 260 | }; 261 | document.onmouseup = function(){ 262 | document.onmousemove = null; 263 | }; 264 | 265 | ev.preventDefault(); 266 | return false; 267 | }; 268 | //添加滚轮事件 269 | abt_content.onmousewheel = fn; 270 | abt_content.addEventListener('DOMMouseScroll', fn); 271 | 272 | function fn(ev){ 273 | var detail; 274 | if(ev.wheelDelta){ 275 | detail = ev.wheelDelta; 276 | }else{ 277 | detail = -ev.detail; 278 | } 279 | var y = p_slied.offsetTop; 280 | var num = 50; 281 | 282 | //最大可以移动距离 283 | var maxH = abt_content.clientHeight - p_slied.offsetHeight; 284 | 285 | if(detail<0){//负数向下，每次加一点 286 | 287 | y+=num; 288 | 289 | }else{ 290 | y-=num; 291 | 292 | } 293 | 294 | //范围限制 295 | if(y<0) y = 0; 296 | 297 | if(y>maxH) y = maxH; 298 | 299 | //计算滚蛋条移动的比例。 300 | var scaleY = y/maxH; 301 | 302 | p_slied.style.top = y+'px'; 303 | //根据滚蛋条比例计算内容显示的位置。 304 | 305 | var value = abt_content.clientHeight*scaleY; 306 | abt_content.style.top = -value+'px'; 307 | 308 | //阻止默认行为 309 | ev.preventDefault(); 310 | return false; 311 | } 312 | function getPos(obj){ 313 | return obj.getBoundingClientRect(); 314 | } 315 | 316 | 317 | 318 | 319 | -------------------------------------------------------------------------------- /js/lgc_tools.js: -------------------------------------------------------------------------------- 1 | var tools = 2 | { 3 | $ : function(obj,csstr) //选取元素 4 | { 5 | if(csstr.charAt(0) == '.') 6 | { 7 | return obj.getElementsByClassName(csstr.substring(1)); 8 | } 9 | else if(csstr.charAt(0) != '.' && csstr.charAt(0) != '#') 10 | { 11 | return obj.getElementsByTagName(csstr); 12 | } 13 | else if(csstr.charAt(0) == '#') 14 | { 15 | return document.getElementById(csstr.substring(1)); 16 | } 17 | 18 | }, 19 | resize : function(callback) //封装多次调用window.onresize方法 20 | { 21 | var old = window.onresize; 22 | 23 | if(typeof window.onresize != 'function') 24 | { 25 | window.onresize = callback; 26 | } 27 | else 28 | { 29 | window.onresize = function() 30 | { 31 | old(); 32 | callback&&callback(); 33 | }; 34 | } 35 | }, 36 | click : function(obj,callback) //点击方法封装 37 | { 38 | var old = obj.onclick; 39 | 40 | if(typeof obj.onclick != 'function') 41 | { 42 | obj.onclick = callback; 43 | } 44 | else 45 | { 46 | obj.onclick = function() 47 | { 48 | old(); 49 | callback&&callback(); 50 | }; 51 | } 52 | }, 53 | drag : function(obj,arr,check) //拖拽元素 并且生成 克隆元素 54 | { 55 | var This = this; 56 | // var outBoxIcon = document.getElementById('iconsBox'); 57 | // var arr = tools.$(outBoxIcon,'.hte-shortcut'); 58 | 59 | 60 | obj.onmousedown = function(ev) 61 | { 62 | var ev = ev || window.event; 63 | var sX = ev.clientX - this.getBoundingClientRect().left; 64 | var sY = ev.clientY - this.getBoundingClientRect().top; 65 | 66 | 67 | var clone = obj.cloneNode(true); 68 | document.body.appendChild(clone); 69 | clone.style.transition = '0s'; 70 | clone.style.opacity = '0'; 71 | clone.style.zIndex = 100; 72 | var disW = document.body.clientWidth - clone.offsetWidth; 73 | var disH = document.body.clientHeight - clone.offsetHeight; 74 | var oldArr = arr; 75 | arr = This.splices(arr,obj.index); 76 | 77 | //1.检测拖拽行为 2.获取鼠标抬起的位置 78 | var checkDisX = 0; 79 | var checkDisY = 0; 80 | 81 | 82 | document.onmousemove = function(ev) 83 | { 84 | var ev = ev || window.event; 85 | 86 | var eX = ev.clientX - sX; 87 | var eY = ev.clientY - sY; 88 | 89 | console.log(eX,eY,sX,sY); //234 132 27 31 90 | 91 | //设定X拖动范围 92 | if(eX < 0) 93 | { 94 | eX = 0; 95 | } 96 | else if(eX > disW) 97 | { 98 | eX = disW; 99 | } 100 | 101 | //设定Y拖动范围 102 | if(eY < 0) 103 | { 104 | eY = 0; 105 | } 106 | else if(eY > disH) 107 | { 108 | eY = disH; 109 | } 110 | 111 | //console.log(eY,eX); 112 | //运动 113 | clone.style.opacity = 1; 114 | clone.style.left = eX + 'px'; 115 | clone.style.top = eY + 'px'; 116 | 117 | //检测碰撞 118 | This.checkCrash(clone,arr,function(arr,i){ 119 | This.setCrashElemStyle(arr,i); 120 | }); 121 | 122 | //给当前位置赋值 123 | checkDisX = Math.abs(eX - obj.getBoundingClientRect().left); 124 | checkDisY = Math.abs(eY - obj.getBoundingClientRect().top); 125 | }; 126 | 127 | document.onmouseup = function() 128 | { 129 | var parentBox = This.$(document,'#appsFConBox'); 130 | var parentDeskBox = This.$(document,'#iconsBox'); 131 | 132 | 133 | if(check == 'desktopIcons') 134 | { 135 | //清除样式 136 | This.setCrashElemStyle(arr); 137 | 138 | //鼠标松开后操作 139 | This.checkCrash(clone,arr,function(arr,i){ 140 | This.crashMouseUp(arr,i,obj); 141 | }); 142 | 143 | //检测是否移入应用框中 144 | // 1.在桌面中删除该节点元素 2.在应用框中添加该元素运动 3.给该元素绑定拖动事件 145 | 146 | //检测鼠标抬起时是否 已经进入应用框范围 如果进入 执行删除节点 147 | This.checkMoveOut(clone,parentBox,function(){},function(){ 148 | 149 | //移出我的应用之后的操作 150 | This.operateAppBoxs(obj,parentDeskBox,function(){ 151 | 152 | //1.删除节点后 重新进行排序 153 | This.arrangeIcon(); 154 | 155 | //2.在应用框添加该元素并 重新排序 生成坐标位置 从鼠标抬起位置 运动到桌面布局坐标 156 | This.appBoxAddElem(parentBox,clone,function(){ 157 | This.arrangeAppIcon(parentBox,20); 158 | }); 159 | 160 | //3.再次绑定拖动事件 161 | This.dragReflashIcons(parentBox,'appIcons'); 162 | 163 | //初始化 点击弹出弹框 164 | mark.init(); 165 | }); 166 | 167 | }); 168 | 169 | 170 | //显示我的应用盒子 171 | //检测不属于拖拽行为 172 | //console.log(checkDisX,checkDisY) 173 | console.log(checkDisX,checkDisY); 174 | if(checkDisX < 10 && checkDisY < 10) 175 | { 176 | console.log('ss'); 177 | This.showAppBox(obj); 178 | This.showAppIframe(obj); 179 | This.showBottomAppIframe(obj); 180 | This.bottomAppIframeBoxClick(); 181 | } 182 | 183 | } 184 | 185 | if(check == 'appIcons') 186 | { 187 | //清除样式 188 | This.setCrashElemStyle(arr); 189 | 190 | //鼠标松开后操作 191 | This.checkCrash(clone,arr,function(arr,i){ 192 | This.crashAppMouseUp(arr,i,obj); 193 | }); 194 | 195 | //检测移出 196 | // 1.在应用框中删除该节点元素 2.在桌面添加该元素运动 197 | 198 | //检测出来属于拖动行为后开始执行 199 | if(checkDisX > 10 || checkDisY > 10) 200 | { 201 | //检测鼠标抬起时是否 已经超出应用框范围 如果超出 执行删除节点 202 | This.checkMoveOut(clone,parentBox,function(){ 203 | 204 | //移出我的应用之后的操作; 205 | This.operateAppBoxs(obj,parentBox,function(){ 206 | 207 | 208 | //1.删除节点后 重新进行排序 209 | This.arrangeAppIcon(parentBox,20); 210 | 211 | //2.在桌面添加该元素并 重新排序 生成坐标位置 从鼠标抬起位置 运动到桌面布局坐标 212 | /*This.deskTopAddData(clone,function(data) 213 | { 214 | This.deskCreatePageIcons(parentDeskBox,data); 215 | This.arrangeIcon(); 216 | }); */ 217 | 218 | This.deskTopAddElem(parentDeskBox,clone,function(){ 219 | This.arrangeIcon(); 220 | }); 221 | 222 | //3.再次绑定拖动事件 223 | This.dragReflashIcons(parentDeskBox,'desktopIcons'); 224 | }); 225 | }); 226 | } 227 | } 228 | 229 | 230 | //其他方法: 231 | 232 | 233 | 234 | document.body.removeChild(clone); 235 | document.onmousemove = document.onmouseup = null; 236 | }; 237 | 238 | ev.cancelBubble = true; 239 | return false; 240 | }; 241 | 242 | }, 243 | checkCrash : function(obj,arr,callback) 244 | { 245 | var This = this; 246 | 247 | //检测边界 248 | var l = This.getPos(obj).left; 249 | var t = This.getPos(obj).top; 250 | var b = This.getPos(obj).bottom; 251 | var r = This.getPos(obj).right; 252 | 253 | 254 | //用当前克隆元素去碰撞 当前所有元素 255 | var i=0; 256 | for(i=0;i This.getPos(arr[i]).right || t > This.getPos(arr[i]).bottom || b < This.getPos(arr[i]).top || r < This.getPos(arr[i]).left) 260 | { 261 | //没有发生碰撞 262 | } 263 | else 264 | { 265 | callback&&callback(arr,i); 266 | return; 267 | } 268 | } 269 | }, 270 | checkMoveOut : function(obj,parent,callback,callback2) 271 | { 272 | var This = this; 273 | 274 | //检测边界 275 | var l = This.getPos(obj).left; 276 | var t = This.getPos(obj).top; 277 | var b = This.getPos(obj).bottom; 278 | var r = This.getPos(obj).right; 279 | 280 | //再检测 parent 的边界 281 | var pl = This.getPos(parent).left; 282 | var pr = This.getPos(parent).right; 283 | var pt = This.getPos(parent).top; 284 | var pb = This.getPos(parent).bottom; 285 | 286 | //如果子级与父级没有发生碰撞 则说明 已经移出父级框 287 | //如果没有碰撞 288 | if(l > pr || t > pb || b < pt || r < pl) 289 | { 290 | callback&&callback(); 291 | } 292 | else 293 | { 294 | callback2&&callback2(); 295 | } 296 | }, 297 | operateAppBoxs : function(obj,parent,callback) 298 | { 299 | 300 | if(obj.dataset.fileType == 'appsfolder') 301 | { 302 | return; 303 | } 304 | 305 | parent.removeChild(obj); 306 | callback&&callback(); 307 | }, 308 | deskTopAddData : function(obj,callback) //移出框后在桌面添加数据 309 | { 310 | var data = Desktop.iconDesktop; 311 | var oId = obj.dataset.id; 312 | var oType = obj.dataset.fileType; 313 | var oUrl = obj.dataset.url; 314 | var oTitle = obj.dataset.title; 315 | var oImage = obj.dataset.image; 316 | 317 | var object = 318 | { 319 | id : oId, 320 | type : oType, 321 | url : oUrl, 322 | title : oTitle, 323 | image : oImage 324 | } 325 | 326 | data.push(object); 327 | 328 | callback&&callback(data); 329 | }, 330 | dragReflashIcons : function(parent,str) //拖拽icons 331 | { 332 | var icons = parent.getElementsByClassName('hte-shortcut'); 333 | 334 | for(var i=0;i 380 | 381 |

${data[i].title}

382 | `; 383 | } 384 | 385 | parent.innerHTML = str; 386 | }, 387 | showAppBox : function(obj) 388 | { 389 | 390 | if(obj.dataset.fileType == 'appsfolder') 391 | { 392 | var appBox = this.$(document,'#appsFolder'); 393 | appBox.style.top = '50%'; 394 | appBox.style.opacity = 1; 395 | //appBox.style.transform = 'scale(1)'; 396 | } 397 | }, 398 | showAppIframe : function(obj) 399 | { 400 | if(obj.dataset.fileType == 'app') 401 | { 402 | var appBox = this.$(document,'#appsFolder'); 403 | var outer = document.getElementById('iconPage'); 404 | // var markBoxWrap = document.getElementsByClassName('market_alert')[0]; 405 | // var iframeBox = document.getElementById('iframeBox'); 406 | // var market_alert_title = document.getElementById('market_alert_title'); 407 | 408 | 409 | var newMarkBox = document.createElement('div'); 410 | newMarkBox.className = 'market_alert'; 411 | newMarkBox.style.display = 'block'; 412 | newMarkBox.setAttribute('data-id',obj.dataset.id); 413 | 414 | var str = ` 415 |
416 |
417 | 420 | 421 | 422 | 423 | 424 |
425 |
426 | `; 427 | 428 | newMarkBox.innerHTML = str; 429 | 430 | outer.appendChild(newMarkBox); 431 | mark.init(); 432 | } 433 | }, 434 | showBottomAppIframe : function(obj) 435 | { 436 | if(obj.dataset.fileType != 'app') 437 | { 438 | return; 439 | } 440 | 441 | var hteTaskbarInner = this.$(document,'#hte-taskbar-inner'); 442 | var str = hteTaskbarInner.innerHTML; 443 | 444 | str += 445 | `
446 | 447 | ${obj.dataset.title} 448 |
`; 449 | 450 | hteTaskbarInner.innerHTML = str; 451 | 452 | mark.init(); 453 | }, 454 | bottomAppIframeBoxClick : function() 455 | { 456 | var hteTaskbarInner = this.$(document,'#hte-taskbar-inner'); 457 | var boxs = hteTaskbarInner.getElementsByClassName('hte-task-bottom'); 458 | var This = this; 459 | 460 | 461 | for(var i=0;i 146 |
147 |
${Desktop.homepage.stickDesktop.module.news.title}
148 |
149 | `; 150 | 151 | var len_1 = Desktop.homepage.stickDesktop.module.news.content; 152 | 153 | for(var i=0;i 156 |
157 | 158 |
159 |
${Desktop.homepage.stickDesktop.module.news.content[i].title}
160 | `; 161 | } 162 | //生成任务管理新闻 163 | var mission = `
164 |
165 |
${Desktop.homepage.stickDesktop.module.mission.title}
166 |
167 |
`; 168 | var len_2 = Desktop.homepage.stickDesktop.module.mission.content; 169 | for(var i=0;i 172 |
173 | 174 |
175 |
${Desktop.homepage.stickDesktop.module.mission.content[i].title}
176 | `; 177 | } 178 | 179 | //生成知识文档模块 180 | 181 | var knowledge = `
182 |
183 |
${Desktop.homepage.stickDesktop.module.knowledge.title}
184 |
185 |
`; 186 | var len_3 = Desktop.homepage.stickDesktop.module.knowledge.content; 187 | for(var i=0;i 190 |
191 | 192 |
193 |
${Desktop.homepage.stickDesktop.module.knowledge.content[i].title}
194 | `; 195 | } 196 | 197 | //生成督查督办 198 | 199 | var inspector = `
200 |
201 |
${Desktop.homepage.stickDesktop.module.inspector.title}
202 |
203 |
`; 204 | var len_4 = Desktop.homepage.stickDesktop.module.inspector.content; 205 | for(var i=0;i 208 |
209 | 210 |
211 |
${Desktop.homepage.stickDesktop.module.inspector.content[i].title}
212 | `; 213 | } 214 | 215 | //生成流程管理 216 | 217 | var flowManage = `
218 |
219 |
${Desktop.homepage.stickDesktop.module.flowManage.title}
220 |
221 |
`; 222 | var len_5 = Desktop.homepage.stickDesktop.module.flowManage.content; 223 | for(var i=0;i 226 |
227 | 228 |
229 |
${Desktop.homepage.stickDesktop.module.flowManage.content[i].title}
230 | `; 231 | } 232 | 233 | //生成快速启动 234 | 235 | var fastStart = `
236 |
237 |
${Desktop.homepage.stickDesktop.module.fastStart.title}
238 |
239 |
`; 240 | var len_6 = Desktop.homepage.stickDesktop.module.fastStart.content; 241 | for(var i=0;i 244 |
245 | 246 |
247 |
${Desktop.homepage.stickDesktop.module.fastStart.content[i].title}
248 | `; 249 | } 250 | 251 | //模块儿相加 252 | //console.log(abt_content); 253 | abt_content.innerHTML = news+mission+knowledge+inspector+flowManage+fastStart; 254 | 255 | 256 | //右键操作 257 | 258 | var abt_con_item = document.getElementsByClassName('abt_con_item'); 259 | var rightShow = document.getElementById('rightShow'); 260 | var abt_content = document.getElementById('abt_content'); 261 | 262 | abt_content.oncontextmenu = function(ev){ 263 | rightShow.style.top = ev.clientY +'px'; 264 | rightShow.style.left = ev.clientX +'px'; 265 | rightShow.style.display = 'block'; 266 | 267 | return false; 268 | 269 | }; 270 | 271 | 272 | //滚动条 273 | 274 | // var scroll_bars_nav = document.getElementById('scroll_bars_nav'); 275 | // var p_slied = document.getElementById('p_slied'); 276 | // var abt_contents = document.getElementsByClassName('abt_content'); 277 | // p_slied.onmousedown = function(ev){ 278 | 279 | // var disy = ev.clientY - getPos(this).top; 280 | 281 | 282 | // var maxH = scroll_bars_nav.clientHeight - this.offsetHeight; 283 | // document.onmousemove = function(ev){ 284 | // var y = ev.clientY - disy; 285 | // if(y<0) y=0; 286 | // if(y>maxH) y=maxH; 287 | // //滚动条移动比例 288 | // var scaleY = y/maxH; 289 | // p_slied.style.top = y+'px'; 290 | 291 | // var value = abt_content.clientHeight*scaleY; 292 | // abt_content.style.top = -value+ 'px'; 293 | // }; 294 | // document.onmouseup = function(){ 295 | // document.onmousemove = null; 296 | // }; 297 | 298 | // ev.preventDefault(); 299 | // return false; 300 | // }; 301 | // //添加滚轮事件 302 | // abt_content.onmousewheel = fn; 303 | // abt_content.addEventListener('DOMMouseScroll', fn); 304 | 305 | // function fn(ev){ 306 | // var detail; 307 | // if(ev.wheelDelta){ 308 | // detail = ev.wheelDelta; 309 | // }else{ 310 | // detail = -ev.detail; 311 | // } 312 | // var y = p_slied.offsetTop; 313 | // var num = 50; 314 | 315 | // //最大可以移动距离 316 | // var maxH = abt_content.clientHeight - p_slied.offsetHeight; 317 | 318 | // if(detail<0){//负数向下，每次加一点 319 | 320 | // y+=num; 321 | 322 | // }else{ 323 | // y-=num; 324 | 325 | // } 326 | 327 | // //范围限制 328 | // if(y<0) y = 0; 329 | 330 | // if(y>maxH) y = maxH; 331 | 332 | // //计算滚蛋条移动的比例。 333 | // var scaleY = y/maxH; 334 | 335 | // p_slied.style.top = y+'px'; 336 | // //根据滚蛋条比例计算内容显示的位置。 337 | 338 | // var value = abt_content.clientHeight*scaleY; 339 | // abt_content.style.top = -value+'px'; 340 | 341 | // //阻止默认行为 342 | // ev.preventDefault(); 343 | // return false; 344 | // } 345 | // function getPos(obj){ 346 | // return obj.getBoundingClientRect(); 347 | // } 348 | 349 | 350 | }(); 351 | 352 | -------------------------------------------------------------------------------- /js/public.js: -------------------------------------------------------------------------------- 1 | var colorLoadingArr = ['#1f5bb7','#59b728','#9b1dab','#cc3535','#d09615','#544a4a','#2f8052']; 2 | 3 | function windOnload(fn) 4 | { 5 | var old = window.onload; 6 | 7 | if(typeof window.onload != 'function') 8 | { 9 | window.onload = fn; 10 | } 11 | else 12 | { 13 | window.onload = function() 14 | { 15 | old(); 16 | fn(); 17 | } 18 | } 19 | } 20 | 21 | 22 | //创建CSS列表 23 | function createCSS(header,aCss) 24 | { 25 | for(var i=0;i 2 | 3 | 4 | 5 | HteOS个性Web桌面 6 | 7 | 8 | 9 | 10 | 11 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 70 | --------------------------------------------------------------------------------