效果图：
所用的图片：
前台代码
<!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 runat="server"> <title></title> <script src="js/51tab.js" type="text/javascript"></script> <link href="css/51tab2.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> window.onload = function () { var oBtn = document.getElementById('but'); var oBottom = document.getElementById('miaov_bottom'); var oBox = document.getElementById('miaov_box'); var oBtnClose = document.getElementById('btn_close'); var initBottomRight = parseInt(getStyle(oBottom, 'right')); var initBoxBottom = parseInt(getStyle(oBox, 'bottom')); oBtn.onclick = openHandler; oBtnClose.onclick = closeHandler; function openHandler() { startMove(oBottom, { right: 0 }, function () { oBox.style.display = 'block'; startMove(oBox, { bottom: 0 }); }); oBtn.className = 'but_hide'; oBtn.onclick = closeHandler; } function closeHandler() { startMove(oBox, { bottom: initBoxBottom }, function () { oBox.style.display = 'none'; startMove(oBottom, { right: initBottomRight }, function () { oBtn.className = 'but_show'; }); }); oBtn.onclick = openHandler; } }; </script> </head> <body> <div class="page"> <div id="miaov_bottom"> <ul id='nav'> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul> <h2 class="miaov"><a href="#">彼此无可替代</a></h2> </div> <a class="but_show" id="but" href="#"></a> <div id="miaov_box"> <div class="bg"> </div> <div class="nav2_bg"> </div> <ul id="list_nav"> <li id="m1" class="on"><a href="#" onmouseover="javascript:gopage(1)">相关</a></li> <li id="m2"><a href="#" onmouseover="javascript:gopage(2)">最新</a></li> <li id="m3"><a href="#" onmouseover="javascript:gopage(3)">随机</a></li> <li id="m4"><a href="#" onmouseover="javascript:gopage(4)">标签</a></li> </ul> <a class='clos' id="btn_close"></a> <!--右边内容层--> <div class="box_right" id="content"> <div id="c1" class="tablist"> <var>相关文章</var> </div> <div id="c2" class="tablist" style="display: none"> <var> 最新文章</var> <a href='' title="">自适应宽度的html+css图片提交按钮代码</a> <a href='' title="">图片大小固定的html+css图片提交按钮代码</a> <a href='' title="">为网站增加圣诞节祝福动画百度的圣诞老人动画</a> <a href='' title="">日期时间带星期农历js代码特效</a> <a href='' title="">仿腾讯|新浪微博的文本向下滚动JS特效代码</a> </div> <div id="c3" class="tablist" style="display: none"> <var>随机推荐</var> <a href='' title="">仿当当网JS+CSS图书列表鼠标滑过显示缩略图</a> <a href='' title="">给网页添加放大缩小功能按钮</a> <a href='' title="">CSS+js div ul 结构选项卡</a> <a href='' title="">点击链接后弹出提示层</a> <a href='' title="">JS实现flash效果的竖向折叠二级菜单(HTML+CSS+JS)</a> </div> <div id="c4" class="tabtag" style="display: none"> <var>热门标签</var> <a href=''>弹出层</a> <a href=''>jQuery</a> <a href=''>图片展示</a> <a href=''>下拉菜单</a> <a href=''>HTML+CSS</a> </div> </div> <!--//右边内容层--> </div> </body> </html>
css：
*{margin:0;padding:0;font: 12px/1.25 tahoma,arial,宋体,sans-serif;}
li{list-style:none;}
a{text-decoration:none;}
body{100%;height:100%;background:#000;_position:relative;overflow:hidden;}
.page{position:fixed;_position:absolute;right:0;bottom:0;}
#miaov_bottom{203px;height: 50px;background:url(minibar.png) no-repeat 0 0;position:absolute;right:-165px;bottom:0;z-index: 20001;}
#nav{height: 22px;margin: 5px 0 0 43px; 125px;}
#nav li{float: left; 25px;}
.miaov{color: #FFFFFF;height:16px; line-height:16px; text-indent:8px;overflow: hidden; 160px; font-size:14px;}
#but{ bottom: 0;display: block;height: 50px;position: absolute;right: 0; 33px;z-index:20002;}
.but_hide{background: url(minibar.png) no-repeat -170px 0;}
.but_hide:hover{background-position:-203px 0;}
.but_show{background: url(minibar.png) no-repeat -236px 0;}
.but_show:hover{background-position:-269px 0;}
#miaov_box{bottom:-315px;display:none;height: 315px;padding: 0 0 48px;position: absolute;right: 1px; 200px; z-index: 20000;}
.bg{background: url(mini_jpgs.jpg) no-repeat 0 0;height: 315px;opacity: 0.9;position: absolute;right: 0;top: 0; 200px;}
.nav2_bg{bottom: 48px;height: 176px;left: 0;position: absolute; 34px;background: url(mini_jpgs.jpg) no-repeat 0 -139px;}
#list_nav{background: url(minibar.png) no-repeat scroll 0 -255px transparent;height: 139px;left: 0;position: absolute;top: 2px; 34px;}
#list_nav a{ color: #FFFFFF;display: block;height: 27px;line-height: 25px;text-align: center;text-decoration: none;}
#list_nav .show{color: #FF9900;}
#list_nav a:hover{color:#FFFF00;}
.clos{ background: url(minibar.png) no-repeat 0 -76px ;cursor: pointer;height: 9px;position: absolute;right: 10px;top: 14px; 9px;}
.box_right{color: #FFFFFF;height: 285px;overflow: hidden; position: absolute;right: 6px;top: 28px; 150px;}
.tablist a{ 100%; height:24px; line-height:24px; display:block; text-indent:12px; overflow:hidden; white-space:nowrap;
background: url(../images/jia.png) no-repeat left center;}
js:
function startMove(obj, json, fnEnd) { if (obj.timer) { clearInterval(obj.timer); } obj.timer = setInterval(function () { doMove(obj, json, fnEnd); }, 30); var oDate = new Date(); if (oDate.getTime() - obj.lastMove > 30) { doMove(obj, json, fnEnd); } } function getStyle(obj, attr) { if (obj.currentStyle) { return obj.currentStyle[attr]; } else { return getComputedStyle(obj, false)[attr]; } } function doMove(obj, json, fnEnd) { var iCur = 0; var attr = ''; var bStop = true; //假设运动已经该停止了 for (attr in json) { if (attr == 'opacity') { iCur = parseInt(100 * parseFloat(getStyle(obj, 'opacity'))); } else { iCur = parseInt(getStyle(obj, attr)); } if (isNaN(iCur)) { iCur = 0; } var iSpeed = (json[attr] - iCur) / 8; iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed); if (parseInt(json[attr]) != iCur) { bStop = false; } if (attr == 'opacity') { obj.style.filter = "alpha(opacity:" + (iCur + iSpeed) + ")"; obj.style.opacity = (iCur + iSpeed) / 100; } else { obj.style[attr] = iCur + iSpeed + 'px'; } } if (bStop) { clearInterval(obj.timer); obj.timer = null; if (fnEnd) { fnEnd(); } } obj.lastMove = (new Date()).getTime(); } /////////////////////// window.onload = function () { var oBtn = document.getElementById('but'); var oBottom = document.getElementById('miaov_bottom'); var oBox = document.getElementById('miaov_box'); var oBtnClose = document.getElementById('btn_close'); var initBottomRight = parseInt(getStyle(oBottom, 'right')); var initBoxBottom = parseInt(getStyle(oBox, 'bottom')); oBtn.onclick = function () { startMove(oBottom, { right: 0 }, function () { oBox.style.display = 'block'; startMove(oBox, { bottom: 0 }); }); oBtn.className = 'but_hide'; }; oBtnClose.onclick = function () { startMove(oBox, { bottom: initBoxBottom }, function () { oBox.style.display = 'none'; startMove(oBottom, { right: initBottomRight }, function () { oBtn.className = 'but_show'; }); }); }; }; /////切换选项卡 function gopage(n) { var tag = document.getElementById("list_nav").getElementsByTagName("li"); var taglength = tag.length; for (i = 1; i <= taglength; i++) { document.getElementById("m" + i).className = ""; document.getElementById("c" + i).style.display = 'none'; } document.getElementById("m" + n).className = "on"; document.getElementById("c" + n).style.display = ''; }