JavaScript实现的伸展收缩型菜单代码


Posted in Javascript onOctober 14, 2015

本文实例讲述了JavaScript实现的伸展收缩型菜单代码。分享给大家供大家参考。具体如下:

这是一款真正的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中方便增删改cookie的一个类
Oct 11 Javascript
使用js判断数组中是否包含某一元素(类似于php中的in_array())
Dec 12 Javascript
javascript里使用php代码实例
Dec 13 Javascript
javascript和jquery实现用户登录验证
May 04 Javascript
jQuery复制节点用法示例(clone方法)
Sep 08 Javascript
薪资那么高的Web前端必看书单
Oct 13 Javascript
vue项目实战总结篇
Feb 11 Javascript
ES6关于Promise的用法详解
May 07 Javascript
vxe-table vue table 表格组件功能
May 26 Javascript
使用layer.msg 时间设置不起作用的解决方法
Sep 12 Javascript
Vue 解决通过this.$refs来获取DOM或者组件报错问题
Jul 28 Javascript
在vue中实现某一些路由页面隐藏导航栏的功能操作
Sep 21 Javascript
smartcrop.js智能图片裁剪库
Oct 14 #Javascript
深入学习JavaScript对象
Oct 13 #Javascript
快速学习JavaScript的6个思维技巧
Oct 13 #Javascript
有关json_decode乱码及NULL的问题
Oct 13 #Javascript
JS实现左右拖动改变内容显示区域大小的方法
Oct 13 #Javascript
JS实现自动定时切换的简洁网页选项卡效果
Oct 13 #Javascript
JS+CSS实现仿雅虎另类滑动门切换效果
Oct 13 #Javascript
You might like
php下删除字符串中HTML标签的函数
2008/08/27 PHP
使用php验证复选框有效性的示例
2013/11/13 PHP
跟我学Laravel之配置Laravel
2014/10/15 PHP
JavaScript While 循环基础教程
2007/04/05 Javascript
javascript 点击整页变灰的效果(可做退出效果)。
2008/01/09 Javascript
JavaScript 全角转半角部分
2009/10/28 Javascript
JavaScript中停止执行setInterval和setTimeout事件的方法
2015/05/14 Javascript
js+css绘制颜色动态变化的圈中圈效果
2016/01/27 Javascript
详解JavaScript中基于原型prototype的继承特性
2016/05/05 Javascript
JS组件Bootstrap Table布局详解
2016/05/27 Javascript
Mvc提交表单的四种方法全程详解
2016/08/10 Javascript
Vue.js第二天学习笔记(vue-router)
2016/12/01 Javascript
详解Bootstrap各式各样的按钮(推荐)
2016/12/13 Javascript
浅谈angular2路由预加载策略
2017/10/04 Javascript
Vue动态加载异步组件的方法
2018/11/21 Javascript
微信小程序实现bindtap等事件传参
2019/04/08 Javascript
element跨分页操作选择详解
2020/06/29 Javascript
[01:11:35]Liquid vs LGD 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
wxpython中利用线程防止假死的实现方法
2014/08/11 Python
Python使用time模块实现指定时间触发器示例
2017/05/18 Python
浅谈Python实现Apriori算法介绍
2017/12/20 Python
Python实现GUI学生信息管理系统
2020/04/05 Python
使用Python实现windows下的抓包与解析
2018/01/15 Python
python处理csv数据动态显示曲线实例代码
2018/01/23 Python
Python中低维数组填充高维数组的实现
2019/12/02 Python
Tensorflow的梯度异步更新示例
2020/01/23 Python
python使用Geany编辑器配置方法
2020/02/21 Python
美国摄影爱好者购物网站:Focus Camera
2016/10/21 全球购物
美国婴儿和儿童服装购物网站:PatPat
2020/10/01 全球购物
shell程序如何生命变量?shell变量是弱变量吗?
2014/11/10 面试题
幼儿园小班评语大全
2014/04/17 职场文书
相亲大会策划方案
2014/06/05 职场文书
2014年党员自我评价材料
2014/09/22 职场文书
信息合作协议书
2014/10/09 职场文书
Python 数据可视化神器Pyecharts绘制图像练习
2022/02/28 Python
一文搞懂PHP中的抽象类和接口
2022/05/25 PHP