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 相关文章推荐
js实现简单选项卡与自动切换效果的方法
Apr 10 Javascript
HTML5使用DeviceOrientation实现摇一摇功能
Jun 05 Javascript
在JavaScript应用中使用RequireJS来实现延迟加载
Jul 01 Javascript
jQuery防止重复绑定事件的解决方法
May 14 Javascript
jQuery基础_入门必看知识点
Jul 04 Javascript
jquery自定义表单验证插件
Oct 12 Javascript
BootStrap整体框架之基础布局组件
Dec 15 Javascript
浅谈Vue.js应用的四种AJAX请求数据模式
Aug 30 Javascript
微信小程序实现折叠展开效果
Jul 19 Javascript
深入分析element ScrollBar滚动组件源码
Jan 22 Javascript
JavaScript中的ES6 Proxy的具体使用
Jun 16 Javascript
vue ssr服务端渲染(小白解惑)
Nov 10 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生成zip压缩文件的方法详解
2013/06/09 PHP
详解WordPress中分类函数wp_list_categories的使用
2016/01/04 PHP
PHP文字转图片功能原理与实现方法分析
2017/08/31 PHP
PHP使用PDO操作sqlite数据库应用案例
2019/03/07 PHP
php web环境和命令行环境下查找php.ini的位置
2019/07/17 PHP
浏览器窗口加载和大小改变事件示例
2014/02/27 Javascript
jQuery构造函数init参数分析续
2015/05/13 Javascript
javascript比较两个日期相差天数的方法
2015/07/24 Javascript
jQuery实现右侧显示可向左滑动展示的深色QQ客服效果代码
2015/10/23 Javascript
JavaScript修改作用域外变量的方法
2016/03/25 Javascript
Bootstrap字体图标无法正常显示的解决方法
2016/10/08 Javascript
js与jquery分别实现tab标签页功能的方法
2016/11/18 Javascript
浅谈对Angular中的生命周期钩子的理解
2017/07/31 Javascript
jquery-file-upload 文件上传带进度条效果
2017/11/21 jQuery
解决layui表格内文本超出隐藏的问题
2019/09/12 Javascript
[51:36]EG vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
跟老齐学Python之有点简约的元组
2014/09/24 Python
零基础写python爬虫之打包生成exe文件
2014/11/06 Python
九步学会Python装饰器
2015/05/09 Python
python 用opencv调用训练好的模型进行识别的方法
2018/12/07 Python
关于sys.stdout和print的区别详解
2019/12/05 Python
关于tensorflow的几种参数初始化方法小结
2020/01/04 Python
python交互模式基础知识点学习
2020/06/18 Python
PyTorch的torch.cat用法
2020/06/28 Python
Matplotlib.pyplot 三维绘图的实现示例
2020/07/28 Python
详解如何使用CSS3中的结构伪类选择器和伪元素选择器
2020/01/06 HTML / CSS
html5实现多文件的上传示例代码
2014/02/13 HTML / CSS
世界最大的海报和艺术印刷商店:AllPosters.com
2017/02/01 全球购物
英国工艺品购物网站:Minerva Crafts
2018/01/29 全球购物
美国宠物用品网站:Value Pet Supplies
2018/03/17 全球购物
IdealFit官方网站:女性蛋白质、补充剂和运动服装
2019/03/24 全球购物
客户表扬信范文
2014/01/10 职场文书
房地产项目策划书
2014/02/05 职场文书
判缓刑人员个人思想汇报
2014/10/10 职场文书
客户付款通知书
2015/04/23 职场文书
2019自荐信该如何写呢?
2019/07/05 职场文书