jQuery制作仿腾讯web qq用户体验桌面


Posted in Javascript onAugust 20, 2013

jquery ui制作仿腾讯web qq用户界面,酷炫个性的desktop桌面特效展示支持各大主流浏览器IE6以上。jQuery用户体验设计,web qq桌面十分动感酷炫。
jQuery制作仿腾讯web qq用户体验桌面 
查看演示:

<!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>jquery ui仿腾讯web qq界面desktop酷炫特效</title> 
<meta name="description" content="jquery ui制作仿腾讯web qq用户界面,酷炫个性的desktop桌面特效展示支持各大主流浏览器IE6以上。jQuery用户体验设计,web qq桌面十分动感酷炫。" /> 
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> 
<script type="text/javascript" src="js/myLib.js"></script> 
<script type="text/javascript" src="js/function.js"></script> 
</head> 
<body> 
<a href="http://www.jsfoot.com/" class="powered_by">Powered by jsfoot.com</a> 
<div id="wallpapers"></div> 
<div id="navBar"><a href="#" class="currTab" title="桌面1"></a><a href="#" title="桌面2"></a><a href="#" title="桌面3"></a><a href="#" title="桌面4"></a></div> 
<div id="desktopPanel"> 
<div id="desktopInnerPanel"> 
<ul class="deskIcon currDesktop"> 
<li class="desktop_icon" id="leshiwang"><span class="icon"><img src="icon/icon4.png"/></span><div class="text">乐视网<s></s></div></li> 
<li class="desktop_icon" id="Pixlr"><span class="icon"><img src="icon/icon6.png"/></span><div class="text">Pixlr<s></s></div></li> 
<li class="desktop_icon" id="dubianFim"><span class="icon"><img src="icon/icon7.png"/></span><div class="text">豆瓣FIM<s></s></div></li> 
<li class="desktop_icon" id="kuwoMusic"><span class="icon"><img src="icon/icon8.png"/></span><div class="text">酷我音乐盒<s></s></div></li> 
<li class="desktop_icon" id="qidian"><span class="icon"><img src="icon/icon9.png"/></span><div class="text">起点中文<s></s></div></li> 
<li class="desktop_icon" id="hudong"><span class="icon"><img src="icon/icon10.png"/></span><div class="text">互动百科<s></s></div></li> 
<li class="desktop_icon" id="qianqianMusic"><span class="icon"><img src="icon/icon5.png"/></span><div class="text">千千音乐<s></s></div></li> 
<li class="desktop_icon add_icon"><span class="icon"><img src="images/add_icon.png"/></span><div class="text">添加<s></s></div></li> 
</ul> 
<ul class="deskIcon"> 
<li class="desktop_icon" id="zfMeishi"><span class="icon"><img src="icon/icon13.png"/></span><div class="text">主妇美食<s></s></div></li> 
<li class="desktop_icon" id="mglvyou"><span class="icon"><img src="icon/icon12.png"/></span><div class="text">芒果旅游<s></s></div></li> 
<li class="desktop_icon" id="taobao"><span class="icon"><img src="icon/icon14.png"/></span><div class="text">淘宝网<s></s></div></li> 
<li class="desktop_icon" id="qingshu"><span class="icon"><img src="icon/icon15.png"/></span><div class="text">情书<s></s></div></li> 
<li class="desktop_icon" id="fenghuang"><span class="icon"><img src="icon/icon16.png"/></span><div class="text">凤凰网<s></s></div></li> 
<li class="desktop_icon" id="zhongguancun"><span class="icon"><img src="icon/icon17.png"/></span><div class="text">中关村在线<s></s></div></li> 
<li class="desktop_icon add_icon"><span class="icon"><img src="images/add_icon.png"/></span><div class="text">添加<s></s></div></li> 
</ul> 
<ul class="deskIcon"> 
<li class="desktop_icon" id="win35"><span class="icon"><img src="icon/icon18.png"/></span><div class="text">搜狐汽车<s></s></div></li> 
<li class="desktop_icon" id="win36"><span class="icon"><img src="icon/icon19.png"/></span><div class="text">布丁电影票<s></s></div></li> 
<li class="desktop_icon" id="win37"><span class="icon"><img src="icon/icon8.png"/></span><div class="text">中国数学资源网<s></s></div></li> 
<li class="desktop_icon add_icon"><span class="icon"><img src="images/add_icon.png"/></span><div class="text">添加<s></s></div></li> 
</ul> 
<ul class="deskIcon"> 
<li class="desktop_icon" id="win38"><span class="icon"><img src="icon/icon20.png"/></span><div class="text">火影忍者漫画动画<s></s></div></li> 
<li class="desktop_icon" id="win39"><span class="icon"><img src="icon/icon21.png"/></span><div class="text">潇湘书院<s></s></div></li> 
<li class="desktop_icon add_icon"><span class="icon"><img src="images/add_icon.png"/></span><div class="text">添加<s></s></div></li> 
</ul> 
</div> 
</div><!--desktopPanel end--> 
<div id="taskBarWrap"> 
<div id="taskBar"> 
<div id="leftBtn"><a href="#" class="upBtn"></a></div> 
<div id="rightBtn"><a href="#" class="downBtn"></a></div> 
<div id="task_lb_wrap"><div id="task_lb"></div></div> 
</div> 
</div><!--taskBarWrap end--> 
<div id="lr_bar"> 
<ul id="default_app"> 
<li id="app0"><span><img src="icon/icon1.png" title="我的博客"/></span><div class="text">我的博客<s></s></div></li> 
<li id="app1"><span><img src="icon/icon2.png" title="关于我"/></span><div class="text">关于我<s></s></div></li> 
<li id="app2"><span><img src="icon/icon3.png" title="作品"/></span><div class="text">作品<s></s></div></li> 
<li id="app3"><span><img src="icon/icon11.png" title="资源分享"/></span><div class="text">资源分享<s></s></div></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> jsfoot</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><!--lr_bar end--> </body> 
</html>
Javascript 相关文章推荐
JavaScript 动态创建VML的方法
Oct 14 Javascript
使用Plupload实现直接上传附件至七牛云存储
Dec 26 Javascript
JavaScript 模块的循环加载实现方法
Dec 13 Javascript
Jquery Easyui对话框组件Dialog使用详解(14)
Dec 19 Javascript
拖动时防止选中
Feb 03 Javascript
Bootstrap表格使用方法详解
Feb 17 Javascript
webpack教程之webpack.config.js配置文件
Jul 05 Javascript
实例解析ES6 Proxy使用场景介绍
Jan 08 Javascript
JS数组实现分类统计实例代码
Sep 30 Javascript
axios封装,使用拦截器统一处理接口,超详细的教程(推荐)
May 02 Javascript
vue组件命名和props命名代码详解
Sep 01 Javascript
JavaScript常用工具函数大全
May 06 Javascript
jquery indexOf使用方法
Aug 19 #Javascript
js里取容器大小、定位、距离等属性搜集整理
Aug 19 #Javascript
没有document.getElementByName方法
Aug 19 #Javascript
js中符号转意问题示例探讨
Aug 19 #Javascript
window.opener用法和用途实例介绍
Aug 19 #Javascript
JavaScript异步编程:异步数据收集的具体方法
Aug 19 #Javascript
文本框中禁止非数字字符输入比如手机号码、邮编
Aug 19 #Javascript
You might like
PHP 中的类
2006/10/09 PHP
使用php转义输出HTML到JavaScript
2015/03/27 PHP
PHP的Json中文处理解决方案
2016/09/29 PHP
利用PHP实现开心消消乐的算法示例
2017/10/12 PHP
PHP使用标准库spl实现的观察者模式示例
2018/08/04 PHP
window.location.href = window.location.href 跳转无反应 a超链接onclick事件写法
2013/08/21 Javascript
Js使用WScript.Shell对象执行.bat文件和cmd命令
2014/12/18 Javascript
JavaScript设计模式学习之“类式继承”
2015/03/12 Javascript
TinyMCE汉化及本地上传图片功能实例详解
2016/05/31 Javascript
微信小程序实现图片自适应(支持多图)
2017/01/25 Javascript
AngularJS监听ng-repeat渲染完成的两种方法
2018/01/16 Javascript
angular-tree-component的使用详解
2018/07/30 Javascript
微信小程序开发数据缓存基础知识辨析及运用实例详解
2020/11/06 Javascript
[03:40]DOTA2抗疫特别篇《英雄年代》
2020/02/28 DOTA
一个检测OpenSSL心脏出血漏洞的Python脚本分享
2014/04/10 Python
python类的方法属性与方法属性的动态绑定代码详解
2017/12/27 Python
详解Python之unittest单元测试代码
2018/01/24 Python
IntelliJ IDEA安装运行python插件方法
2018/12/10 Python
Django框架自定义session处理操作示例
2019/05/27 Python
Python安装与基本数据类型教程详解
2019/05/29 Python
python实现爬取百度图片的方法示例
2019/07/06 Python
pycharm新建Vue项目的方法步骤(图文)
2020/03/04 Python
Tensorflow中的dropout的使用方法
2020/03/13 Python
python递归调用中的坑:打印有值, 返回却None
2020/03/16 Python
Python多线程通信queue队列用法实例分析
2020/03/24 Python
Python工程师必考的6个经典面试题
2020/06/28 Python
Pycharm Plugins加载失败问题解决方案
2020/11/28 Python
自我鉴定怎么写
2014/01/12 职场文书
护士毕业生自我鉴定
2014/02/08 职场文书
五年级数学教学反思
2014/02/11 职场文书
《诚实与信任》教学反思
2014/04/10 职场文书
父母对孩子说的话
2014/04/12 职场文书
2015新生加入学生会自荐书
2015/03/24 职场文书
2016年度继续教育学习心得体会
2016/01/19 职场文书
实习报告怎么写
2019/06/20 职场文书
asyncio异步编程之Task对象详解
2022/03/13 Python