jQuery左侧浮动层滑动弹出展示特效

使用方法：

引入核心CSS样式

/* 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(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(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;}

引入jQuery库文件

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

JS结构

$(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);
	
});

HTML结构

<div class="float-open" id="float-open" style="left:-2px;"><a class="open-btn" href="javascript:void(0);">&gt;</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="#">天梭表荣任2013年世界大学...</a><span>2013-04-10</span></li>
			<li><a href="#">路易&middot;威登专为...</a><span>2013-04-08</span></li>
			<li><a href="#">宇舶表星光熠熠大家庭的又一成...</a><span>2013-04-01</span></li>
			<li><a href="#">Emporio Armani...</a><span>2013-03-12</span></li>
			<li><a href="#">老佛爷掌镜Chanel微电影...</a><span>2013-03-25</span></li>
			<li><a href="#">炫彩登场 彰显个性 奥迪TT...</a><span>2013-03-09</span></li>
			<li><a href="#">王者归来 青年牵手世爵推出B...</a><span>2013-03-13</span></li>
			<li><a href="#">奥迪Q5 hybrid qu...</a><span>2012-06-28</span></li>
			<li><a href="#">奥迪 卓&middot;悦 ...</a><span>2013-03-07</span></li>
			<li><a href="#">格拉夫呈献价值1亿美元瑰丽孔...</a><span>2013-04-09</span></li>
		</ul>
	</div>
</div>