javascript伸縮型菜單實(shí)現(xiàn)代碼

更新時(shí)間：2015年11月16日 15:30:41 投稿：lijiao

這是一款真正的JavaScript伸展收縮型菜單，鼠標(biāo)放上看一看，是不是很酷？鼠標(biāo)劃出菜單項(xiàng)的時(shí)候，背景會(huì)伸長(zhǎng)。菜單沒(méi)有加鏈接，想用的自己加，再美化一下，絕對(duì)夠個(gè)性吧。

本文實(shí)例講述了JavaScript實(shí)現(xiàn)的伸展收縮型菜單代碼。分享給大家供大家參考。具體如下：
運(yùn)行效果截圖如下：

具體代碼如下：

<html>
<head>
<title>真正的JavaScript伸展收縮型菜單</title>
<style type="text/css">
#con div{width:100px;margin:5px 0 5px 0;font-size:9pt;height:23px;color:white;}
</style>
<div id="con">
<div style="background-color:red">紅色菜單</div>
<div style="background-color:green">綠色菜單 </div>
<div style="background-color:blue">藍(lán)色</div>
<div style="background-color:yellow">黃色</div>
<div style="background-color:pink">這是什么色</div>
<div style="background-color:orange">桔色</div>
<div style="background-color:black">黑色超酷</div>
</div>
<script language="javascript">
function $(e){return document.getElementById(e);}
function roulMenu(e,maxW,minW){
 var divs = $(e).getElementsByTagName('div');
 for(var i=0;i<divs.length;i++){
 (function(){
 var tims,timss;
 divs[i].onmouseover=function(){
 var self = this;
 clearInterval(timss);
 tims=setInterval(function(){
  if(self.offsetWidth<maxW){
  self.style.width = self.offsetWidth + 5 + 'px';
  }else{
  clearInterval(tims);
  }
 },10);
 }
 divs[i].onmouseout=function(){
 var self = this;
 clearInterval(tims);
 timss=setInterval(function(){
  if(self.offsetWidth>minW){
  self.style.width = self.offsetWidth - 5 + 'px';
  }else{
  clearInterval(timss);
  }
 },10);
 }
 })();
 }
}
//使用方法
roulMenu('con',200,100);
</script>

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

您可能感興趣的文章:

相關(guān)文章

JavaScript設(shè)計(jì)模式之代理模式詳解
這篇文章主要為大家詳細(xì)介紹了JavaScript設(shè)計(jì)模式之代理模式，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-06-06
JavaScript實(shí)現(xiàn)動(dòng)態(tài)刪除列表框值的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)動(dòng)態(tài)刪除列表框值的方法,涉及javascript針對(duì)select列表框的遍歷與刪除操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-08-08
Javascript實(shí)現(xiàn)動(dòng)態(tài)時(shí)鐘效果
這篇文章主要為大家介紹了Javascript實(shí)現(xiàn)動(dòng)態(tài)時(shí)鐘效果，非常詳細(xì)的注釋代碼，文具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-11-11
小程序組件之仿微信通訊錄的實(shí)現(xiàn)代碼
這篇文章主要介紹了小程序組件之仿微信通訊錄的實(shí)現(xiàn)代碼。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
javascript動(dòng)態(tài)添加單元格的腳本代碼
javascript動(dòng)態(tài)添加單元格的腳本代碼...
2007-11-11
js實(shí)現(xiàn)的Easy Tabs選項(xiàng)卡用法實(shí)例
這篇文章主要介紹了js實(shí)現(xiàn)的Easy Tabs選項(xiàng)卡用法,以完整實(shí)例形式較為詳細(xì)的分析了JavaScript鼠標(biāo)事件動(dòng)態(tài)操作頁(yè)面元素樣式的實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-09-09
詳解使用uni-app開(kāi)發(fā)微信小程序之登錄模塊
這篇文章主要介紹了詳解使用uni-app開(kāi)發(fā)微信小程序之登錄模塊，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-05-05
JS獲取頁(yè)面input控件中所有text控件并追加樣式屬性
使用jquery來(lái)在頁(yè)面加載時(shí)獲取頁(yè)面input控件中所有text控件并添加樣式,由于其他方式比較麻煩所以就想通過(guò)在頁(yè)面加載的時(shí)候?qū)⒁膭?dòng)的text找到并添加屬性，感興趣的你可以參考下，希望可以幫助到你
2013-02-02
Echart折線圖手柄觸發(fā)事件示例詳解
這篇文章主要給大家介紹了關(guān)于Echart折線圖手柄觸發(fā)事件的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2018-12-12
這篇文章主要介紹了JS中使用sort結(jié)合localeCompare實(shí)現(xiàn)中文排序?qū)嵗?重點(diǎn)介紹localeCompare函數(shù),需要的朋友可以參考下
2014-07-07