jQuery制作web qq用户体验桌面

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

查看演示>>

Html代码

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>jqueryui仿腾讯webqq界面desktop酷炫特效</title>
<metaname="description"content="jqueryui制作仿腾讯webqq用户界面，酷炫个性的desktop桌面特效展示支持各大主流浏览器IE6以上。jQuery用户体验设计,webqq桌面十分动感酷炫。"/>
<scripttype="text/javascript"src="js/jquery-1.7.1.min.js"></script>
<scripttype="text/javascript"src="js/myLib.js"></script>
<scripttype="text/javascript"src="js/function.js"></script>
</head>
<body>
<ahref="http://www.jsfoot.com/"class="powered_by">Poweredbyjsfoot.com</a>
<divid="wallpapers"></div>
<divid="navBar"><ahref="#"class="currTab"title="桌面1"></a><ahref="#"title="桌面2"></a><ahref="#"title="桌面3"></a><ahref="#"title="桌面4"></a></div>
<divid="desktopPanel">
<divid="desktopInnerPanel">
<ulclass="deskIconcurrDesktop">
<liclass="desktop_icon"id="leshiwang"><spanclass="icon"><imgsrc="icon/icon4.png"/></span><divclass="text">乐视网<s></s></div></li>
<liclass="desktop_icon"id="Pixlr"><spanclass="icon"><imgsrc="icon/icon6.png"/></span><divclass="text">Pixlr<s></s></div></li>
<liclass="desktop_icon"id="dubianFim"><spanclass="icon"><imgsrc="icon/icon7.png"/></span><divclass="text">豆瓣FIM<s></s></div></li>
<liclass="desktop_icon"id="kuwoMusic"><spanclass="icon"><imgsrc="icon/icon8.png"/></span><divclass="text">酷我音乐盒<s></s></div></li>
<liclass="desktop_icon"id="qidian"><spanclass="icon"><imgsrc="icon/icon9.png"/></span><divclass="text">起点中文<s></s></div></li>
<liclass="desktop_icon"id="hudong"><spanclass="icon"><imgsrc="icon/icon10.png"/></span><divclass="text">互动百科<s></s></div></li>
<liclass="desktop_icon"id="qianqianMusic"><spanclass="icon"><imgsrc="icon/icon5.png"/></span><divclass="text">千千音乐<s></s></div></li>
<liclass="desktop_iconadd_icon"><spanclass="icon"><imgsrc="data:images/add_icon.png"/></span><divclass="text">添加<s></s></div></li>
</ul>
<ulclass="deskIcon">
<liclass="desktop_icon"id="zfMeishi"><spanclass="icon"><imgsrc="icon/icon13.png"/></span><divclass="text">主妇美食<s></s></div></li>
<liclass="desktop_icon"id="mglvyou"><spanclass="icon"><imgsrc="icon/icon12.png"/></span><divclass="text">芒果旅游<s></s></div></li>
<liclass="desktop_icon"id="taobao"><spanclass="icon"><imgsrc="icon/icon14.png"/></span><divclass="text">淘宝网<s></s></div></li>
<liclass="desktop_icon"id="qingshu"><spanclass="icon"><imgsrc="icon/icon15.png"/></span><divclass="text">情书<s></s></div></li>
<liclass="desktop_icon"id="fenghuang"><spanclass="icon"><imgsrc="icon/icon16.png"/></span><divclass="text">凤凰网<s></s></div></li>
<liclass="desktop_icon"id="zhongguancun"><spanclass="icon"><imgsrc="icon/icon17.png"/></span><divclass="text">中关村在线<s></s></div></li>
<liclass="desktop_iconadd_icon"><spanclass="icon"><imgsrc="data:images/add_icon.png"/></span><divclass="text">添加<s></s></div></li>
</ul>
<ulclass="deskIcon">
<liclass="desktop_icon"id="win35"><spanclass="icon"><imgsrc="icon/icon18.png"/></span><divclass="text">搜狐汽车<s></s></div></li>
<liclass="desktop_icon"id="win36"><spanclass="icon"><imgsrc="icon/icon19.png"/></span><divclass="text">布丁电影票<s></s></div></li>
<liclass="desktop_icon"id="win37"><spanclass="icon"><imgsrc="icon/icon8.png"/></span><divclass="text">中国数学资源网<s></s></div></li>
<liclass="desktop_iconadd_icon"><spanclass="icon"><imgsrc="data:images/add_icon.png"/></span><divclass="text">添加<s></s></div></li>
</ul>
<ulclass="deskIcon">
<liclass="desktop_icon"id="win38"><spanclass="icon"><imgsrc="icon/icon20.png"/></span><divclass="text">火影忍者漫画动画<s></s></div></li>
<liclass="desktop_icon"id="win39"><spanclass="icon"><imgsrc="icon/icon21.png"/></span><divclass="text">潇湘书院<s></s></div></li>
<liclass="desktop_iconadd_icon"><spanclass="icon"><imgsrc="data:images/add_icon.png"/></span><divclass="text">添加<s></s></div></li>
</ul>
</div>
</div>
<divid="taskBarWrap">
<divid="taskBar">
<divid="leftBtn"><ahref="#"class="upBtn"></a></div>
<divid="rightBtn"><ahref="#"class="downBtn"></a></div>
<divid="task_lb_wrap"><divid="task_lb"></div></div>
</div>
</div>
<divid="lr_bar">
<ulid="default_app">
<liid="app0"><span><imgsrc="icon/icon1.png"title="我的博客"/></span><divclass="text">我的博客<s></s></div></li>
<liid="app1"><span><imgsrc="icon/icon2.png"title="关于我"/></span><divclass="text">关于我<s></s></div></li>
<liid="app2"><span><imgsrc="icon/icon3.png"title="作品"/></span><divclass="text">作品<s></s></div></li>
<liid="app3"><span><imgsrc="icon/icon11.png"title="资源分享"/></span><divclass="text">资源分享<s></s></div></li>
</ul>
<divid="default_tools"><spanid="showZm_btn"title="全屏"></span><spanid="shizhong_btn"title="时钟"></span><spanid="weather_btn"title="天气"></span><spanid="them_btn"title="主题"></span></div>
<divid="start_block">
<atitle="开始"id="start_btn"></a>
<divid="start_item">
<ulclass="itemadmin">
<li><spanclass="adminImg"></span>jsfoot</li>
</ul>
<ulclass="item">
<li><spanclass="sitting_btn"></span>系统设置</li>
<li><spanclass="help_btn"></span>使用指南<b></b></li>
<li><spanclass="about_btn"></span>关于我们</li>
<li><spanclass="logout_btn"></span>退出系统</li>
</ul>
</div>
</div>
</div>
</body>
</html>

jQuery制作web qq用户体验桌面相关推荐

桌面系统（web前端）jQuery制作Web桌面系统界面类似WebQQ桌面布局
源码不是我写的,但是我在基础上修改了一些内容. 可参考,http://www.xwcms.net/webAnnexImages/fileAnnex/20140220/82693/index.html ...
使用 jquery 制作简单QQ 聊天窗口制作课工厂简单窗口---------2017-7-1 16:08
1,制作qq 窗口 <!DOCTYPE html> <html><head><title>QQ聊天工具</title><meta na ...
腾讯2013新版QQ用户体验-差评！
搞了两天,终于还是把QQ2013的新版本给删了,现在正在找未升级或者用2012. 腾讯这次出大事了,不知道产品经理和交互设计师们怎么搞得,把用户都想成了是他们了(虽然我不承认比他们差劲,但是,我怎么知 ...
用户体验的要素pdf_写给设计师的用户体验基础（二）
今天为大家分享的是来自UI中国会员- 南山可的「写给设计师的<用户体验基础>(二)」 <用户体验基础>是国际交互设计基金会出版的免费著作,普及用户体验设计的基础概念,非常适合想 ...
Web 产品（桌面产品）的用户体验设计有必要借鉴移动平板触屏设备吗？
其实我倒觉得把移动设备的交互体验引入桌面是对现有pc交互流程信息扁平化和流程简化的改进.信息扁平化就是用户想得到什么信息或者获得什么体验只用记得是什么app(或者说icon)点击一下就可以了,用户不用 ...
【Telerik和Kendo UI组件】上海道宁与progress为您提供Web、移动和桌面构建功能更丰富的现代体验
Telerik和Kendo UI是 Progress产品组合的一部分建造Telerik和Kendo UI组件可以比以往更快地为 Web.移动和桌面提供良好体验 DevCraft适用于所有.NET ...
转载 - 使用HTML5、CSS3和jQuery增强网站用户体验
记得几年前如果你需要添加一些互动元素到你的网站中用来改善用户体验?是不是立刻就想到了flash实现?这彷佛年代久远的事了.使用现在最流行的Web技术HTML5,CSS3和jQuery,同样也可以实现类 ...
使用HTML5、CSS3和jQuery增强网站用户体验
记得几年前如果你需要添加一些互动元素到你的网站中用来改善用户体验?是不是立刻就想到了flash实现?这彷佛年代久远的事了.使用现在最流行的Web技术HTML5,CSS3和jQuery,同样也可以实现类 ...
改善ERP的用户体验，个性化用户界面（Jquery 提供源码）
改善ERP的用户体验,个性化用户界面(Jquery 提供源码) 这篇文章讲述的技术问题并不多,如果你是想了解技术实现,请直接跨过文章下载源码或者看 demo 我大胆起这个名字,有点标题党.希望能对一 ...

jQuery制作web qq用户体验桌面

jQuery制作web qq用户体验桌面相关推荐

最新文章

热门文章