jQuery實現導航焦點圖一體式



36 141 48



特效描述:jQuery實現 導航焦點圖 一體式,jQuery實現導航焦點圖一體式

代碼結構

1. 引入CSS

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

2. 引入JS

<script type="text/javascript" src="js/jquery.1.5.2.js"></script>
<script type="text/javascript" src="js/slides.min.jquery.js"></script>
<script type="text/javascript" src="js/common.js"></script>

3. HTML代碼

<br>
<div style="width:980px; height:337px; margin:0 auto; position:relative;">
  <div id="navBox">
    <ul id="nav" style="height:292px">
      <li><a href="#">首  頁</a></li>
      <li sub="subnav1"><a href="#" target="_blank">媒體中心</a></li>
      <li sub="subnav2"><a href="#" target="_blank">關于我們</a></li>
      <li sub="subnav3"><a href="#" target="_blank">業務板塊</a></li>
      <li sub="subnav4"><a href="#" target="_blank">產品與服務</a></li>
      <li sub="subnav5"><a href="#" target="_blank">社會責任</a></li>
      <li sub="subnav6"><a href="#" target="_blank">投資者關系</a></li>
      <li sub="subnav7"><a href="#" target="_blank">專題專欄</a></li>
      <li sub="subnav8"><a href="#l" target="_blank">聯系我們</a></li>
    </ul>
    <div id="subnav1" class="subnav" style="z-index:999">
      <ul>
        <li><a href="#" target="_blank">寶鋼新聞</a></li>
        <li><a href="#" target="_blank">視頻新聞</a></li>
        <li><a href="#" target="_blank">傳媒摘要</a></li>
        <li><a href="#" target="_blank">國資要聞</a></li>
        <li><a href="#" target="_blank">關注與視野</a></li>
        <li><a href="#" target="_blank">行業資訊</a></li>
      </ul>
      <dl>
        <dt>公司出版物</dt>
        <dd><a href="#" target="_blank">社會責任報告</a></dd>
        <dd><a href="#" target="_blank">寶鋼指南</a></dd>
        <dd><a href="#" target="_blank">學習與創新</a></dd>
        <dd><a href="#" target="_blank">寶鋼文藝</a></dd>
        <dd><a href="#" target="_blank">寶鋼文化經典故事</a></dd>
        <dd><a href="#" target="_blank">寶鋼三十年畫冊</a></dd>
        <dd><a href="#" target="_blank">寶鋼經濟與管理</a></dd>
        <dd><a href="#" target="_blank">寶鋼培訓</a></dd>
        <dd><a href="#" target="_blank">寶鋼技術</a></dd>
        <dd><a href="#" target="_blank">世界鋼鐵</a></dd>
      </dl>
      <dl>
        <dt>公司影片</dt>
        <dd><a href="#" target="_blank">公司形象片</a></dd>
        <dd><a href="#" target="_blank">產品宣傳片</a></dd>
      </dl>
    </div>
    <div class="subnav" id="subnav2" style="z-index:999">
      <ul class="subnav_left90">
        <li><a href="#" target="_blank">公司介紹</a></li>
        <li><a href="#" target="_blank">組織機構</a></li>
        <li><a href="#" target="_blank">董事長致辭</a></li>
        <li style="background-image:none">
          <dl>
            <dt>公司高管</dt>
            <dd><a href="#" target="_blank">董事會</a></dd>
            <dd><a href="#" target="_blank">高級管理人員</a></dd>
          </dl>
        </li>
        <li><a href="#" target="_blank">人力資源</a></li>
        <li><a href="#" target="_blank">技術創新</a></li>
      </ul>
      <ul>
        <li><a href="#" target="_blank">寶鋼黨建</a></li>
        <li><a href="#" target="_blank">寶鋼工會</a></li>
        <li><a href="#" target="_blank">寶鋼文化</a></li>
        <li><a href="#" target="_blank">寶鋼VI</a></li>
        <li style="background-image:none">
          <dl>
            <dt>資質榮譽</dt>
            <dd><a href="#" target="_blank">外界認可</a></dd>
            <dd><a href="#" target="_blank">資質認證</a></dd>
          </dl>
        </li>
        <li><a href="#" target="_blank">大事記</a></li>
      </ul>
    </div>
    <div id="subnav3" class="subnav" style="z-index:999">
      <dl class="subnav_left90">
        <dt>鋼鐵主業</dt>
        <dd><a href="#" target="_blank">寶鋼股份</a></dd>
        <dd><a href="#" target="_blank">八一鋼鐵</a></dd>
        <dd><a href="#" target="_blank">寧波鋼鐵</a></dd>
        <dd><a href="#" target="_blank">韶關鋼鐵</a></dd>
        <dd><a href="#" target="_blank">寶鋼不銹</a></dd>
        <dd><a href="#" target="_blank">寶鋼特材</a></dd>
      </dl>
      <dl style="margin-top:20px">
        <dt>多元產業</dt>
        <dd><a href="#" target="_blank">資源開發及物流</a></dd>
        <dd><a href="#" target="_blank">鋼材延伸加工</a></dd>
        <dd><a href="#" target="_blank">工程技術服務</a></dd>
        <dd><a href="#" target="_blank">煤化工</a></dd>
        <dd><a href="#" target="_blank">金融投資</a></dd>
        <dd><a href="#" target="_blank">生產服務</a></dd>
      </dl>
    </div>
    <div id="subnav4" class="subnav" style="z-index:999">
      <ul style="margin-top:20px; margin-left:90px">
        <li style="background-image:none">
          <dl>
            <dt>產品目錄</dt>
            <dd><a href="#" target="_blank">碳鋼系列</a></dd>
            <dd><a href="#" target="_blank">不銹鋼系列</a></dd>
            <dd><a href="#" target="_blank">特鋼系列</a></dd>
          </dl>
        </li>
        <li><a href="#" target="_blank">新品推介</a></li>
        <li style="background-image:none">
          <dl>
            <dt>認證證書</dt>
            <dd><a href="#" target="_blank">體系認證</a></dd>
            <dd><a href="#" target="_blank">產品認證</a></dd>
          </dl>
        </li>
        <li><a href="#" target="_blank">產品手冊</a></li>
        <li><a href="#" target="_blank">產品宣傳片</a></li>
      </ul>
      <ul style="margin-top:20px; width:120px">
        <li style="background-image:none">
          <dl>
            <dt>營銷網絡</dt>
            <dd><a href="#" target="_blank">國內貿易服務體系</a></dd>
            <dd><a href="#" target="_blank">海外貿易服務體系</a></dd>
            <dd><a href="#" target="_blank">加工服務體系</a></dd>
            <dd><a href="#" target="_blank">售后服務體系</a></dd>
          </dl>
        </li>
        <li><a href="#" target="_blank">電子商務</a></li>
      </ul>
    </div>
    <div id="subnav5" class="subnav" style="z-index:999">
      <ul>
        <li><a href="#" target="_blank">社會責任實踐</a></li>
        <li><a href="#" target="_blank">價值創造</a></li>
        <li><a href="#" target="_blank">環境管理</a></li>
        <li><a href="#" target="_blank">利益相關者</a></li>
        <li><a href="#" target="_blank">社會奉獻</a></li>
        <li><a href="#" target="_blank">社會責任報告</a></li>
      </ul>
    </div>
    <div id="subnav6" class="subnav" style="z-index:999">
      <h1 style="margin-top:18px; margin-left:85px">[寶鋼股份]</h1>
      <ul class="subnav_left90" style="margin-top:0px">
        <li style="background-image:none">
          <dl>
            <dt>公司公告</dt>
            <dd><a href="#" target="_blank">公告板</a></dd>
            <dd><a href="#" target="_blank">重大事項公告</a></dd>
          </dl>
        </li>
        <li><a href="#" target="_blank">公司治理</a></li>
        <li style="background-image:none">
          <dl>
            <dt>財務信息</dt>
            <dd><a href="#" target="_blank">定期財務報告</a></dd>
            <dd><a href="#" target="_blank">經營業績</a></dd>
          </dl>
        </li>
      </ul>
      <ul style="margin-top:0px">
        <li style="background-image:none">
          <dl>
            <dt>證券信息</dt>
            <dd><a href="#" target="_blank">股價信息</a></dd>
            <dd><a href="#" target="_blank">股利政策</a></dd>
            <dd><a href="#" target="_blank">股本結構</a></dd>
            <dt>投資者關系文檔</dt>
            <dd><a href="#" target="_blank">公司年報</a></dd>
            <dd><a href="#" target="_blank">公司實錄</a></dd>
            <dd><a href="#" target="_blank">投資者關系推介</a></dd>
          </dl>
        </li>
      </ul>
      <ul style="margin-top:0px">
        <li style="background-image:none">
          <dl>
            <dt>投資者服務</dt>
            <dd><a href="#" target="_blank">業績發布會回放</a></dd>
            <dd><a href="#" target="_blank">投資者關系日歷</a></dd>
            <dd><a href="#" target="_blank">網上路演回放</a></dd>
            <dd><a href="#" target="_blank">分析師</a></dd>
            <dd><a href="#" target="_blank">訂閱</a></dd>
            <dt>聯系我們</dt>
            <dd><a href="#" target="_blank">聯系我們</a></dd>
            <dd><a href="#" target="_blank">常見問題</a></dd>
          </dl>
        </li>
      </ul>
      <ul style="margin-top:10px; margin-right:20px; float:right">
        <h1>[上市公司]</h1>
        <li><a href="#" target="_blank">寶鋼股份</a></li>
        <li><a href="#" target="_blank">八一鋼鐵</a></li>
        <li><a href="#" target="_blank">寶信軟件</a></li>
        <li><a href="#" target="_blank">韶鋼松山</a></li>
      </ul>
    </div>
    <div id="subnav7" class="subnav" style="z-index:999">
      <ul style="margin-left:90px; margin-top:50px; width:185px">
        <li><a href="#" target="_blank">寶鋼專題</a></li>
        <li style="background-image:none">
          <dl>
            <dt>機構專欄</dt>
            <dd><a href="#" target="_blank">寶鋼橋論壇</a></dd>
            <dd><a href="#" target="_blank">人才開發</a></dd>
            <dd><a href="#" target="_blank">科技之家</a></dd>
            <dd><a href="#" target="_blank">經濟管理研究</a></dd>
          </dl>
        </li>
      </ul>
    </div>
    <div id="subnav8" class="subnav" style="z-index:999">
      <ul>
        <li><a href="#" target="_blank">聯系方式</a></li>
        <li><a href="#" target="_blank">咨詢建議</a></li>
        <li><a href="#" target="_blank">在線調查</a></li>
        <li><a href="#" target="_blank">常見問題</a></li>
      </ul>
    </div>
    <!--導航結束-->
  </div>
  <script type="text/javascript">
  	nav.init();
  </script>
  <div id="banner" style="z-index:2">
    <div class="slides_container" id="toggle_banner"> 
    <img src="images/zzsc_1.jpg" width="787" height="337" alt="banner_真誠" /> 
    <img src="images/zzsc_2.jpg" width="787" height="337" alt="banner_友愛" /> 
    <img src="images/zzsc_3.jpg" width="787" height="337" alt="banner_創造力" />
     </div>
  </div>
</div>
<div style="text-align:center;clear:both">
</div>



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


熱門標簽: flash導航菜單 flash導航條 flash導航 flash菜單 flash下拉菜單 flash下拉導航菜單 圖片延遲加載 圖片延遲 圖片加載 右鍵菜單 收縮菜單 收縮導航 圖片放大鏡 圖片疊加 圖片層疊 圖片翻轉 圖片旋轉 圖片淡出淡進 圖片淡出 圖片淡進 圖片全屏 h5動畫導航 h5動畫菜單 html5動畫導航 html5動畫菜單 頭像上傳 圖片上傳 導航切換 菜單切換 浮動菜單 浮動導航 滾動導航菜單 滾動菜單 滾動導航 圖片拖動 圖片拖拽 二維碼 滑動導航菜單 滑動導航 滑動菜單 滾動切換 滾動條切換 地圖 中國地圖 世界地圖 帶縮略圖的幻燈片 h5圖片動畫 h5圖標動畫 html5圖片動畫 html5圖標動畫 圖片廣告 圖片放大縮小 圖片縮放 圖片大小 圖片放大 圖片縮小 圖片變大 圖片變小 flash焦點圖 flash幻燈片 flashbanner flash圖片輪播 滑動選項卡 滑動切換 圖片切換 圖片選項卡 圖標選項卡 純圖片輪播 圖片輪播 圖片滾動 圖片滾動條 圖片滑動 圖片滑塊 圖片收縮展開 圖片收縮 圖片展開 旋轉木馬 圖片旋轉木馬 文字旋轉木馬 旋轉木馬插件 圖標導航 圖標菜單 自動滾動圖片輪播 滑動手風琴 背景切換 大圖切換 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 手風琴 水平手風琴 垂直手風琴 圖片手風琴 文字手風琴 手風琴插件 圖表 焦點圖 幻燈片 輪播圖 bar焦點圖 導航菜單 導航條 菜單欄 導航欄 分類導航 響應式導航條 響應式導航 圖片 圖片插件 頭像截圖 導航切換 菜單切換 圖片切換 圖片選項卡 圖標選項卡 純圖片輪播 圖片輪播 導航菜單插件 導航插件 菜單插件 圖片切換 切換圖片
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

老夫子电子