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 相关文章推荐
FormValid0.5版本发布,带ajax自定义验证例子
Aug 17 Javascript
如何使用Javascript获取距今n天前的日期
Jul 08 Javascript
js图片延迟技术一般的思路与示例
Mar 20 Javascript
JavaScript打印网页指定区域的例子
May 03 Javascript
浅谈EasyUI中编辑treegrid的方法
Mar 01 Javascript
JavaScript设计模式开发中组合模式的使用教程
May 18 Javascript
jQuery动态添加可拖动元素完整实例(附demo源码下载)
Jun 21 Javascript
jQuery实现鼠标经过像翻页和描点链接效果
Aug 08 Javascript
jQuery拖拽通过八个点改变div大小
Nov 29 Javascript
用Cordova打包Vue项目的方法步骤
Feb 02 Javascript
详解vue 路由跳转四种方式 (带参数)
Apr 28 Javascript
vue ant design 封装弹窗表单的使用
Jun 01 Vue.js
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
要会喝咖啡也要会知道咖啡豆
2021/03/03 咖啡文化
Yii1.1框架实现PHP极光推送消息通知功能
2018/09/06 PHP
工作需要写的一个js拖拽组件
2011/07/28 Javascript
JQuery模板插件 jquery.tmpl 动态ajax扩展
2011/11/10 Javascript
IE、FF、Chrome浏览器中的JS差异介绍
2013/08/13 Javascript
利用window.name实现windowStorage代码分享
2014/01/02 Javascript
javascript实现数字验证码的简单实例
2014/02/10 Javascript
javascript定时器完整实例
2015/02/10 Javascript
jquery validate.js表单验证入门实例(附源码)
2015/11/10 Javascript
jQuery操作cookie
2016/08/08 Javascript
利用js查找数组中指定元素并返回该元素的所有索引示例
2017/03/29 Javascript
JavaScript中splice与slice的区别
2017/05/09 Javascript
JavaScript运动框架 解决速度正负取整问题(一)
2017/05/17 Javascript
原生javascript实现的全屏滚动功能示例
2017/09/19 Javascript
vue 多入口文件搭建 vue多页面搭建的实例讲解
2018/03/12 Javascript
JavaScript提升机制Hoisting详解
2019/10/23 Javascript
图解JS原型和原型链实现原理
2020/09/15 Javascript
解决vue中使用less/sass及使用中遇到无效的问题
2020/10/24 Javascript
Python实现在matplotlib中两个坐标轴之间画一条直线光标的方法
2015/05/20 Python
Python创建普通菜单示例【基于win32ui模块】
2018/05/09 Python
pandas 读取各种格式文件的方法
2018/06/22 Python
python学生管理系统
2019/01/30 Python
远程部署工具Fabric详解(支持Python3)
2019/07/04 Python
解决python中用matplotlib画多幅图时出现图形部分重叠的问题
2019/07/07 Python
详解程序意外中断自动重启shell脚本(以Python为例)
2019/07/26 Python
Python猜数字算法题详解
2020/03/01 Python
Django REST 异常处理详解
2020/07/15 Python
python3.5的包存放的具体路径
2020/08/16 Python
党员2014两会学习心得体会
2014/03/17 职场文书
绿色环保演讲稿
2014/05/10 职场文书
2015年党性分析材料
2014/12/19 职场文书
淮海战役观后感
2015/06/11 职场文书
行政处罚决定书
2015/06/24 职场文书
微信小程序APP页面的之间的相互传递参数以及自定义组件
2022/04/19 Javascript
详解OpenCV曝光融合
2022/04/29 Python
python三子棋游戏
2022/05/04 Python