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 相关文章推荐
niceTitle 基于jquery的超链接提示插件
May 31 Javascript
基于jquery tab切换(防止页面刷新)
May 23 Javascript
JS使用replace()方法和正则表达式进行字符串的搜索与替换实例
Apr 10 Javascript
实例说明为什么不要行内使用javascript
Apr 18 Javascript
让JavaScript的Alert弹出框失效的方法禁止弹出警告框
Sep 03 Javascript
根据输入邮箱号跳转到相应登录地址的解决方法
Dec 13 Javascript
微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码下载】
Dec 06 Javascript
vue中的$emit 与$on父子组件与兄弟组件的之间通信方式
May 13 Javascript
使用vue完成微信公众号网页小记(推荐)
Apr 28 Javascript
koa2 用户注册、登录校验与加盐加密的实现方法
Jul 22 Javascript
JavaScript函数IIFE使用详解
Oct 21 Javascript
vuex state中的数组变化监听实例
Nov 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基础学习之变量的使用
2011/06/09 PHP
php实现将任意进制数转换成10进制的方法
2015/04/17 PHP
js动态在form上插入enctype=multipart/form-data的问题
2012/05/24 Javascript
angularjs在ng-repeat中使用ng-model遇到的问题
2016/01/21 Javascript
TypeOf这些知识点你了解吗
2016/02/21 Javascript
全面解析Bootstrap中scrollspy(滚动监听)的使用方法
2016/06/06 Javascript
js操作XML文件的实现方法兼容IE与FireFox
2016/06/25 Javascript
AngularJS实现一次监听多个值发生的变化
2016/08/31 Javascript
使用JS轻松实现ionic调用键盘搜索功能(超实用)
2016/09/06 Javascript
easyui-combobox 实现简单的自动补全功能示例
2016/11/08 Javascript
Vue 过滤器filters及基本用法
2017/12/26 Javascript
在Vant的基础上封装下拉日期控件的代码示例
2018/12/05 Javascript
[43:48]Ti4正赛第一天 VG vs NEWBEE 2
2014/07/19 DOTA
python 从远程服务器下载日志文件的程序
2013/02/10 Python
python实现在无须过多援引的情况下创建字典的方法
2014/09/25 Python
Python多线程编程(一):threading模块综述
2015/04/05 Python
Python中使用ElementTree解析XML示例
2015/06/02 Python
由浅入深讲解python中的yield与generator
2017/04/05 Python
python中安装模块包版本冲突问题的解决
2017/05/02 Python
Python+tkinter使用80行代码实现一个计算器实例
2018/01/16 Python
Python3爬虫使用Fidder实现APP爬取示例
2018/11/27 Python
python爬虫的一个常见简单js反爬详解
2019/07/09 Python
Python如何实现大型数组运算(使用NumPy)
2020/07/24 Python
美国生日蛋糕店:Bake Me A Wish!
2017/02/08 全球购物
Europcar西班牙:全球汽车租赁领域的领导者
2018/09/17 全球购物
美国最受欢迎的度假目的地优惠套餐:BookVIP
2018/09/27 全球购物
BSTN意大利:德国街头和运动文化高品质商店
2020/12/22 全球购物
仓库主管的岗位职责
2013/12/04 职场文书
医药类个人求职的自我评价
2014/02/12 职场文书
幼师求职自荐信
2014/05/31 职场文书
读群众路线的心得体会
2014/09/03 职场文书
党员群众路线对照检查材料思想汇报
2014/09/17 职场文书
CSS变量实现主题切换的方法
2021/06/23 HTML / CSS
vue+echarts实现多条折线图
2022/03/21 Vue.js
Java十分钟精通进阶适配器模式
2022/04/06 Java/Android
linux目录管理方法介绍
2022/06/01 Servers