javascript伸縮型菜單實現(xiàn)代碼
更新時間：2015年11月16日 15:30:41 投稿：lijiao
這是一款真正的JavaScript伸展收縮型菜單，鼠標放上看一看，是不是很酷？鼠標劃出菜單項的時候，背景會伸長。菜單沒有加鏈接，想用的自己加，再美化一下，絕對夠個性吧。
本文實例講述了JavaScript實現(xià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">藍色</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>
希望本文所述對大家的JavaScript程序設計有所幫助。
您可能感興趣的文章:
- Javascript動態(tài)伸縮+淡出淡入
- JavaScript 下拉菜單實現(xiàn)代碼
- 通用的二級菜單代碼(css+javascript)
- javascript 靜態(tài)樹菜單實現(xiàn)代碼
- javascript仿qq界面的折疊菜單實現(xiàn)代碼
- javascript改變position值實現(xiàn)菜單滾動至頂部后固定
- javascript 樹形導航菜單實例代碼
- JavaScript伸縮的菜單簡單示例
- 深入探討JavaScript、JQuery屏蔽網(wǎng)頁鼠標右鍵菜單及禁止選擇復制
- javascript實現(xiàn)控制的多級下拉菜單
- javascript實現(xiàn)樹形菜單的方法
- javascript手風琴下拉菜單實現(xiàn)代碼
- javascript伸縮菜單欄實現(xiàn)代碼分享
相關文章
這篇文章主要為大家詳細介紹了JavaScript設計模式之代理模式，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
JavaScript實現(xiàn)動態(tài)刪除列表框值的方法
這篇文章主要介紹了JavaScript實現(xiàn)動態(tài)刪除列表框值的方法,涉及javascript針對select列表框的遍歷與刪除操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
這篇文章主要為大家介紹了Javascript實現(xiàn)動態(tài)時鐘效果，非常詳細的注釋代碼，文具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-11-11
這篇文章主要介紹了小程序組件之仿微信通訊錄的實現(xiàn)代碼。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
javascript動態(tài)添加單元格的腳本代碼...2007-11-11
這篇文章主要介紹了js實現(xiàn)的Easy Tabs選項卡用法,以完整實例形式較為詳細的分析了JavaScript鼠標事件動態(tài)操作頁面元素樣式的實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09
這篇文章主要介紹了詳解使用uni-app開發(fā)微信小程序之登錄模塊，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
使用jquery來在頁面加載時獲取頁面input控件中所有text控件并添加樣式,由于其他方式比較麻煩所以就想通過在頁面加載的時候將要改動的text找到并添加屬性，感興趣的你可以參考下，希望可以幫助到你2013-02-02
這篇文章主要給大家介紹了關于Echart折線圖手柄觸發(fā)事件的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2018-12-12
JS中使用sort結合localeCompare實現(xiàn)中文排序實例
這篇文章主要介紹了JS中使用sort結合localeCompare實現(xiàn)中文排序實例,重點介紹localeCompare函數(shù),需要的朋友可以參考下2014-07-07