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 相关文章推荐
表单(FORM)的一些实用效果代码
Mar 25 Javascript
js浮点数保留两位小数点示例代码(四舍五入)
Dec 26 Javascript
表单提交前触发函数返回true表单才会提交
Mar 11 Javascript
js函数定时器实现定时读取系统实时连接数
Apr 30 Javascript
Jsonp post 跨域方案
Jul 06 Javascript
dul无法加载bootstrap实现unload table/user恢复
Sep 29 Javascript
AngularJS表单提交实例详解
Feb 18 Javascript
微信禁止下拉查看URL的处理方法
Sep 28 Javascript
Vue Cli 3项目使用融云IM实现聊天功能的方法
Apr 19 Javascript
微信小程序 如何获取网络状态
Jul 26 Javascript
Node.js API详解之 tty功能与用法实例分析
Apr 27 Javascript
js实现简单的轮播图效果
Dec 13 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初学者们头痛的十四个问题
2007/01/15 PHP
PHP MSSQL 存储过程的方法
2008/12/24 PHP
PHP内置加密函数详解
2016/11/20 PHP
laravel实现查询最后执行的一条sql语句的方法
2019/10/09 PHP
Yii框架Session与Cookie使用方法示例
2019/10/14 PHP
PHP执行普通shell命令流程解析
2020/08/24 PHP
工作中常用到的JS表单验证代码(包括例子)
2010/11/11 Javascript
flexigrid 参数说明
2010/11/23 Javascript
jQuery bind事件使用详解
2011/05/05 Javascript
JQuery动态创建DOM、表单元素的实现代码
2011/08/09 Javascript
js 在定义的时候立即执行的函数表达式(function)写法
2013/01/16 Javascript
关于在IE下的一个安全BUG --可用于跟踪用户的系统鼠标位置
2013/04/17 Javascript
使用jquery选择器如何获取父级元素、同级元素、子元素
2014/05/14 Javascript
js、jquery图片动画、动态切换示例代码
2014/06/03 Javascript
JavaScript常用标签和方法总结
2015/09/01 Javascript
js重写方法的简单实现
2016/07/10 Javascript
简洁实用的BootStrap jQuery手风琴插件
2016/08/31 Javascript
js select下拉联动 更具级联性!
2020/04/17 Javascript
微信小程序本地缓存数据增删改查实例详解
2017/05/24 Javascript
微信sdk实现禁止微信分享(使用原生php实现)
2019/11/15 Javascript
微信小程序自定义模态弹窗组件详解
2019/12/24 Javascript
js实现蒙版效果
2020/01/11 Javascript
vue style width a href动态拼接问题的解决
2020/08/07 Javascript
Python对ElasticSearch获取数据及操作
2019/04/24 Python
Python搭建HTTP服务过程图解
2019/12/14 Python
Python实现企业微信机器人每天定时发消息实例
2020/02/25 Python
实例讲解Python 迭代器与生成器
2020/07/08 Python
ECCO爱步美国官网:来自丹麦的鞋履品牌
2016/11/23 全球购物
英国经典球衣网站:Classic Football Shirts
2017/05/20 全球购物
音乐专业自荐信
2014/02/07 职场文书
中班幼儿评语大全
2014/04/30 职场文书
服务之星事迹材料
2014/05/03 职场文书
活动总结书
2014/05/08 职场文书
兼职安全员岗位职责
2015/02/15 职场文书
MySQL深度分页(千万级数据量如何快速分页)
2021/07/25 MySQL
Android超详细讲解组件ScrollView的使用
2022/03/31 Java/Android