javascript伸缩型菜单实现代码


Posted in Javascript onNovember 16, 2015

本文实例讲述了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 相关文章推荐
Juqery Html(),append()等方法的Bug解决方法
Dec 13 Javascript
一个简单的js树形菜单
Dec 09 Javascript
javascript中创建对象的几种方法总结
Nov 01 Javascript
封装的jquery翻页滚动(示例代码)
Nov 18 Javascript
jQuery拖动div、移动div、弹出层实现原理及示例
Apr 08 Javascript
javascript 数组的正态分布排序的问题
Jul 31 Javascript
JS常见构造模式实例对比分析
Aug 27 Javascript
vue实现点击选中,其他的不选中方法
Sep 05 Javascript
微信小程序下拉框组件使用方法详解
Dec 28 Javascript
javascript定时器的简单应用示例【控制方块移动】
Jun 17 Javascript
vue+iview框架实现左侧动态菜单功能的示例代码
Jul 23 Javascript
微信小程序选择图片控件
Jan 19 Javascript
基于jQuery实现的仿百度首页滑动选项卡效果代码
Nov 16 #Javascript
每天一篇javascript学习小结(Function对象)
Nov 16 #Javascript
举例讲解JavaScript中关于对象操作的相关知识
Nov 16 #Javascript
实例代码详解jquery.slides.js
Nov 16 #Javascript
jQuery实现标题有打字效果的焦点图代码
Nov 16 #Javascript
JavaScript中对DOM节点的访问、创建、修改、删除
Nov 16 #Javascript
常用javascript表单验证汇总
Jul 20 #Javascript
You might like
smarty静态实验表明,网络上是错的~呵呵
2006/11/25 PHP
PHP下打开URL地址的几种方法小结
2010/05/16 PHP
PHP调用C#开发的dll类库方法
2014/07/28 PHP
网站防止被刷票的一些思路与方法
2015/01/08 PHP
php7安装yar扩展的方法详解
2017/08/03 PHP
javascript实现 在光标处插入指定内容
2007/05/25 Javascript
FormValid0.5版本发布,带ajax自定义验证例子
2007/08/17 Javascript
javascript脚本编程解决考试分数统计问题
2008/10/18 Javascript
javascript中的float运算精度实例分析
2010/08/21 Javascript
动态加载脚本提升javascript性能
2014/02/24 Javascript
jQuery+PHP打造滑动开关效果
2014/12/16 Javascript
深入理解JavaScript系列(27):设计模式之建造者模式详解
2015/03/03 Javascript
javascript将DOM节点添加到文档的方法实例分析
2015/08/04 Javascript
jQuery+css3实现Ajax点击后动态删除功能的方法
2015/08/10 Javascript
jQuery插件formValidator自定义函数扩展功能实例详解
2015/11/25 Javascript
全面解析Bootstrap中transition、affix的使用方法
2016/05/30 Javascript
js获取html的span标签的值方法(超简单)
2016/07/26 Javascript
详解能在多种前端框架下使用的表格控件
2017/01/11 Javascript
JS实现的二叉树算法完整实例
2017/04/06 Javascript
vue.js动态数据绑定学习笔记
2017/05/19 Javascript
axios异步提交表单数据的几种方法
2019/08/11 Javascript
vue+animation实现翻页动画
2020/06/29 Javascript
vue自定义指令和动态路由实现权限控制
2020/08/28 Javascript
[01:01:52]DOTA2-DPC中国联赛定级赛 SAG vs iG BO3第二场 1月9日
2021/03/11 DOTA
Python入门篇之面向对象
2014/10/20 Python
Python处理XML格式数据的方法详解
2017/03/21 Python
python使用opencv进行人脸识别
2017/04/07 Python
Python中的引用和拷贝实例解析
2019/11/14 Python
python扫描线填充算法详解
2020/02/19 Python
python 基于pygame实现俄罗斯方块
2021/03/02 Python
一篇.NET面试题
2014/09/29 面试题
我的中国梦演讲稿500字
2014/08/19 职场文书
2015年组织部工作总结
2015/04/03 职场文书
单位工作证明范本
2015/06/15 职场文书
MySQL 数据类型选择原则
2021/05/27 MySQL
基于Python实现股票收益率分析
2022/04/02 Python