天天看点
返回

jQuery制作web qq用户体验桌面

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

jQuery制作web qq用户体验桌面

查看演示>>

Html代码  

jQuery制作web qq用户体验桌面
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>jquery ui仿腾讯web qq界面desktop酷炫特效</title>  
  6. <meta name="description" content="jquery ui制作仿腾讯web qq用户界面，酷炫个性的desktop桌面特效展示支持各大主流浏览器IE6以上。jQuery用户体验设计,web qq桌面十分动感酷炫。" />  
  7. <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>  
  8. <script type="text/javascript" src="js/myLib.js"></script>  
  9. <script type="text/javascript" src="js/function.js"></script>  
  10. </head>  
  11. <body>  
  12. <a href="http://www.jsfoot.com/" class="powered_by">Powered by jsfoot.com</a>  
  13. <div id="wallpapers"></div>  
  14. <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>  
  15. <div id="desktopPanel">  
  16.     <div id="desktopInnerPanel">  
  17.         <ul class="deskIcon currDesktop">  
  18.             <li class="desktop_icon" id="leshiwang"><span class="icon"><img src="icon/icon4.png"/></span><div class="text">乐视网<s></s></div></li>  
  19.             <li class="desktop_icon" id="Pixlr"><span class="icon"><img src="icon/icon6.png"/></span><div class="text">Pixlr<s></s></div></li>  
  20.             <li class="desktop_icon" id="dubianFim"><span class="icon"><img src="icon/icon7.png"/></span><div class="text">豆瓣FIM<s></s></div></li>  
  21.             <li class="desktop_icon" id="kuwoMusic"><span class="icon"><img src="icon/icon8.png"/></span><div class="text">酷我音乐盒<s></s></div></li>  
  22.             <li class="desktop_icon" id="qidian"><span class="icon"><img src="icon/icon9.png"/></span><div class="text">起点中文<s></s></div></li>  
  23.             <li class="desktop_icon" id="hudong"><span class="icon"><img src="icon/icon10.png"/></span><div class="text">互动百科<s></s></div></li>  
  24.             <li class="desktop_icon" id="qianqianMusic"><span class="icon"><img src="icon/icon5.png"/></span><div class="text">千千音乐<s></s></div></li>  
  25.             <li class="desktop_icon add_icon"><span class="icon"><img src="images/add_icon.png"/></span><div class="text">添加<s></s></div></li>  
  26.         </ul>  
  27.         <ul class="deskIcon">  
  28.             <li class="desktop_icon" id="zfMeishi"><span class="icon"><img src="icon/icon13.png"/></span><div class="text">主妇美食<s></s></div></li>  
  29.             <li class="desktop_icon" id="mglvyou"><span class="icon"><img src="icon/icon12.png"/></span><div class="text">芒果旅游<s></s></div></li>  
  30.             <li class="desktop_icon" id="taobao"><span class="icon"><img src="icon/icon14.png"/></span><div class="text">淘宝网<s></s></div></li>  
  31.             <li class="desktop_icon" id="qingshu"><span class="icon"><img src="icon/icon15.png"/></span><div class="text">情书<s></s></div></li>  
  32.             <li class="desktop_icon" id="fenghuang"><span class="icon"><img src="icon/icon16.png"/></span><div class="text">凤凰网<s></s></div></li>  
  33.             <li class="desktop_icon" id="zhongguancun"><span class="icon"><img src="icon/icon17.png"/></span><div class="text">中关村在线<s></s></div></li>  
  34.             <li class="desktop_icon add_icon"><span class="icon"><img src="images/add_icon.png"/></span><div class="text">添加<s></s></div></li>  
  35.         </ul>  
  36.         <ul class="deskIcon">  
  37.             <li class="desktop_icon" id="win35"><span class="icon"><img src="icon/icon18.png"/></span><div class="text">搜狐汽车<s></s></div></li>  
  38.             <li class="desktop_icon" id="win36"><span class="icon"><img src="icon/icon19.png"/></span><div class="text">布丁电影票<s></s></div></li>  
  39.             <li class="desktop_icon" id="win37"><span class="icon"><img src="icon/icon8.png"/></span><div class="text">中国数学资源网<s></s></div></li>  
  40.             <li class="desktop_icon add_icon"><span class="icon"><img src="images/add_icon.png"/></span><div class="text">添加<s></s></div></li>  
  41.         </ul>  
  42.         <ul class="deskIcon">  
  43.             <li class="desktop_icon" id="win38"><span class="icon"><img src="icon/icon20.png"/></span><div class="text">火影忍者漫画动画<s></s></div></li>  
  44.             <li class="desktop_icon" id="win39"><span class="icon"><img src="icon/icon21.png"/></span><div class="text">潇湘书院<s></s></div></li>  
  45.             <li class="desktop_icon add_icon"><span class="icon"><img src="images/add_icon.png"/></span><div class="text">添加<s></s></div></li>  
  46.         </ul>  
  47.     </div>  
  48. </div><!--desktopPanel end-->  
  49. <div id="taskBarWrap">  
  50.     <div id="taskBar">  
  51.         <div id="leftBtn"><a href="#" class="upBtn"></a></div>  
  52.         <div id="rightBtn"><a href="#" class="downBtn"></a></div>  
  53.         <div id="task_lb_wrap"><div id="task_lb"></div></div>  
  54.     </div>  
  55. </div><!--taskBarWrap end-->  
  56. <div id="lr_bar">  
  57.     <ul id="default_app">  
  58.         <li id="app0"><span><img src="icon/icon1.png" title="我的博客"/></span><div class="text">我的博客<s></s></div></li>  
  59.         <li id="app1"><span><img src="icon/icon2.png" title="关于我"/></span><div class="text">关于我<s></s></div></li>  
  60.         <li id="app2"><span><img src="icon/icon3.png" title="作品"/></span><div class="text">作品<s></s></div></li>  
  61.         <li id="app3"><span><img src="icon/icon11.png" title="资源分享"/></span><div class="text">资源分享<s></s></div></li>  
  62.     </ul>  
  63.     <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>  
  64.     <div id="start_block">  
  65.         <a title="开始" id="start_btn"></a>  
  66.         <div id="start_item">  
  67.             <ul class="item admin">  
  68.                 <li><span class="adminImg"></span> jsfoot</li>  
  69.             </ul>  
  70.             <ul class="item">  
  71.                 <li><span class="sitting_btn"></span>系统设置</li>  
  72.                 <li><span class="help_btn"></span>使用指南 <b></b></li>  
  73.                 <li><span class="about_btn"></span>关于我们</li>  
  74.                 <li><span class="logout_btn"></span>退出系统</li>  
  75.             </ul>  
  76.         </div>  
  77.     </div>  
  78. </div><!--lr_bar end-->  
  79. </body>  
  80. </html> 
HTML5/CSS3 jquery
上一篇: 一个ViewPager使用多个Adapter时遇到的一个问题
下一篇: SQL函数 REVERSESQL函数 REVERSE大纲参数描述示例

继续阅读