扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JS仿Windows实现桌面主题特效
  • 157

0
分享到

JS仿Windows实现桌面主题特效

2024-04-02 19:04:59 157人浏览 泡泡鱼
摘要

目录实现效果项目基本结构html代码CSS 代码页面基础样式界面布局样式任务栏样式侧边浮动栏开始按钮样式开始菜单样式默认小工具默认应用程序重写右键菜单样式窗口样式桌面图标js 代码实

实现效果

在线演示地址：https://haiyong.site/win

项目基本结构

目录结构如下：

HTML代码

HTML 主要代码：

<a href="Https://haiyong.site" rel="external nofollow"  class="powered_by">Powered by haiyong.site 注意：双击桌面应用即可点开</a>
<ul id="deskIcon">
  <li class="desktop_icon" id="win11" path="https://haiyong.site/"> <span class="icon"><img src="icon/icon14.png"/></span>
    <div class="text">海拥
      <div class="right_cron"></div>
    </div>
  </li>
 <li class="desktop_icon" id="win11" path="https://haiyong.blog.csdn.net/"> <span class="icon"><img src="icon/csdn.png"/></span>
   <div class="text">CSDN
     <div class="right_cron"></div>
   </div>
 </li>
  <li class="desktop_icon" id="win11" path="https://juejin.cn/user/2040341402229751"> <span class="icon"><img src="icon/juejin.png"/></span>
    <div class="text">掘金
      <div class="right_cron"></div>
    </div>
  </li>  
  <li class="desktop_icon" id="win11" path="https://space.bilibili.com/63551025"> <span class="icon"><img src="icon/bilibili.png"/></span>
    <div class="text">bilibili
      <div class="right_cron"></div>
    </div>
  </li>  
</ul>
<div id="taskBar">
  <div id="leftBtn"><a href="#" rel="external nofollow"  rel="external nofollow"  class="upBtn"></a></div>
  <div id="rightBtn"><a href="#" rel="external nofollow"  rel="external nofollow"  class="downBtn"></a> </div>
  <div id="task_lb_wrap">
    <div id="task_lb"></div>
  </div>
</div>
<div id="lr_bar">
  <ul id="default_app">
    <li id="app0"><img src="icon/icon1.png" title="海拥" path="https://haiyong.site/"/></li>
    <li  id="app2"><img src="icon/icon0.png" title="工具" path="https://haiyong.site/tools"/></li>
    <li id="app3"><img src="icon/icon2.png" title="交流群" path="https://app.yinxiang.com/fx/8aa8eb1b-7d45-4793-a160-b990d9da2e75"/></li>
    <li id="app4"> <img src="icon/icon3.png" title="联系作者" path="https://haiyong.site/img/qrcode/weixin.png"/></li>
    <li id="app1"><img src="icon/icon11.png" title="Jquery学堂" path="http://www.jq22.com/?Jquery.aspx"/></li>
  </ul>
  <div id="default_tools"> <span id="showZm_btn" title="显示桌面"></span><span id="shizhong_btn" title="时钟"></span><span id="weather_btn" title="天气"></span> <span id="them_btn" title="主题"></span></div>
  <div id="start_block"> <a title="开始" id="start_btn"></a>
    <div id="start_item">
      <ul class="item admin">
        <li><span class="adminImg"></span> Admin</li>
      </ul>
      <ul class="item">
        <li><span class="sitting_btn"></span>系统设置</li>
        <li><span class="help_btn"></span>使用指南 <b></b></li>
        <li><span class="about_btn"></span>关于我们</li>
        <li><span class="loGout_btn"></span>退出系统</li>
      </ul>
    </div>
  </div>
</div>
</div>

CSS 代码

CSS主要代码：

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, fORM, fieldset, input, textarea, p, blockquote, th, td {
	margin:0;
	padding:0;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
fieldset, img {
	border:0;
}
address, caption, cite, code, dfn, em, strong, th, var {
	font-style:normal;
	font-weight:normal;
}
ol, ul, li {
	list-style:none;
}
caption, th {
	text-align:left;
}
h1, h2, h3, h4, h5, h6 {
	font-size:100%;
	font-weight:normal;
}
q:before, q:after {
	content:”;
}
abbr, acronym {
	border:0;
}
* {
	margin:0;
	padding:0
}

页面基础样式


html {
	overflow:hidden;
}
body {
	font-size: 12px;
	background:#06C url(wallpapers/menglong2.jpg) repeat scroll center center;
	font-family: Tahoma, Geneva, sans-serif;
	margin:0;
	padding:0
}
a {
	font-size: 12px;
}
a:link {
	text-decoration: none;
	color: #FFF;
}
a:visited {
	text-decoration: none;
	color: #FFF;
}
a:hover {
	text-decoration: none;
	color: #FFF;
}
a:active {
	text-decoration: none;
	color: #FFF;
}
.corner {
	-moz-border-radius: 5px;
	-WEBkit-border-radius: 5px;
	border-radius: 5px;
	-moz-box-shadow: 2px 2px 8px #444;
	-webkit-box-shadow: 2px 2px 8px #444;
	box-shadow:2px 2px 8px #444;
}
.loading {
	background:url(images/loading.gif) no-repeat center center
}

界面布局样式


.powered_by {
	width:160px;
	height:25px;
	line-height:25px;
	background:url(images/powered-by.png) no-repeat left center;
	color:#CCC;
	text-indent:26px;
	display:block;
	outline:none;
	position:absolute;
	right:20px;
	bottom:60px;
}

任务栏样式

#taskBar {
	width:100%;
	height:40px;
	line-height:40px;
	position:absolute;
	right:0;
	bottom:0;
}
#leftBtn {
	width:100px;
	height:40px;
	float:left;
	display:none;
}
#rightBtn {
	width:100px;
	height:40px;
	float:right;
	display:none;
}
#leftBtn a, #rightBtn a {
	display:block;
	width:100px;
	height:40px;
	outline:none;
	background-image:url(images/lr_btn.png);
	background-repeat:no-repeat;
}
#leftBtn a {
	background-position:left top;
}
#rightBtn a {
	background-position:right top;
}
#leftBtn a:hover {
	background-position:left bottom
}
#rightBtn a:hover {
	background-position:right bottom
}
#task_lb_wrap {
	height:40px;
	line-height:40px;
	overflow:hidden;
	position:relative;
}
#task_lb {
	width:auto;
	height:auto;
	position:absolute;
	top:0;
	right:0;
}
#task_lb a {
	display:inline-block;
	outline:none;
	width:100px;
	height:40px;
	background-image:url(images/taskHdBtn.png);
	background-repeat:no-repeat;
	text-align:center;
	line-height:40px;
	float:right
}
#task_lb .defaultTab {
	background-position:right top;
	color:#ccc
}
#task_lb .defaultTab:hover {
	background-position:right bottom;
}
#task_lb .selectTab {
	background-position:left top;
	color:#FFF
}
#task_lb .selectTab:hover {
	background-position:left bottom
}
#shizhong_btn {
	background:url(images/timer.png) no-repeat center center
}
#weather_btn {
	background:url(images/wheather.png) no-repeat center center
}
#sound_btn {
	background:url(images/sound_open.png) no-repeat center center
}
#showZm_btn {
	background:url(images/show-desktop.png) no-repeat center center
}
#them_btn {
	background:url(images/skin.png) no-repeat center center
}

侧边浮动栏

#lr_bar {
	width:73px;
	height:auto;
	position:absolute;
	left:0;
	top:30px;
	background:url(images/dock_top.png) repeat-y left top;
	z-index:90;
	-moz-box-shadow: 0px 3px 15px #444;
	-webkit-box-shadow: 0px 3px 15px #444;
	box-shadow:0px 3px 15px #444;
	padding-top:5px;
}

开始按钮样式

#start_block {
	width:73px;
	height:56px;
	position:absolute;
	left:0;
	bottom:-56px;
	background:url(images/dock_b.png) no-repeat left bottom;
	-moz-box-shadow: 0px 5px 15px #444;
	-webkit-box-shadow: 0px 5px 15px #444;
	box-shadow:0px 5px 15px #444;
}
#start_btn {
	display:block;
	width:48px;
	height:48px;
	background:url(images/start-btn.png) no-repeat center bottom;
	margin:4px auto 0 auto;
	outline:none;
	z-index:501;
	cursor:pointer;
}
#start_btn:hover {
	background-position:center top
}

开始菜单样式

#start_item {
	width:180px;
	height:auto;
	padding:5px 0;
	background: url(images/start_item_bg.png) repeat;
	position:absolute;
	z-index:500;
	left:75px;
	bottom:0px;
	display:none;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	-moz-box-shadow: 2px 2px 5px #444;
	-webkit-box-shadow: 2px 2px 5px #444;
	box-shadow:2px 2px 5px #444;
}
#start_item .item {
	width:100%;
	height:auto;
	border-top:1px solid #999
}
#start_item .item li {
	width:98%;
	height:24px;
	overflow:hidden;
	zoom:-1;
	padding:6px 0;
	line-height:24px;
	margin:0 auto;
	color:#FFF;
}
#start_item .item li:hover {
	background:url(images/start_item_over.png) repeat-x left bottom;
	cursor:pointer
}
#start_item .item li span {
	display:inline-block;
	width:24px;
	height:24px;
	background-image:url(images/start_itembtn.png);
	background-repeat:no-repeat;
	margin:0 10px;
	float:left;
}
#start_item .item li b {
	width:10px;
	height:24px;
	background:url(images/item-child.png) no-repeat center center;
	display:inline-block;
	float:right;
	margin-right:10px;
}
#start_item .sitting_btn {
	background-position:left -140px;
}
#start_item .help_btn {
	background-position:left -44px;
}
#start_item .about_btn {
	background-position:left -164px;
}
#start_item .logout_btn {
	background-position:left -20px;
}
#start_item .admin {
	border-bottom:1px solid #444;
	padding:5px 0;
	border-top:none;
}
#start_item .item li .adminImg {
	border:1px solid #E0E0E0;
	background-position:left -92px;
	background-color:#FFF;
}

默认小工具

#default_tools {
	width:71px;
	height:auto;
	overflow:hidden;
	zoom:-1;
	padding:5px 0;
	border-top:1px solid #555;
	margin:0 auto;
}
#default_tools span {
	width:30px;
	height:30px;
	display:inline-block;
	margin:0 0 0 3px;
	cursor:pointer;
	float:left;
}

默认应用程序

#default_app {
	width:73px;
	height:auto;
	padding:5px 0;
	position:relative;
}
#default_app li {
	width:48px;
	height:48px;
	overflow:hidden;
	margin:3px auto;
	padding:6px;
}
#default_app li img {
	width:48px;
	height:48px;
	cursor:pointer;
}
#default_app .btnOver {
	background:url(images/default_appbtn_bg.png) no-repeat center center
}

重写右键菜单样式

.smart_menu_box .smart_menu_a {
	color:#333
}
.smart_menu_box .smart_menu_li_separate {
	border-bottom:1px solid #d6d5d5;
}

窗口样式

.windows {
	min-width:240px;
	min-height:200px;
	width:700px;
	height:560px;
	position:absolute;
	display:none;
	background-color:#E0E0E0;
}
.win_title {
	width:100%;
	height:26px;
	line-height:26px;
	background:#E0E0E0 url(images/titlebar_bg_cur.png) repeat-x left center;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}
.win_title b {
	color:#333;
	margin-left:10px;
}
.win_title .win_btnblock {
	width:auto;
	padding:0 5px;
	float:right;
	height:17px;
	margin:4px 3px 0 0;
}
.win_title .win_btnblock a {
	display:inline-block;
	width:26px;
	height:17px;
	background-image:url(images/windowBtn.png);
	background-repeat:no-repeat;
	float:left;
	margin:0 1px;
	outline:none;
}
.winMaximize {
	background-position:right bottom;
}
.winMaximize:hover {
	background-position:right top;
}
.winHyimize {
	background-position:-26px bottom;
}
.winHyimize:hover {
	background-position:-26px top;
}
.winClose {
	background-position:-52px top;
}
.winClose:hover {
	background-position:-52px bottom;
}
.winMinimize {
	background-position:left bottom;
}
.winMinimize:hover {
	background-position:left top;
}
.winframe {
	width:100%;
	height:auto;
	margin:0 0 0 3px;
	padding:0
}

桌面图标

#deskIcon {
	width:100%;
	height:auto;
	overflow:hidden;
	zoom:-1;
	position:relative;
}
.desktop_icon {
	width:86px;
	height:88px;
	cursor:pointer;
	margin-left:-1000px;
	text-align:center;
}
.desktop_icon span {
	display:block;
}
.desktop_icon .icon {
	width:50px;
	height:50px;
	margin:5px auto;
}
.desktop_icon .icon img {
	width:50px;
	height:50px;
}
.desktop_icon .text {
	display:inline-block;
	width:auto;
	height:22px;
	line-height:22px;
	text-align:center;
	color:#fff;
	background:url(images/iconTextbg.png) no-repeat left center;
	position:relative;
	padding-left:10px;
	margin-right:10px;
}
.desktop_icon .right_cron {
	width:10px;
	height:22px;
	position:absolute;
	right:-10px;
	top:0;
	background:url(images/iconTextbg_right.png) left center no-repeat;
}
.desktop_icon_over {
	background:url(images/icon_over.png) no-repeat center center;
}

JS 代码

JS代码较多这里只展示部分JS代码，完整源码可在文末获取

//声明desktop空间,封装相关操作
myLib.NS("desktop");
myLib.desktop={
	winWH:function(){
		$('body').data('winWh',{'w':$(window).width(),'h':$(window).height()});
 	},
	desktopPanel:function(){
		$('body').data('panel',{
					   'taskBar':{
					   '_this':$('#taskBar'),
					   'task_lb':$('#task_lb')
										},
					   'lrBar':{
					   '_this':$('#lr_bar'),	   
					   'default_app':$('#default_app'),
				       'start_block':$('#start_block'),
				       'start_btn':$('#start_btn'),
					   'start_item':$('#start_item'),
					   'default_tools':$('#default_tools')
							},				
						'deskIcon':{
							'_this':$('#deskIcon'),
							'icon':$('li.desktop_icon')
							},
						'powered_by':$('a.powered_by')
						});
		},
	getMydata:function(){
		return $('body').data();
		},
	mouseXY:function(){
		var mouseXY=[];
		$(document).bind('mousemove',function(e){
			mouseXY[0]=e.pageX;
			mouseXY[1]=e.pageY;
           });
		return mouseXY;
		},
	contextMenu:function(jqElem,data,menuName,textLimit){
		  var _this=this
		      ,mXY=_this.mouseXY();

          jqElem
		  .smartMenu(data,{
            name: menuName,
			textLimit:textLimit,
			afterShow:function(){
				var menu=$("#smartMenu_"+menuName);
				var myData=myLib.desktop.getMydata(),
		            wh=myData.winWh;//获取当前document宽高
 				var menuXY=menu.offset(),menuH=menu.height(),menuW=menu.width();
				if(menuXY.top>wh['h']-menuH){
					menu.css('top',mXY[1]-menuH-2);
					}
				if(menuXY.left>wh['w']-menuW){
					menu.css('left',mXY[0]-menuW-2);
					}
				}
           });
		  $(document.body).click(function(event){
			event.preventDefault(); 			  
			$.smartMenu.hide();
						  });
		}
	}

GitHub 地址：https://github.com/wanghao221/moyu

以上就是JS仿Windows实现桌面主题特效的详细内容，更多关于JS桌面主题特效的资料请关注编程网其它相关文章！

--结束END--

本文标题: JS仿Windows实现桌面主题特效

本文链接: https://lsjlt.com/news/150936.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • JS仿Windows实现桌面主题特效
    目录实现效果项目基本结构HTML代码CSS 代码页面基础样式界面布局样式任务栏样式侧边浮动栏开始按钮样式开始菜单样式默认小工具默认应用程序重写右键菜单样式窗口样式桌面图标JS 代码实...
    99+
    2024-04-02
  • JS如何实现高仿抛物线加入购物车特效
    这篇文章主要介绍了JS如何实现高仿抛物线加入购物车特效，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。1. 简介要想让你的购物车有种高大上的感...
    99+
    2024-04-02
  • JS实现代码雨特效
    本文实例为大家分享了JS实现代码雨特效的具体代码，供大家参考，具体内容如下 html代码 <canvas id="code_rain_canvas" width="1440" ...
    99+
    2024-04-02
  • WINDOWS SERVER 2008开启桌面主题具体步骤
    Windows SERVER 2008开启桌面主题不同于WINDOWS SERVER 2003只是开启服务里面的THEMES服务即可，它还需要另外一个设置。 具体方法： 1.开启THEMES服务：运行-services....
    99+
    2023-05-30
    桌面主题 THEMES WINDOWS SERVER 2008 具体步骤
  • 原生JS实现翻书特效
    本文给大家分享一个用原生JS实现的翻书效果图，效果如下： 实现代码如下，欢迎大家复制粘贴。 <!doctype html> <html> &...
    99+
    2024-04-02
  • js怎么实现圣诞节倒计时页面特效
    本文小编为大家详细介绍“js怎么实现圣诞节倒计时页面特效”，内容详细，步骤清晰，细节处理妥当，希望这篇“js怎么实现圣诞节倒计时页面特效”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识...
    99+
    2024-04-02
  • Android实现仿360桌面悬浮清理内存
    今天闲来无事写了一个清内存的小东西，类似360，在桌面上悬浮，点击后清除后台无用程序，清除后台程序是通过调用ActivityManger.killBackgroundProce...
    99+
    2022-06-06
    Android
  • Android仿QQ空间主页面的实现
    今天模仿安卓QQ空间，效果如下：    打开程序的启动画面和导航页面我就不做了，大家可以模仿微信的那个做一下，很简单。这次主要做一下主页面的实现，下面是主页...
    99+
    2022-06-06
    qq空间 Android
  • js canvas实现随机粒子特效
    本文实例为大家分享了js canvas随机粒子特效的具体代码，供大家参考，具体内容如下 前言 canvas实现前端的特效美术 结果展示 代码 html <!DOCTYPE...
    99+
    2024-04-02
  • 原生JS实现特效留言框
    本文给大家分享一个用原生JS实现的特效留言框，效果如下： 实现代码如下，欢迎大家复制粘贴。 <!DOCTYPE html> <html> <h...
    99+
    2024-04-02
  • JS实现网页导航条特效
    本文实例给大家分享了一个用原生JS实现的比较实用的网页导航条特效，当页面滚动时，导航条会发生变化，效果如下： 以下是代码实现，欢迎大家复制粘贴和收藏。 <!DOCTYPE...
    99+
    2024-04-02
  • 原生JS实现数码表特效
    本文分享一个用原生JS实现的数码时钟特效，效果如下： 上面的数字是用的图片生成的，共10张图片如下： 实现代码如下，欢迎大家复制粘贴。 <!DOCTYPE html&g...
    99+
    2024-04-02
  • 原生JS实现百叶窗特效
    本文分享一个用原生JS实现的百叶窗特效，效果如下： 代码实现如下，欢迎大家复制粘贴。 <!DOCTYPE html> <html> <head...
    99+
    2024-04-02
  • 基于JS如何实现仿百度百家主页的轮播图效果
    这篇文章将为大家详细讲解有关基于JS如何实现仿百度百家主页的轮播图效果，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。HTML    ...
    99+
    2024-04-02
  • Windows中如何防止系统桌面主题被篡改
    小编给大家分享一下Windows中如何防止系统桌面主题被篡改，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！在系统桌面上按组合键（win+R）打开运行窗口，接着在命令框中输入“gpedit.msc”，回车确认。打开本地组策略...
    99+
    2023-06-28
  • 云主机如何实现云桌面
    云主机可以通过以下步骤来实现云桌面：1. 部署虚拟化平台：在云主机上部署虚拟化平台，如VMware、KVM或Hyper-V等，用于创...
    99+
    2023-09-21
    云主机
  • android 仿微信demo——微信主界面实现
    目录主界面实现测试总结 以往文章中实现微信启动页，登录注册功能，此基础上继续完善仿微信功能。 主界面实现 （1）整体采用RelativeLayout相对布局 （2）最上面是too...
    99+
    2024-04-02
  • js如何实现数字递增特效
    这篇文章主要介绍js如何实现数字递增特效，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！示例如下：上面就是这个插件的效果，我们来看一下怎么使用的吧第一： HTML部分这里简单列举一个&...
    99+
    2024-04-02
  • 原生js如何实现轮播特效
    这篇文章主要为大家展示了“原生js如何实现轮播特效”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“原生js如何实现轮播特效”这篇文章吧。首先css代码a{text...
    99+
    2024-04-02
  • js如何实现图片轮播特效
    这篇文章将为大家详细讲解有关js如何实现图片轮播特效，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。先看一眼效果图：代码：<html> <head>...
    99+
    2024-04-02
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作