EasyUI实现windows桌面特效特效js和jquery代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 EasyUI实现windows桌面特效特效js和jquery代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(clock.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html  xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>挂件测试</title>
<style>
*{margin:0;padding:0;list-style:none;border:none;}
.mytest{width:100px;height:100px;border-radius:100px;background:#fff;text-align:center;line-height:100px;-webkit-transition:all 0.5s ease-in-out;}
.mytest:hover{-webkit-transform:rotate(360deg);width:120px;height:120px;line-height:120px;}
</style>
</head>
<body>
<div class="mytest">
自定义挂件
</div>
</body>
</html>

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>EasyUI实现windows桌面特效</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/easyui.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/app.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/icon.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="js/jquery.app.js" charset="utf-8"></script>
<script type="text/javascript" src="js/initApp.js" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
	$.messager.alert("内容","欢迎访问内容，您现在可以体验改应用了，更多JS代码请继续关注<a style='color:green' target='_blank' href='#'>内容网页特效</a>");
	
   if($.browser.msie && parseInt($.browser.version) < 8){ 
      $.messager.alert("温馨提示","您当前正在使用的是IE"+$.browser.version+"。该程序支持<a style='color:green' target='_blank' href='http://windows.microsoft.com/zh-CN/internet-explorer/products/ie/home'>IE8.0</a>以上版本及谷歌，火狐..");
    }
    try{
    　    　top.location.hostname;
    　　if (top.location.hostname != window.location.hostname) {
    　　　　top.location.href =window.location.href;
    　　}
    }
    catch(e){
    　　top.location.href = window.location.href;
    }
});
</script>
</head>
<body>
</body>
</html>

JS代码(initApp.js):

$(function (){
	$('body').app({
	onTaskBlankContextMenu:onTaskBlankContextMenu,onAppContextMenu:onAppContextMenu,onWallContextMenu:onWallContextMenu,onStartMenuClick:onStartMenuClick}
);
	function onStartMenuClick(item){
	var data = $(item.target).data("data");
	$('body').app("createwindow",data);
}
var appListMenuData = [{
	"text":"打开"}
,{
	"text":"关闭"}
,{
	"text":"关闭其他"}
,{
	"text":"关闭所有"}
,{
	"text":"任务管理器"}
,{
	"text":"属性"}
];
	var appListMenu = $('body').app('createMenu',{
	data:appListMenuData}
);
	function onTaskBlankContextMenu(e,appid){
	if (appid){
	console.log(appid);
	appListMenu.menu('findItem','任务管理器').target.style.display = 'none';
	appListMenu.menu('findItem','属性').target.style.display = 'none';
	appListMenu.menu('findItem','打开').target.style.display = 'block';
	appListMenu.menu('findItem','关闭').target.style.display = 'block';
	appListMenu.menu('findItem','关闭其他').target.style.display = 'block';
	appListMenu.menu('findItem','关闭所有').target.style.display = 'block';
}
else{
	appListMenu.menu('findItem','任务管理器').target.style.display = 'block';
	appListMenu.menu('findItem','属性').target.style.display = 'block';
	appListMenu.menu('findItem','打开').target.style.display = 'none';
	appListMenu.menu('findItem','关闭').target.style.display = 'none';
	appListMenu.menu('findItem','关闭其他').target.style.display = 'none';
	appListMenu.menu('findItem','关闭所有').target.style.display = 'none';
}
appListMenu.menu('show',{
	left:e.pageX,top:e.pageY}
);
	e.preventDefault();
}
var wallMenuData = [{
	"text":"属性","href":"http://sc.chinaz.com"}
,'-',{
	"text":"关于","href":"http://sc.chinaz.com"}
];
	var appMenuData = [{
	"text":"打开"}
,'-',{
	"text":"属性"}
];
	var wallMenu = $('body').app('createMenu',{
	data:wallMenuData,opt:{
	onClick:onStartMenuClick}
}
);
	var appMenu = $('body').app('createMenu',{
	data:appMenuData,opt:{
	onClick:onAppContextMenuClick}
}
);
	var APPID;
	function onAppContextMenu(e,appid){
	appMenu.menu('show',{
	left:e.pageX,top:e.pageY}
);
	APPID = appid;
}
function onAppContextMenuClick(item){
	if(item.text == '打开'){
	$("li[app_id='"+APPID+"']").dblclick();
}
}
function onWallContextMenu(e){
	wallMenu.menu('show',{
	left:e.pageX,top:e.pageY}
);
}
}
);

CSS代码(app.css):

img{border:none;}
.app-wall{background:url('../images/wallpaper.jpg') fixed no-repeat center;position:relative;overflow:hidden;}
.app-container{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;overflow:hidden;margin:0;padding:0;}
.app-container li{list-style:none;position:absolute;padding:10px 0;text-align:center;color:#fff;margin:0;}
.shortcut-container li img{display:block;margin:auto;border-radius:3px;}
.app-container li em{display:none;position:absolute;top:0;left:0;z-index:0;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;background:#fff;opacity:0.12;filter:alpha(opacity=12);}
.app-container li:hover em,.app-container li.hover em,.app-container li.select em{display:block;}
.app-container li.focus em{display:block;opacity:0.25;filter:alpha(opacity=25);}
.app-container li span{position:relative;z-index:1;display:inline-block;height:20px;margin-top:5px;padding:0 8px;line-height:20px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:white;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/shortcut_text.png',sizingMethod='scale');_filter:none;_background:#1B3E65;cursor:default;_cursor:pointer;-webkit-user-select:none;-moz-user-select:none;}
/************************************************************/
.app-taskBar{padding:0;height:100%;width:100%;overflow:hidden;position:relative;}
.app-taskList-x{border:none;position:relative;overflow:hidden;padding:2px;overflow:hidden;float:left;height:30px;}
.app-taskList-y{border:none;position:absolute;overflow:hidden;padding:2px;overflow:hidden;top:30px;width:30px;}
.app-taskBar-bg1{background:url(../images/taskbuttons-panel-bg.gif);}
.app-taskBar-bg2{background:url(../images/taskbuttons-panel-bg2.gif);}
.app-scroll-left{position:absolute;left:0px;top:1px;width:18px;height:28px!important;height:30px;border:1px solid #8DB2E3;font-size:1px;z-index:1;display:none;cursor:pointer;background:#E0ECFF url('../images/app_leftarrow.png') no-repeat 1px 5px;}
.app-scroll-right{position:absolute;right:0;top:1px;width:18px;height:28px!important;height:30px;border:1px solid #8DB2E3;font-size:1px;z-index:1;display:none;cursor:pointer;background:#E0ECFF url('../images/app_rightarrow.png') no-repeat 2px 5px;}
.app-scroll-top{z-index:1;}
.app-scroll-bottom{z-index:1;}
.app-list-wrap{position:relative;left:0px;overflow:hidden;margin:0px;padding:0px;}
.app-list-list{list-style-type:none;height:30px;margin:1px 0 0 5px;padding:0px;padding-left:4px;font-size:12px;width:5000px;}
.app-list-list li{float:left;display:inline-block;margin-right:4px;margin-bottom:-1px;padding:0;position:relative;radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;height:25px;width:100px;line-height:25px;text-align:center;white-space:nowrap;padding:0px 10px;color:#FFF;cursor:pointer;background:url(../images/taskbg.png) no-repeat;}
.app-list-list li.selected{width:100px;font-weight:bolder;cursor:pointer;background:url(../images/taskbg-select.png) no-repeat;}
.app-taskBar-calendar-x{color:white;text-align:center;position:absolute;right:2px;top:2px;_top:4px;cursor:default;}
.app-taskBar-calendar-y{position:absolute;vertical-align:middle;text-align:center;bottom:0px;color:white;cursor:default;}
/******************************************************************/
span.app-startMenu-x{margin-left:5px;float:left;width:30px;height:30px;cursor:pointer;background:url(../images/start.png) left center no-repeat;}
span.app-startMenu-y{margin-left:4px;width:30px;height:30px;cursor:pointer;position:absolute;top:4px;background:url(../images/start.png) left center no-repeat;}
span.app-startMenu-x:hover,span.app-startMenu-y:hover,span.app-startMenu-hover{background:url(../images/start2.png) left center no-repeat;}
/******************************************************************/
.app-spacer{border:2px dashed #eee;}
.app-widget{position:absolute;right:0;cursor:default;}

附件:下载该文件资源,减少时间成本(增值服务)