jquery float浮動菜單當頁面滾動一點高度時出現浮動菜單



130 518 173



特效描述:浮動菜單 頁面滾動,

代碼結構

1. 引入CSS

<link href="css/style.css" rel="stylesheet" type="text/css" />

2. 引入JS

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

3. HTML代碼

<div style="width:990px;height:6000px;margin:0 auto;text-align:center;background:#EEE;"><br />
  <p>使用方法:</p>
  <p>1、將index.html中的代碼粘貼到要顯示的頁面</p>
  <p>2、加載CSS、JS文件</p>
  <p>3、修改圖片為自己的圖片</p>
  <p>4、右側導航的錨點跳轉,請根據自己網頁的實際情況修改</p>
</div>
<div class="left_nav" id="left_nav">
	<a href="http://www.17sucai.com/" target="_blank" style="height:117px"></a>
	<a href="http://www.17sucai.com/" target="_blank" style="height:116px"></a>
	<a href="http://www.17sucai.com/" target="_blank" style="height:68px"></a>
	<a href="http://www.17sucai.com/" target="_blank" style="height:68px"></a>
	<a href="http://www.17sucai.com/" target="_blank" style="height:68px"></a>
	<a href="http://www.17sucai.com/" target="_blank" style="height:68px"></a>
</div>
<div class="float" id="float">
	<a href="#1" class="an_1">導航1</a>
	<a href="#2" class="an_2">導航2</a>
	<a href="#3" class="an_3">導航3</a>
	<a href="#4" class="an_4">導航4</a>
	<a href="#5" class="an_5">導航5</a>
	<a href="#6" class="an_6">導航6</a>
	<a href="#7" class="an_7">導航7</a>
	<a href="#8" class="an_8">導航8</a>
	<a href="#9" class="an_9">導航9</a>
	<a href="#10" class="an_10">導航10</a>
	<a href="#11" class="an_11">導航11</a>
	<a href="#top" class="an_12">導航12</a>
</div>
<div class="act_nav">
	<div class="event_content">
		<a href="http://www.17sucai.com/" target="_blank" title="返回主頁" style="width:152px;">返回主頁</a>
		<a href="http://www.17sucai.com/" target="_blank" title="手機" style="width:105px;">手機</a>
		<a href="http://www.17sucai.com/" target="_blank" title="數碼" style="width:103px;">數碼</a>
		<a href="http://www.17sucai.com/" target="_blank" title="電腦" style="width:118px;">電腦</a>
		<a href="http://www.17sucai.com/" target="_blank" title="家電" style="width:111px;">大家電</a>
		<a href="http://www.17sucai.com/" target="_blank" title="家電" style="width:107px;">小家電</a>
		<a href="http://www.17sucai.com/" target="_blank" title="百貨" style="width:103px;">百貨</a>
		<p>
			<a href="http://www.17sucai.com/" target="_blank" title="旅游">旅游專場</a>
			<a href="http://www.17sucai.com/" target="_blank" title="送禮">送禮專場</a>
			<a href="http://www.17sucai.com/" target="_blank" title="會員">游戲專場</a>
			<a href="http://www.17sucai.com/" target="_blank" title="新人">新人專場</a>
			<a href="http://www.17sucai.com/" target="_blank" title="無線">無線專場</a>
			<a href="http://www.17sucai.com/" target="_blank" title="會員">QQ會員</a>
		</p>
	</div>
</div>



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


熱門標簽: 浮動 懸浮 懸浮層 懸浮框 浮動層 浮動框 浮動插件 懸浮插件 滑動星星打分 浮動提示框 其他 浮動菜單 浮動導航 二維碼 圖片廣告
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

老夫子电子