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 相关文章推荐
Prototype Hash对象 学习
Jul 19 Javascript
IE之动态添加DOM节点触发window.resize事件
Jul 27 Javascript
js下关于onmouseout、事件冒泡的问题经验小结
Dec 09 Javascript
简介JavaScript中substring()方法的使用
Jun 06 Javascript
浅析jquery与checkbox的checked属性的问题
Apr 27 Javascript
JQuery为元素添加样式的实现方法
Jul 20 Javascript
node.js(express)中使用Jcrop进行图片剪切上传功能
Apr 21 Javascript
jQuery制作input提示内容(兼容IE8以上)
Jul 05 jQuery
深入浅析var,let,const的异同点
Aug 07 Javascript
Javascript三种字符串连接方式及性能比较
May 28 Javascript
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
Oct 10 jQuery
微信小程序实现录制、试听、上传音频功能(带波形图)
Feb 27 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
thinkphp实现数组分页示例
2014/04/13 PHP
Windows和Linux中php代码调试工具Xdebug的安装与配置详解
2014/05/08 PHP
详解PHP的Yii框架中日志的相关配置及使用
2015/12/08 PHP
form自动提交实例讲解
2017/07/10 PHP
用于自动添加Digg This!按钮的JavaScript
2006/12/23 Javascript
prototype Element学习笔记(篇一)
2008/10/26 Javascript
JavaScript获取和设置CheckBox状态的简单方法
2013/07/05 Javascript
BAT及各大互联网公司2014前端笔试面试题--JavaScript篇
2014/10/29 Javascript
JS产生随机数的几个用法详解
2016/06/22 Javascript
用jQuery旋转插件jqueryrotate制作转盘抽奖
2017/02/10 Javascript
jQuery animate()实现背景色渐变效果的处理方法【使用jQuery.color.js插件】
2017/03/15 Javascript
SpringMVC简单整合Angular2的示例
2017/07/31 Javascript
vue写一个组件
2018/04/09 Javascript
详解vue axios二次封装
2018/07/22 Javascript
JS实现打字游戏
2019/12/17 Javascript
vue.js iview打包上线后字体图标不显示解决办法
2020/01/20 Javascript
Python 基础之字符串string详解及实例
2017/04/01 Python
Python编程实现输入某年某月某日计算出这一天是该年第几天的方法
2017/04/18 Python
Python实现批量读取图片并存入mongodb数据库的方法示例
2018/04/02 Python
PyQt5实现无边框窗口的标题拖动和窗口缩放
2018/04/19 Python
Python使用pickle模块报错EOFError Ran out of input的解决方法
2018/08/16 Python
解决pyinstaller打包exe文件出现命令窗口一闪而过的问题
2018/10/31 Python
django认证系统 Authentication使用详解
2019/07/22 Python
Flask框架模板渲染操作简单示例
2019/07/31 Python
Python正则表达式急速入门(小结)
2019/12/16 Python
详细分析Python collections工具库
2020/07/16 Python
英国领先的珍珠首饰品牌:Orchira
2016/09/11 全球购物
戴尔荷兰官方网站:Dell荷兰
2020/10/04 全球购物
Ajax请求总共有多少种Callback
2016/07/17 面试题
校园报刊亭的创业计划书
2014/01/02 职场文书
初中优秀教师事迹材料
2014/08/18 职场文书
验房委托书
2014/08/30 职场文书
简易离婚协议书范本2014
2014/10/15 职场文书
党的群众路线教育实践活动学习笔记范文
2014/11/06 职场文书
销售业务员岗位职责
2015/02/13 职场文书
信访维稳承诺书
2015/05/04 职场文书