jQuery制作仿騰訊web qq用戶(hù)體驗(yàn)桌面
更新時(shí)間:2013年08月20日 08:48:28 作者:
,酷炫個(gè)性的desktop桌面特效展示支持各大主流瀏覽器IE6以上,感興趣的朋友可以體驗(yàn)下哈
jquery ui制作仿騰訊web qq用戶(hù)界面,酷炫個(gè)性的desktop桌面特效展示支持各大主流瀏覽器IE6以上。jQuery用戶(hù)體驗(yàn)設(shè)計(jì),web qq桌面十分動(dòng)感酷炫。
查看演示:
<!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用戶(hù)界面,酷炫個(gè)性的desktop桌面特效展示支持各大主流瀏覽器IE6以上。jQuery用戶(hù)體驗(yàn)設(shè)計(jì),web qq桌面十分動(dòng)感酷炫。" />
<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 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">樂(lè)視網(wǎng)<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">酷我音樂(lè)盒<s></s></div></li>
<li class="desktop_icon" id="qidian"><span class="icon"><img src="icon/icon9.png"/></span><div class="text">起點(diǎn)中文<s></s></div></li>
<li class="desktop_icon" id="hudong"><span class="icon"><img src="icon/icon10.png"/></span><div class="text">互動(dòng)百科<s></s></div></li>
<li class="desktop_icon" id="qianqianMusic"><span class="icon"><img src="icon/icon5.png"/></span><div class="text">千千音樂(lè)<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">淘寶網(wǎng)<s></s></div></li>
<li class="desktop_icon" id="qingshu"><span class="icon"><img src="icon/icon15.png"/></span><div class="text">情書(shū)<s></s></div></li>
<li class="desktop_icon" id="fenghuang"><span class="icon"><img src="icon/icon16.png"/></span><div class="text">鳳凰網(wǎng)<s></s></div></li>
<li class="desktop_icon" id="zhongguancun"><span class="icon"><img src="icon/icon17.png"/></span><div class="text">中關(guān)村在線<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">搜狐汽車(chē)<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">中國(guó)數(shù)學(xué)資源網(wǎng)<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">火影忍者漫畫(huà)動(dòng)畫(huà)<s></s></div></li>
<li class="desktop_icon" id="win39"><span class="icon"><img src="icon/icon21.png"/></span><div class="text">瀟湘書(shū)院<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="關(guān)于我"/></span><div class="text">關(guān)于我<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="時(shí)鐘"></span><span id="weather_btn" title="天氣"></span><span id="them_btn" title="主題"></span></div>
<div id="start_block">
<a title="開(kāi)始" 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>系統(tǒng)設(shè)置</li>
<li><span class="help_btn"></span>使用指南 <b></b></li>
<li><span class="about_btn"></span>關(guān)于我們</li>
<li><span class="logout_btn"></span>退出系統(tǒng)</li>
</ul>
</div>
</div>
</div><!--lr_bar end-->
</body>
</html>
查看演示:
復(fù)制代碼 代碼如下:
<!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用戶(hù)界面,酷炫個(gè)性的desktop桌面特效展示支持各大主流瀏覽器IE6以上。jQuery用戶(hù)體驗(yàn)設(shè)計(jì),web qq桌面十分動(dòng)感酷炫。" />
<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 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">樂(lè)視網(wǎng)<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">酷我音樂(lè)盒<s></s></div></li>
<li class="desktop_icon" id="qidian"><span class="icon"><img src="icon/icon9.png"/></span><div class="text">起點(diǎn)中文<s></s></div></li>
<li class="desktop_icon" id="hudong"><span class="icon"><img src="icon/icon10.png"/></span><div class="text">互動(dòng)百科<s></s></div></li>
<li class="desktop_icon" id="qianqianMusic"><span class="icon"><img src="icon/icon5.png"/></span><div class="text">千千音樂(lè)<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">淘寶網(wǎng)<s></s></div></li>
<li class="desktop_icon" id="qingshu"><span class="icon"><img src="icon/icon15.png"/></span><div class="text">情書(shū)<s></s></div></li>
<li class="desktop_icon" id="fenghuang"><span class="icon"><img src="icon/icon16.png"/></span><div class="text">鳳凰網(wǎng)<s></s></div></li>
<li class="desktop_icon" id="zhongguancun"><span class="icon"><img src="icon/icon17.png"/></span><div class="text">中關(guān)村在線<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">搜狐汽車(chē)<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">中國(guó)數(shù)學(xué)資源網(wǎng)<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">火影忍者漫畫(huà)動(dòng)畫(huà)<s></s></div></li>
<li class="desktop_icon" id="win39"><span class="icon"><img src="icon/icon21.png"/></span><div class="text">瀟湘書(shū)院<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="關(guān)于我"/></span><div class="text">關(guān)于我<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="時(shí)鐘"></span><span id="weather_btn" title="天氣"></span><span id="them_btn" title="主題"></span></div>
<div id="start_block">
<a title="開(kāi)始" 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>系統(tǒng)設(shè)置</li>
<li><span class="help_btn"></span>使用指南 <b></b></li>
<li><span class="about_btn"></span>關(guān)于我們</li>
<li><span class="logout_btn"></span>退出系統(tǒng)</li>
</ul>
</div>
</div>
</div><!--lr_bar end-->
</body>
</html>
您可能感興趣的文章:
- jQuery簡(jiǎn)單實(shí)現(xiàn)QQ空間點(diǎn)贊已經(jīng)取消點(diǎn)贊
- jQuery+JSON+jPlayer實(shí)現(xiàn)QQ空間音樂(lè)查詢(xún)功能示例
- jquery仿QQ商城帶左右按鈕控制焦點(diǎn)圖片切換滾動(dòng)效果
- jQuery實(shí)現(xiàn)右側(cè)顯示可向左滑動(dòng)展示的深色QQ客服效果代碼
- jQuery實(shí)現(xiàn)仿QQ在線客服效果的滾動(dòng)層代碼
- 基于jQuery實(shí)現(xiàn)的QQ表情插件
- jQuery實(shí)現(xiàn)大轉(zhuǎn)盤(pán)抽獎(jiǎng)活動(dòng)仿QQ音樂(lè)代碼分享
- 利用JQuery制作符合Web標(biāo)準(zhǔn)的QQ彈出消息
- jquery實(shí)現(xiàn)漂浮在網(wǎng)頁(yè)右側(cè)的qq在線客服插件示例
- 用jquery實(shí)現(xiàn)的模擬QQ郵箱里的收件人選取及其他效果(一)
- jquery 仿QQ校友的DIV模擬窗口效果源碼
- jQuery實(shí)現(xiàn)仿QQ空間裝扮預(yù)覽圖片的鼠標(biāo)提示效果代碼
相關(guān)文章
jQuery中DOM節(jié)點(diǎn)刪除之empty與remove
DOM節(jié)點(diǎn)刪除相信對(duì)每個(gè)初學(xué)jQuery的新手們來(lái)說(shuō)都不陌生,下面這篇文章主要介紹了jQuery中DOM節(jié)點(diǎn)刪除之empty與remove的相關(guān)資料,有需要的朋友可以參考借鑒,感興趣的下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-01-01
greybox——不開(kāi)新窗口看新的網(wǎng)頁(yè)
這篇文章主要介紹了greybox——不開(kāi)新窗口看新的網(wǎng)頁(yè)2007-02-02
jQuery實(shí)現(xiàn)淡入淡出的模態(tài)框
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)淡入淡出的模態(tài)框,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-02-02
jQuery+AJAX實(shí)現(xiàn)無(wú)刷新下拉加載更多
這篇文章主要介紹了jQuery+AJAX實(shí)現(xiàn)無(wú)刷新下拉加載更多的相關(guān)資料,需要的朋友可以參考下2015-07-07
簡(jiǎn)單實(shí)現(xiàn)jQuery進(jìn)度條輪播實(shí)例代碼
這篇文章主要為大家詳細(xì)介紹了簡(jiǎn)單實(shí)現(xiàn)jQuery進(jìn)度條輪播實(shí)例代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-06-06
JQueryEasyUI框架下的combobox的取值和綁定的方法
這篇文章主要介紹了JQueryEasyUI框架下的combobox的取值和綁定的方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下。2017-01-01

