javascript伸缩型菜单实现代码

作者：lijiao 时间：2024-06-19 16:40:39　

本文实例讲述了JavaScript实现的伸展收缩型菜单代码。分享给大家供大家参考。具体如下：
运行效果截图如下：

具体代码如下：

<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,菜单,伸缩

投稿

javascript伸缩型菜单实现代码

猜你喜欢

Go语言reflect.TypeOf()和reflect.Type通过反射获取类型信息

使用canal监控mysql数据库实现elasticsearch索引实时更新问题

使用Python检测文章抄袭及去重算法原理解析

利用CSS改善网站可访问性

python 返回列表中某个值的索引方法

Python的装饰器用法学习笔记

sqlserver主键设计的注意点

JS实现页面打印（整体、局部）

使用AngularJS制作一个简单的RSS阅读器的教程

python处理csv数据动态显示曲线实例代码

解决项目pycharm能运行,在终端却无法运行的问题

将keras的h5模型转换为tensorflow的pb模型操作

面向站长和网站管理员的Web缓存加速指南[翻译]

使用python实现离散时间傅里叶变换的方法

explain分析sql效率的方法

python保存图片时如何和原图大小一致

对numpy中数组转置的求解以及向量内积计算方法

如何解决SQLServer占内存过多的问题

python用什么编辑器进行项目开发

Python计算回文数的方法