javascript伸缩型菜单实现代码
更新时间：2015年11月16日 15:30:41 投稿：lijiao
这是一款真正的JavaScript伸展收缩型菜单，鼠标放上看一看，是不是很酷？鼠标划出菜单项的时候，背景会伸长。菜单没有加链接，想用的自己加，再美化一下，绝对够个性吧。
本文实例讲述了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 下拉菜单实现代码
- 通用的二级菜单代码(css+javascript)
- javascript 静态树菜单实现代码
- javascript仿qq界面的折叠菜单实现代码
- javascript改变position值实现菜单滚动至顶部后固定
- javascript 树形导航菜单实例代码
- JavaScript伸缩的菜单简单示例
- 深入探讨JavaScript、JQuery屏蔽网页鼠标右键菜单及禁止选择复制
- javascript实现控制的多级下拉菜单
- javascript实现树形菜单的方法
- javascript手风琴下拉菜单实现代码
- javascript伸缩菜单栏实现代码分享
相关文章
这篇文章主要为大家详细介绍了JavaScript设计模式之代理模式，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
这篇文章主要介绍了JavaScript实现动态删除列表框值的方法,涉及javascript针对select列表框的遍历与删除操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-08-08
这篇文章主要为大家介绍了Javascript实现动态时钟效果，非常详细的注释代码，文具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-11-11
这篇文章主要介绍了小程序组件之仿微信通讯录的实现代码。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
javascript动态添加单元格的脚本代码...2007-11-11
这篇文章主要介绍了js实现的Easy Tabs选项卡用法,以完整实例形式较为详细的分析了JavaScript鼠标事件动态操作页面元素样式的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-09-09
这篇文章主要介绍了详解使用uni-app开发微信小程序之登录模块，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-05-05
使用jquery来在页面加载时获取页面input控件中所有text控件并添加样式,由于其他方式比较麻烦所以就想通过在页面加载的时候将要改动的text找到并添加属性，感兴趣的你可以参考下，希望可以帮助到你2013-02-02
这篇文章主要给大家介绍了关于Echart折线图手柄触发事件的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-12-12
JS中使用sort结合localeCompare实现中文排序实例
这篇文章主要介绍了JS中使用sort结合localeCompare实现中文排序实例,重点介绍localeCompare函数,需要的朋友可以参考下2014-07-07
最新评论