歡迎來到建站百科全書,這里有你需要找的答案...

官方主頁 關于偉創 偉創新聞 金牌項目 網站套餐 偉創案例 洛陽百科 幫助中心 聯系我們

您當前位置:網站首頁 >> 網站建設 >> 洛陽網站建設 >> jquery模仿flash導航

jquery模仿flash導航

2012-09-26 09:00:41 來源:建站百科全書 瀏覽:89
內容提要:jquery模仿flash導航-由于jquery文件是外部調用,比較慢,如預覽有問題,請刷新頁面或保存代碼到本地查看
  <html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  <title>jquery仿http://www.oussay.com/的flash導航</title>
  </head>
  <style>
  *{ margin:0; padding:0;}
  .con{ height:40px; width:100%; overflow:hidden; position:relative; background:#9fc;}
  .nav_u{ height:26px; font:22px/26px "宋體"; font-style:italic; font-weight:bold; color:#333; position:relative;}
  .nav_d{ height:14px; font:12px/12px "宋體"; color:#333; position:relative;}
  .pos{position:relative; left:200px;}
  .con a{ text-decoration:none; display:block; color:#666}
  .nav_ub{ width:100%; height:26px; position:absolute; top:0px;  background:#fff;}
  .nav_db{ width:100%; height:14px; position:absolute; bottom:0px; background:#fff;}
  </style>
  <script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
  <script>
  $(document).ready(function(){$(".con").prepend('<div class="nav_ub"></div><div class="nav_db"></div>')$(".con").hover(function(){$(this).children(".nav_ub").stop().animate({top:-26},300);$(this).find(".pos").stop().animate({left:220},250);$(this).children(".nav_db").stop().animate({bottom:-14},300);$(this).find(".pos").stop().animate({left:220},250);},function(){$(this).children(".nav_ub").stop().animate({top:0},300);$(this).find(".pos").stop().animate({left:200},250);$(this).children(".nav_db").stop().animate({bottom:0},300);$(this).find(".pos").stop().animate({left:200},250);});})</script>
  <body>
  <div class="con">
  <div class="nav_u"><a class="pos" href="#">AAAAA</a></div>
  <div class="nav_d"><a class="pos" href="#">aaaaa</a></div>
  </div>
  <div class="con">
  <div class="nav_u"><a class="pos" href="#">BBBBB</a></div>
  <div class="nav_d"><a class="pos" href="#">bbbbb</a></div>
  </div>
  <div class="con">
  <div class="nav_u"><a class="pos" href="#">CCCCC</a></div>
  <div class="nav_d"><a class="pos" href="#">ccccc</a></div>
  </div>
  <div class="con">
  <div class="nav_u"><a class="pos" href="#">AABBCC</a></div>
  <div class="nav_d"><a class="pos" href="#">aabbcc</a></div>
  </div>
  <p><br />
  供稿:<a href="mailto:[email protected]">SD_night</a> 首發:<a href="http://www.lanrentuku.com/" target="_blank">懶人圖庫</a></p>
  <p><br />
  jquery仿www.oussay.com的flash導航<br />
  <br />
  </p>
  <p>注意:由于jquery文件是外部調用,比較慢,如預覽有問題,請刷新頁面或保存代碼到本地查看。
  <br />
  <br />
  </p>
  <p>*尊重他人勞動成果,轉載請自覺注明出處!注:此代碼僅供學習交流,請勿用于商業用途。</p>
  </body>
  </html>
發表評論
網名:
評論:
驗證:
共有0人對本文發表評論查看所有評論(網友評論僅供表達個人看法,并不表明本站同意其觀點或證實其描述)

官方主頁 關于偉創 偉創新聞 金牌項目 網站套餐 偉創案例 洛陽百科 幫助中心 聯系我們

  • 公司名稱:偉創網絡科技 - 聯系電話:15803796021
  • 聯系地址:洛陽洛龍區太康新苑1#501室 聯系郵箱:[email protected] - 在線QQ:664020694
  • 豫ICP備12012069號-1
  • Copyright 2013, 版權所有 建站百科全書
大乐透几点开奖