手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >jQuery制作仿腾讯web qq用户体验桌面
jQuery制作仿腾讯web qq用户体验桌面
摘要:jqueryui制作仿腾讯webqq用户界面,酷炫个性的desktop桌面特效展示支持各大主流浏览器IE6以上。jQuery用户体验设计,w...

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

1

查看演示:

复制代码 代码如下:

<!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/">Powered by jsfoot.com</a>

<div id="wallpapers"></div>

<div id="navBar"><a href="#" 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>

<li id="leshiwang"><span><img src="icon/icon4.png"/></span><div>乐视网<s></s></div></li>

<li id="Pixlr"><span><img src="icon/icon6.png"/></span><div>Pixlr<s></s></div></li>

<li id="dubianFim"><span><img src="icon/icon7.png"/></span><div>豆瓣FIM<s></s></div></li>

<li id="kuwoMusic"><span><img src="icon/icon8.png"/></span><div>酷我音乐盒<s></s></div></li>

<li id="qidian"><span><img src="icon/icon9.png"/></span><div>起点中文<s></s></div></li>

<li id="hudong"><span><img src="icon/icon10.png"/></span><div>互动百科<s></s></div></li>

<li id="qianqianMusic"><span><img src="icon/icon5.png"/></span><div>千千音乐<s></s></div></li>

<li><span><img src="images/add_icon.png"/></span><div>添加<s></s></div></li>

</ul>

<ul>

<li id="zfMeishi"><span><img src="icon/icon13.png"/></span><div>主妇美食<s></s></div></li>

<li id="mglvyou"><span><img src="icon/icon12.png"/></span><div>芒果旅游<s></s></div></li>

<li id="taobao"><span><img src="icon/icon14.png"/></span><div>淘宝网<s></s></div></li>

<li id="qingshu"><span><img src="icon/icon15.png"/></span><div>情书<s></s></div></li>

<li id="fenghuang"><span><img src="icon/icon16.png"/></span><div>凤凰网<s></s></div></li>

<li id="zhongguancun"><span><img src="icon/icon17.png"/></span><div>中关村在线<s></s></div></li>

<li><span><img src="images/add_icon.png"/></span><div>添加<s></s></div></li>

</ul>

<ul>

<li id="win35"><span><img src="icon/icon18.png"/></span><div>搜狐汽车<s></s></div></li>

<li id="win36"><span><img src="icon/icon19.png"/></span><div>布丁电影票<s></s></div></li>

<li id="win37"><span><img src="icon/icon8.png"/></span><div>中国数学资源网<s></s></div></li>

<li><span><img src="images/add_icon.png"/></span><div>添加<s></s></div></li>

</ul>

<ul>

<li id="win38"><span><img src="icon/icon20.png"/></span><div>火影忍者漫画动画<s></s></div></li>

<li id="win39"><span><img src="icon/icon21.png"/></span><div>潇湘书院<s></s></div></li>

<li><span><img src="images/add_icon.png"/></span><div>添加<s></s></div></li>

</ul>

</div>

</div><>

<div id="taskBarWrap">

<div id="taskBar">

<div id="leftBtn"><a href="#"></a></div>

<div id="rightBtn"><a href="#"></a></div>

<div id="task_lb_wrap"><div id="task_lb"></div></div>

</div>

</div><>

<div id="lr_bar">

<ul id="default_app">

<li id="app0"><span><img src="icon/icon1.png" title="我的博客"/></span><div>我的博客<s></s></div></li>

<li id="app1"><span><img src="icon/icon2.png" title="关于我"/></span><div>关于我<s></s></div></li>

<li id="app2"><span><img src="icon/icon3.png" title="作品"/></span><div>作品<s></s></div></li>

<li id="app3"><span><img src="icon/icon11.png" title="资源分享"/></span><div>资源分享<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>

<li><span></span> jsfoot</li>

</ul>

<ul>

<li><span></span>系统设置</li>

<li><span></span>使用指南 <b></b></li>

<li><span></span>关于我们</li>

<li><span></span>退出系统</li>

</ul>

</div>

</div>

</div><>

</body>

</html>

【jQuery制作仿腾讯web qq用户体验桌面】相关文章:

jQuery中 prop() attr()使用详解

jQuery实现给页面换肤的方法

JQuery中DOM事件合成用法实例分析

JQuery中Text方法用法实例分析

jquery.validate使用时遇到的问题

初步使用bootstrap快速创建页面

jQuery处理图片加载失败的常用方法

jQuery插件制作之全局函数用法实例

jQuery获得字体颜色16位码的方法

jQuery判断一个元素是否可见的方法

精品推荐
分类导航