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 相关文章推荐
基于jquery的Repeater实现代码
Jul 17 Javascript
E3 tree 1.6在Firefox下显示问题的修复方法
Jan 30 Javascript
Javascript和Java获取各种form表单信息的简单实例
Feb 14 Javascript
jquery修改网页背景颜色通过css方法实现
Jun 06 Javascript
5个JavaScript经典面试题
Oct 13 Javascript
js操作cookie保存浏览记录的方法
Dec 25 Javascript
VUE中v-model和v-for指令详解
Jun 23 Javascript
详解jQuery中关于Ajax的几个常用的函数
Jul 17 jQuery
利用nvm管理多个版本的node.js与npm详解
Nov 02 Javascript
解决vue 中 echart 在子组件中只显示一次的问题
Aug 07 Javascript
webpack4 入门最简单的例子介绍
Sep 05 Javascript
解决Vue-cli无法编译es6的问题
Oct 30 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
php Rename 更改文件、文件夹名称
2011/05/24 PHP
php使用正则表达式获取图片url的方法
2015/01/16 PHP
PHP精确到毫秒秒杀倒计时实例详解
2019/03/14 PHP
PHP设计模式(四)原型模式Prototype实例详解【创建型】
2020/05/02 PHP
php自动加载代码实例详解
2021/02/26 PHP
jquery监听div内容的变化具体实现思路
2013/11/04 Javascript
WordPress中利用AJAX技术进行评论提交的实现示例
2016/01/12 Javascript
基于JQuery实现分隔条的功能
2016/06/17 Javascript
JavaScript中误用/g导致的正则test()无法正确重复执行的解决方案
2016/07/27 Javascript
jquery实现拖动效果
2016/08/10 Javascript
详解用vue.js和laravel实现微信授权登陆
2017/06/23 Javascript
详解JS判断页面是在手机端还是在PC端打开的方法
2019/04/26 Javascript
vue使用map代替Aarry数组循环遍历的方法
2020/04/30 Javascript
[47:04]EG vs RNG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
python 提取文件的小程序
2009/07/29 Python
详解Python中with语句的用法
2015/04/15 Python
Python设计模式之门面模式简单示例
2018/01/09 Python
Python的CGIHTTPServer交互实现详解
2018/02/08 Python
Python学习_几种存取xls/xlsx文件的方法总结
2018/05/03 Python
django 发送邮件和缓存的实现代码
2018/07/18 Python
python pyheatmap包绘制热力图
2018/11/09 Python
解决Pandas的DataFrame输出截断和省略的问题
2019/02/08 Python
Python 通过微信控制实现app定位发送到个人服务器再转发微信服务器接收位置信息
2019/08/05 Python
澳大利亚最大的在线美发和美容零售商之一:My Hair Care & Beauty
2019/08/24 全球购物
飞利信loadrunner和软件测试笔试题
2012/09/22 面试题
方正Java笔试题
2014/07/03 面试题
自动化工程专业个人应聘自荐信
2013/09/26 职场文书
药学专业大学生自荐信
2013/09/28 职场文书
专业实习自我鉴定
2013/10/29 职场文书
自荐书范文
2013/12/08 职场文书
学校安全检查制度
2014/01/27 职场文书
元旦联欢会策划方案
2014/06/11 职场文书
2014年优秀班主任工作总结
2014/12/16 职场文书
物业项目经理岗位职责
2015/04/01 职场文书
加薪申请报告范本
2015/05/15 职场文书
Jupyter Notebook 如何修改字体和大小以及更改字体样式
2021/06/03 Python