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,菜单,伸缩
0
投稿
猜你喜欢
Go语言reflect.TypeOf()和reflect.Type通过反射获取类型信息
2024-04-23 09:38:27
使用canal监控mysql数据库实现elasticsearch索引实时更新问题
2024-01-20 22:48:39
使用Python检测文章抄袭及去重算法原理解析
2023-04-26 12:00:54
利用CSS改善网站可访问性
2010-10-20 20:12:00
python 返回列表中某个值的索引方法
2021-05-25 21:44:13
Python的装饰器用法学习笔记
2021-05-06 03:03:36
sqlserver主键设计的注意点
2012-08-21 10:42:44
JS实现页面打印(整体、局部)
2024-04-26 17:14:27
使用AngularJS制作一个简单的RSS阅读器的教程
2024-05-03 15:31:35
python处理csv数据动态显示曲线实例代码
2022-05-01 00:35:05
解决项目pycharm能运行,在终端却无法运行的问题
2021-11-03 21:05:07
将keras的h5模型转换为tensorflow的pb模型操作
2021-06-05 15:14:06
面向站长和网站管理员的Web缓存加速指南[翻译]
2008-04-22 21:04:00
使用python实现离散时间傅里叶变换的方法
2021-10-26 19:44:07
explain分析sql效率的方法
2024-01-22 01:26:55
python保存图片时如何和原图大小一致
2022-07-13 03:34:36
对numpy中数组转置的求解以及向量内积计算方法
2023-01-23 16:39:52
如何解决SQLServer占内存过多的问题
2008-12-18 15:01:00
python用什么编辑器进行项目开发
2021-04-17 19:25:20
Python计算回文数的方法
2022-04-02 05:08:07