以下源代碼使用jquery實現了：左側可彈出隱藏div
查看效果：http:///keleyi/phtml/xuanfudiv/1.htm
<script type="text/javascript" src="http:///keleyi/pmedia/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// 更多新聞
function ml_close_demo() {
$('.float-news').animate({
left: '-450px'
}, 300, function(){
$('.float-open').delay(50).animate({
left: '-2px'
}, 300);
});
}
function ml_open_demo() {
$('.float-open').animate({
left: '-70px'
}, 100, function(){
$('.float-news').delay(50).animate({
left: '0px'
}, 300);
});
}
$('.float-close').click(function(){
ml_close_demo();
return false;
});
$('.open-btn').click(function(){
ml_open_demo();
return false;
});
setTimeout(function(){ml_close_demo()},1000);
});
</script>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{_background-image:url(about:blank);/*用浏覽器空白頁面作為背景*/_background-attachment:fixed; /* prevent screen flash in IE6 確保滾動條滾動時，元素不閃動*/ }
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋體";background:#E3E4E2;}
/* float-news */
.float-news,.float-open{background:#fbfbfb;border:2px solid #e1e1e1;border-left:0 none;border-top-right-radius:4px;border-bottom-right-radius:4px;box-shadow:1px 1px 2px rgba(0, 0, 0, 0.5);display:inline-block;font-size:16px;}
.float-news{height:380px;left:0px;padding:10px 15px;width:300px;z-index:100;top:117px;_margin-top:117px;}
.float-open{height:48px;left:-70px;padding:4px 4px 4px 6px;width:48px;z-index:99;top:206px;_margin-top:206px;}
.float-news,.float-open{position:fixed;*zoom:1;_position:absolute;_top:expression(eval(document.documentElement.scrollTop));}
.float-close{background:url(>http:///keleyi/phtml/xuanfudiv/images/nav-close.png) no-repeat left top;overflow:hidden;height:48px;opacity:.6;filter:alpha(opacity=60);position:absolute;right:9px;text-indent:100%;top:10px;white-space:nowrap;width:48px;}
.open-btn{background:url(>http:///keleyi/phtml/xuanfudiv/images/ml-open-demo.png) no-repeat left top;display:block;overflow:hidden;height:48px;opacity:.6;filter:alpha(opacity=60);text-indent:100%;white-space:nowrap;width:48px;}
.float-close:hover,.open-btn:hover{opacity:1;filter:alpha(opacity=100);}
.newslist h3{color:#333;border-bottom:4px solid #F2F2F2;font-size:26px;height:54px;line-height:54px;font-family:Microsoft Yahei,simsun,arial,sans-serif;}
.newslist ul{margin-top:10px;}
.newslist li{position:relative;height:30px;line-height:30px;font-size:14px;border-bottom:1px #ccc dotted}
.newslist li a{color:#404040;}
.newslist li span{position:absolute;right:0;color:#ccc;}
.newslist li:last-child{border-bottom:0;}
</style>
<div class="float-open" id="float-open" style="left:-2px;"><a class="open-btn" href="javascript:void(0);">></a></div>
<div class="float-news" id="float-news" style="left:-450px;">
<a class="float-close" href="javascript:void(0);">X</a>
<div class="newslist">
<h3>精彩內容</h3>
<ul>
<li><a href="http:///a/bjac/6f008786225269ac.htm" title="" target="_blank">jquery純文本返回頂部</a></li><li><a href="http:///a/bjac/ac398357acb82782.htm" title="" target="_blank">jquery倒計時</a></li><li><a href="http:///a/bjac/88af29335890a287.htm" title="" target="_blank">div(tab)切換</a></li><li><a href="http:///a/bjac/768f469b95b61487.htm" title="" target="_blank">單行文字間歇向上滾動</a></li><li><a href="http:///a/bjac/ed5eb8c2959c619e.htm" title="滾動頁面時DIV到達頂部時固定在頂部" target="_blank">滾動頁面時DIV到達頂部時固定在頂...</a></li><li><a href="http:///a/bjac/a6d651710217f7a0.htm" title="使用jQuery UI修飾title屬性的氣泡懸浮框" target="_blank">使用jQuery UI修飾title屬性的氣泡...</a></li><li><a href="http:///a/bjac/bf0eb8c02085b10d.htm" title="" target="_blank">jquery清空textarea等輸入框</a></li><li><a href="http:///a/bjac/939631bb07adb4dc.htm" title="" target="_blank">jquery關燈特效</a></li><li><a href="http:///a/bjac/f4a6f78d74a251c5.htm" title="jquery根據滾動像素顯示隱藏頂部導航條" target="_blank">jquery根據滾動像素顯示隱藏頂部導...</a></li><li><a href="http:///a/bjac/7e8897e5ec0849e9.htm" title="" target="_blank">可改變大小DIV層</a></li>
</ul>
</div>
</div>
<div style="height:2000px;"></div>
另一版本：http:///a/bjac/cdbc89174171ebb8.htm