JS實現(xiàn)仿FLASH效果的豎排導(dǎo)航代碼

更新時間：2015年09月15日 10:30:56 作者：企鵝

這篇文章主要介紹了JS實現(xiàn)仿FLASH效果的豎排導(dǎo)航代碼,涉及JavaScript基于定時函數(shù)動態(tài)設(shè)置頁面元素樣式的技巧,具有FLASH變換效果,需要的朋友可以參考下

本文實例講述了JS實現(xiàn)仿FLASH效果的豎排導(dǎo)航代碼。分享給大家供大家參考。具體如下：

這是一款JS+CSS實現(xiàn)的Flash效果的導(dǎo)航菜單,豎向排列,兼容性好,由JavaScript妙味課堂的朋友編寫,歡迎測試.

運(yùn)行效果截圖如下：

在線演示地址如下：

http://demo.jb51.net/js/2015/js-flash-style-v-nav-codes/

具體代碼如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>仿FLASH的豎排導(dǎo)航</title>
<style>
li { margin-bottom: 2px; list-style: none; background: url(images/bg.gif) repeat-x 0 1px; float: left; clear: left; cursor: pointer-; }
a { display: block; width: 120px; height: 25px; line-height: 25px; position: relative; padding: 0 6px; border: 1px solid #d6d6d6; text-decoration: none; font-size: 12px; color: #555; }
a:hover { font-weight: bold; border: 1px solid #b5b5b5; }
span { display: block; width: 9px; height: 8px; overflow: hidden; background: url(images/ico.gif) no-repeat; position: absolute; top: 8px; right: 10px; }
</style>
<script type="text/javascript">
window.onload=function ()
{
 var aA=document.getElementById('menu').getElementsByTagName('a');
 var i=0;
 for(i=0;i<aA.length;i++)
 {
  aA[i].iTime=null;
  aA[i].iSpeed=6;
  aA[i].onmouseover=function ()
  {
   goTime(this,30,1);
  }
  aA[i].onmouseout=function ()
  {
   goTime(this,6,-1);
  }
 }
}
function goTime(obj,iTarget,toggle)
{
 if(obj.iTime)
 {
  clearInterval(obj.iTime);
 }
 obj.iTime=setInterval(function()
 {
  if(obj.iSpeed===iTarget)
  {
   clearInterval(obj.iTime);
   obj.iTime=null;
  }
  else
  {
   obj.iSpeed+=2*toggle;
   obj.style.paddingLeft=obj.iSpeed+'px';
   obj.style.paddingRight=obj.iSpeed+'px';
  }
 },30);
}
</script>
</head>
<body>
<ul id="menu">
 <li><a href="#" target="_blank">首頁<span></span></a></li>
 <li><a href="#" target="_blank">網(wǎng)頁特效<span></span></a></li>
 <li><a href="#" target="_blank">CSS相關(guān)知識<span></span></a></li>
 <li><a href="#" target="_blank">關(guān)于我們<span></span></a></li>
 <li><a href="#" target="_blank">聯(lián)系我們<span></span></a></li>
</ul>
</body>
</html>

希望本文所述對大家的JavaScript程序設(shè)計有所幫助。

您可能感興趣的文章:

相關(guān)文章

基于iScroll實現(xiàn)下拉刷新和上滑加載效果
這篇文章主要為大家詳細(xì)介紹了基于iScroll實現(xiàn)下拉刷新和上滑加載效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-07-07
javascript for循環(huán)從入門到偏門(效率優(yōu)化+奇特用法)
for循環(huán)是非?；A(chǔ)的javascript知識，但由于JS太靈活了，所以可能出現(xiàn)一些讓初學(xué)者崩潰的寫法。我決定由淺入深的解釋一下for循環(huán)，算是給比我還新手的新手解惑吧，少走彎路
2012-08-08
uniapp開發(fā)H5使用formData上傳文件解決方案
我們很多時候上傳文件就是使用FormData,然而uniapp默認(rèn)不支持FormData類型數(shù)據(jù)的上傳,下面這篇文章主要給大家介紹了關(guān)于uniapp開發(fā)H5使用formData上傳文件的相關(guān)資料,需要的朋友可以參考下
2023-12-12
js實現(xiàn)左側(cè)網(wǎng)頁tab滑動門效果代碼
這篇文章主要介紹了js實現(xiàn)左側(cè)網(wǎng)頁tab滑動門效果代碼,涉及JavaScript頁面元素的遍歷及元素屬性動態(tài)切換的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-09-09
詳解webpack的配置文件entry與output
本篇文章主要介紹了webpack的配置文件entry與output，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-08-08
最新熱門腳本Autojs源碼分享
AutoJS 是基于一個標(biāo)準(zhǔn)字典庫的文本輸入自動完成 JavaScript 庫。Auto.js 是使用純 JS 實現(xiàn)的，沒有任務(wù)外部依賴，大小僅僅 6kb，本文給大家分享最新熱門腳本Autojs源碼，感興趣的朋友一起看看吧
2021-05-05
微信小程序?qū)崿F(xiàn)表格前后臺分頁
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)表格前后臺分頁，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-08-08
小程序頁面動態(tài)配置實現(xiàn)方法
這篇文章主要介紹了小程序頁面動態(tài)配置實現(xiàn)方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-02-02
微信小程序開發(fā)之獲取用戶信息的兩種方法
小程序可以通過微信官方提供的登錄方法方便地獲取微信提供的用戶身份標(biāo)識,進(jìn)而開發(fā)者可以進(jìn)行下一步操作,下面這篇文章主要給大家介紹了關(guān)于微信小程序開發(fā)之獲取用戶信息的兩種方法,需要的朋友可以參考下
2022-03-03
js 可拖動列表實現(xiàn)代碼
前天做了個樹形菜單，今天接著讓它可拖動。非常不錯的效果，需要的朋友可以參考下。
2011-12-12