jquery左側浮動菜單滑動新聞列表



93 370 124



特效描述:jquery 左側浮動菜單 滑動新聞列表,jquery左側浮動菜單滑動新聞列表

代碼結構

1. 引入JS

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

2. HTML代碼

<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(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;}
</style>
<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="http://www.vxisgr.tw">天梭表榮任2013年世界大學...</a><span>2013-04-10</span></li>
			<li><a href="http://www.vxisgr.tw">路易&middot;威登專為...</a><span>2013-04-08</span></li>
			<li><a href="http://www.vxisgr.tw">宇舶表星光熠熠大家庭的又一成...</a><span>2013-04-01</span></li>
			<li><a href="http://www.vxisgr.tw">Emporio Armani...</a><span>2013-03-12</span></li>
			<li><a href="http://www.vxisgr.tw">老佛爺掌鏡Chanel微電影...</a><span>2013-03-25</span></li>
			<li><a href="http://www.vxisgr.tw">炫彩登場 彰顯個性 奧迪TT...</a><span>2013-03-09</span></li>
			<li><a href="http://www.vxisgr.tw">王者歸來 青年牽手世爵推出B...</a><span>2013-03-13</span></li>
			<li><a href="http://www.vxisgr.tw">奧迪Q5 hybrid qu...</a><span>2012-06-28</span></li>
			<li><a href="http://www.vxisgr.tw">奧迪 卓&middot;悅 ...</a><span>2013-03-07</span></li>
			<li><a href="http://www.vxisgr.tw">格拉夫呈獻價值1億美元瑰麗孔...</a><span>2013-04-09</span></li>
		</ul>
	</div>
</div>
<div style="height:2000px;"></div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 文字疊加 文字層疊 flash導航菜單 flash導航條 flash導航 flash菜單 flash下拉菜單 flash下拉導航菜單 h5動畫導航 h5動畫菜單 html5動畫導航 html5動畫菜單 收縮菜單 收縮導航 右鍵菜單 導航切換 菜單切換 浮動菜單 浮動導航 滑動導航菜單 滑動導航 滑動菜單 滾動導航菜單 滾動菜單 滾動導航 滑動 滑塊 滑動門 觸屏滑動 滑動插件 滑塊插件 文字延遲加載 文字延遲 文字加載 文字全屏 文字淡出淡進 文字淡出 文字淡進 文字翻轉 文字旋轉 文字放大縮小 文字縮放 文字大小 文字放大 文字縮小 文字變大 文字變小 文字收縮展開 文字收縮 文字展開 文字提示框 提示文字 文字拖動 文字拖拽 h5文字動畫 h5文字邊框動畫 html5文字動畫 html5文字邊框動畫 360全景 360度全景 文字滑動 文字滑塊 浮動 懸浮 懸浮層 懸浮框 浮動層 浮動框 浮動插件 懸浮插件 文字滾動 文字無縫滾動 文字間歇滾動 文字切換 文字選項卡 收縮展開 展開收縮 收縮 展開 浮動提示框 圖片文字 文字導航菜單 文字導航 文字菜單 導航菜單 導航條 菜單欄 導航欄 分類導航 響應式導航條 響應式導航 文字 文字插件 滑動導航菜單 滑動導航 滑動菜單 浮動菜單 浮動導航 收縮菜單 收縮導航 文字列表 側邊菜單 側邊導航
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

湖北30选5开奖结果走势图表