jQuery制作web qq用户体验桌面

于 2013-08-20 07:56:00 发布 · 222 阅读 · 0
文章标签：

#xhtml #javascript #ui #ViewUI

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

jquery ui仿腾讯web qq界面desktop酷炫特效

查看演示>>

Html代码 收藏代码
  1. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <htmlxmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
  5. <title>jqueryui仿腾讯webqq界面desktop酷炫特效</title>
  6. <metaname="description"content="jqueryui制作仿腾讯webqq用户界面，酷炫个性的desktop桌面特效展示支持各大主流浏览器IE6以上。jQuery用户体验设计,webqq桌面十分动感酷炫。"/>
  7. <scripttype="text/javascript"src="js/jquery-1.7.1.min.js"></script>
  8. <scripttype="text/javascript"src="js/myLib.js"></script>
  9. <scripttype="text/javascript"src="js/function.js"></script>
  10. </head>
  11. <body>
  13. <ahref="http://www.jsfoot.com/"class="powered_by">Poweredbyjsfoot.com</a>
  15. <divid="wallpapers"></div>
  17. <divid="navBar"><ahref="#"class="currTab"title="桌面1"></a><ahref="#"title="桌面2"></a><ahref="#"title="桌面3"></a><ahref="#"title="桌面4"></a></div>
  19. <divid="desktopPanel">
  20. <divid="desktopInnerPanel">
  21. <ulclass="deskIconcurrDesktop">
  22. <liclass="desktop_icon"id="leshiwang"><spanclass="icon"><imgsrc="icon/icon4.png"/></span><divclass="text">乐视网<s></s></div></li>
  23. <liclass="desktop_icon"id="Pixlr"><spanclass="icon"><imgsrc="icon/icon6.png"/></span><divclass="text">Pixlr<s></s></div></li>
  24. <liclass="desktop_icon"id="dubianFim"><spanclass="icon"><imgsrc="icon/icon7.png"/></span><divclass="text">豆瓣FIM<s></s></div></li>
  25. <liclass="desktop_icon"id="kuwoMusic"><spanclass="icon"><imgsrc="icon/icon8.png"/></span><divclass="text">酷我音乐盒<s></s></div></li>
  26. <liclass="desktop_icon"id="qidian"><spanclass="icon"><imgsrc="icon/icon9.png"/></span><divclass="text">起点中文<s></s></div></li>
  27. <liclass="desktop_icon"id="hudong"><spanclass="icon"><imgsrc="icon/icon10.png"/></span><divclass="text">互动百科<s></s></div></li>
  28. <liclass="desktop_icon"id="qianqianMusic"><spanclass="icon"><imgsrc="icon/icon5.png"/></span><divclass="text">千千音乐<s></s></div></li>
  29. <liclass="desktop_iconadd_icon"><spanclass="icon"><imgsrc="images/add_icon.png"/></span><divclass="text">添加<s></s></div></li>
  30. </ul>
  31. <ulclass="deskIcon">
  32. <liclass="desktop_icon"id="zfMeishi"><spanclass="icon"><imgsrc="icon/icon13.png"/></span><divclass="text">主妇美食<s></s></div></li>
  33. <liclass="desktop_icon"id="mglvyou"><spanclass="icon"><imgsrc="icon/icon12.png"/></span><divclass="text">芒果旅游<s></s></div></li>
  34. <liclass="desktop_icon"id="taobao"><spanclass="icon"><imgsrc="icon/icon14.png"/></span><divclass="text">淘宝网<s></s></div></li>
  35. <liclass="desktop_icon"id="qingshu"><spanclass="icon"><imgsrc="icon/icon15.png"/></span><divclass="text">情书<s></s></div></li>
  36. <liclass="desktop_icon"id="fenghuang"><spanclass="icon"><imgsrc="icon/icon16.png"/></span><divclass="text">凤凰网<s></s></div></li>
  37. <liclass="desktop_icon"id="zhongguancun"><spanclass="icon"><imgsrc="icon/icon17.png"/></span><divclass="text">中关村在线<s></s></div></li>
  38. <liclass="desktop_iconadd_icon"><spanclass="icon"><imgsrc="images/add_icon.png"/></span><divclass="text">添加<s></s></div></li>
  39. </ul>
  40. <ulclass="deskIcon">
  41. <liclass="desktop_icon"id="win35"><spanclass="icon"><imgsrc="icon/icon18.png"/></span><divclass="text">搜狐汽车<s></s></div></li>
  42. <liclass="desktop_icon"id="win36"><spanclass="icon"><imgsrc="icon/icon19.png"/></span><divclass="text">布丁电影票<s></s></div></li>
  43. <liclass="desktop_icon"id="win37"><spanclass="icon"><imgsrc="icon/icon8.png"/></span><divclass="text">中国数学资源网<s></s></div></li>
  44. <liclass="desktop_iconadd_icon"><spanclass="icon"><imgsrc="images/add_icon.png"/></span><divclass="text">添加<s></s></div></li>
  45. </ul>
  46. <ulclass="deskIcon">
  47. <liclass="desktop_icon"id="win38"><spanclass="icon"><imgsrc="icon/icon20.png"/></span><divclass="text">火影忍者漫画动画<s></s></div></li>
  48. <liclass="desktop_icon"id="win39"><spanclass="icon"><imgsrc="icon/icon21.png"/></span><divclass="text">潇湘书院<s></s></div></li>
  49. <liclass="desktop_iconadd_icon"><spanclass="icon"><imgsrc="images/add_icon.png"/></span><divclass="text">添加<s></s></div></li>
  50. </ul>
  51. </div>
  52. </div><!--desktopPanelend-->
  54. <divid="taskBarWrap">
  55. <divid="taskBar">
  56. <divid="leftBtn"><ahref="#"class="upBtn"></a></div>
  57. <divid="rightBtn"><ahref="#"class="downBtn"></a></div>
  58. <divid="task_lb_wrap"><divid="task_lb"></div></div>
  59. </div>
  60. </div><!--taskBarWrapend-->
  62. <divid="lr_bar">
  63. <ulid="default_app">
  64. <liid="app0"><span><imgsrc="icon/icon1.png"title="我的博客"/></span><divclass="text">我的博客<s></s></div></li>
  65. <liid="app1"><span><imgsrc="icon/icon2.png"title="关于我"/></span><divclass="text">关于我<s></s></div></li>
  66. <liid="app2"><span><imgsrc="icon/icon3.png"title="作品"/></span><divclass="text">作品<s></s></div></li>
  67. <liid="app3"><span><imgsrc="icon/icon11.png"title="资源分享"/></span><divclass="text">资源分享<s></s></div></li>
  68. </ul>
  70. <divid="default_tools"><spanid="showZm_btn"title="全屏"></span><spanid="shizhong_btn"title="时钟"></span><spanid="weather_btn"title="天气"></span><spanid="them_btn"title="主题"></span></div>
  72. <divid="start_block">
  73. <atitle="开始"id="start_btn"></a>
  74. <divid="start_item">
  75. <ulclass="itemadmin">
  76. <li><spanclass="adminImg"></span>jsfoot</li>
  77. </ul>
  78. <ulclass="item">
  79. <li><spanclass="sitting_btn"></span>系统设置</li>
  80. <li><spanclass="help_btn"></span>使用指南<b></b></li>
  81. <li><spanclass="about_btn"></span>关于我们</li>
  82. <li><spanclass="logout_btn"></span>退出系统</li>
  83. </ul>
  84. </div>
  85. </div>
  87. </div><!--lr_barend-->
  90. </body>
  91. </html>
iteye_19603
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值