JavaScript实现的伸展收缩型菜单代码
作者：企鹅 时间：2024-04-16 09:22:33
本文实例讲述了JavaScript实现的伸展收缩型菜单代码。分享给大家供大家参考。具体如下：
这是一款真正的JavaScript伸展收缩型菜单，鼠标放上看一看，是不是很酷？鼠标划出菜单项的时候，背景会伸长。菜单没有加链接，想用的自己加，再美化一下，绝对够个 * 。
运行效果截图如下：
在线演示地址如下：
http://demo.aspxhome.com/js/2015/js-zkss-menu-codes/
具体代码如下：
<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
投稿猜你喜欢
不用Global.asa也能实现统计在线人数吗？
2009-10-29 12:28:00
Python实现上下文管理器的方法
2021-06-22 17:31:15
网页版面布局的方法及技巧
2007-10-29 12:41:00
python学生信息管理系统实现代码
2021-07-01 03:41:18
python超详细实现完整学生成绩管理系统
2022-08-25 08:59:08
gem install mysql报错checking for mysql_qu
2010-11-11 12:13:00
深入mysql主从复制延迟问题的详解
2024-01-26 09:55:11
帮你六步改善SQL Server安全规划全攻略
2009-01-20 15:07:00
JSP request.setAttribute()详解及实例
2023-06-18 23:59:32
JavaScript实现iframe自动高度调整和不同主域名跨域
2024-04-16 09:47:33
python密码学简单替代密码解密及测试教程
2023-09-30 08:13:00
Python多线程获取返回值代码实例
2023-03-25 17:42:27
python作图基础之plt.contour实例详解
2023-04-05 01:05:44
关于mysql与mysqli
2011-02-23 12:03:00
使用python怎样产生10个不同的随机数
2021-08-12 13:07:18
python之数字图像处理方式
2023-02-02 18:27:09
关于Dreamweaver乱码问题的解决方案
2010-09-02 12:36:00
详解tensorflow训练自己的数据集实现CNN图像分类
2023-02-28 10:47:04
使用XSLT将XML数据转换成HTML
2023-07-05 08:34:56
MySQL 索引详解
2010-01-20 09:39:00