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 相关文章推荐
IE6下通过a标签点击切换图片的问题
Nov 14 Javascript
JavaScript输入邮箱自动提示实例代码
Jan 13 Javascript
jquery新的绑定事件机制on方法的使用方法
Apr 15 Javascript
node.js中的fs.read方法使用说明
Dec 17 Javascript
js使用DOM设置单选按钮、复选框及下拉菜单的方法
Jan 20 Javascript
浅谈javascript运算符——条件,逗号,赋值,()和void运算符
Jul 15 Javascript
JS函数多个参数默认值指定方法分析
Nov 28 Javascript
Vue精简版风格指南(推荐)
Jan 30 Javascript
vue 配置多页面应用的示例代码
Oct 22 Javascript
js自定义input文件上传样式
Oct 26 Javascript
JS数组方法slice()用法实例分析
Jan 18 Javascript
微信小程序自定义扫码功能界面的实现代码
Jul 02 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
Discuz 6.0+ 批量注册用户名
2009/09/13 PHP
PHP开发过程中常用函数收藏
2009/12/14 PHP
typecho插件编写教程(五):核心代码
2015/05/28 PHP
PHP与Java对比学习日期时间函数
2016/07/03 PHP
php用户名的密码加密更安全的方法
2019/06/21 PHP
php让json_encode不自动转义斜杠“/”的方法
2020/04/27 PHP
经常用的图片在容器中的水平垂直居中实例
2007/06/10 Javascript
javascript笔试题目附答案@20081025_jb51.net
2008/10/26 Javascript
jQuery 表格工具集
2010/04/25 Javascript
stream.js 一个很小、完全独立的Javascript类库
2011/10/28 Javascript
JavaScript高级程序设计(第3版)学习笔记4 js运算符和操作符
2012/10/11 Javascript
JS中引用百度地图并将百度地图的logo和信息去掉
2013/09/29 Javascript
BootStrap3使用错误记录及解决办法
2016/12/22 Javascript
jQuery实现Select下拉列表进行状态选择功能
2017/03/30 jQuery
Angularjs 双向绑定时字符串的转换成数字类型的问题
2017/06/12 Javascript
JavaScript数组、json对象、eval()函数用法实例分析
2019/02/21 Javascript
用Python写一个无界面的2048小游戏
2016/05/24 Python
python实现数据库跨服务器迁移
2018/04/12 Python
详解python3中zipfile模块用法
2018/06/18 Python
python实现简单文件读写函数
2021/02/25 Python
纯css3实现宠物小鸡实例代码
2018/10/08 HTML / CSS
css3中flex布局宽度不生效的解决
2020/12/09 HTML / CSS
微软香港官网及网上商店:Microsoft HK
2016/09/01 全球购物
手工制作的意大利礼服鞋:Ace Marks
2018/12/15 全球购物
关于递归的一道.NET面试题
2013/05/12 面试题
英文版餐饮业求职信
2013/10/18 职场文书
开业主持词
2014/03/21 职场文书
汉语言文学毕业生自荐信范文
2014/03/24 职场文书
中国入世承诺
2014/04/01 职场文书
2014年小学美术工作总结
2014/12/20 职场文书
行政复议决定书
2015/06/24 职场文书
教师节随笔
2015/08/15 职场文书
pytorch损失反向传播后梯度为none的问题
2021/05/12 Python
python单元测试之pytest的使用
2021/06/07 Python
进阶篇之linux环境下安装MySQL数据库
2022/04/09 MySQL
使用compose函数优化代码提高可读性及扩展性
2022/06/16 Javascript