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 相关文章推荐
最佳JS代码编写的14条技巧
Jan 09 Javascript
Jquery的hide及toggle方法让超链接慢慢消失
Sep 06 Javascript
Chrome扩展页面动态绑定JS事件提示错误
Feb 11 Javascript
SuperSlide标签切换、焦点图多种组合插件
Mar 14 Javascript
Angular.js实现注册系统的实例详解
Dec 18 Javascript
详解从angular-cli:1.0.0-beta.28.3升级到@angular/cli:1.0.0
May 22 Javascript
ES6中新增的Object.assign()方法详解
Sep 22 Javascript
Postman模拟发送带token的请求方法
Mar 31 Javascript
jQuery动态操作表单示例【基于table表格】
Dec 06 jQuery
vue实现歌手列表字母排序下拉滚动条侧栏排序实时更新
May 14 Javascript
vue常用高阶函数及综合实例
Feb 25 Vue.js
详解Vue3使用axios的配置教程
Apr 29 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
第二节--PHP5 的对象模型
2006/11/16 PHP
php的字符串用法小结
2010/06/08 PHP
php strrpos()与strripos()函数
2013/08/31 PHP
跟我学Laravel之安装Laravel
2014/10/15 PHP
PHP实践教程之过滤、验证、转义与密码详解
2017/07/24 PHP
Laravel模型事件的实现原理详解
2018/03/14 PHP
禁止选中文字兼容IE、Chrome、FF等
2013/09/04 Javascript
jquery1.9 下检测浏览器类型和版本的方法
2013/12/26 Javascript
JS 打印功能代码可实现打印预览、打印设置等
2014/10/31 Javascript
JavaScript检测字符串中是否含有html标签实现方法
2015/07/01 Javascript
js实现简洁的滑动门菜单(选项卡)效果代码
2015/09/04 Javascript
jQuery日历插件datepicker用法详解
2016/03/03 Javascript
详解JavaScript的另类写法
2016/04/11 Javascript
基于Bootstrap里面的Button dropdown打造自定义select
2016/05/30 Javascript
JavaScript中ES6 Babel正确安装过程
2016/07/18 Javascript
node.js入门教程之querystring模块的使用方法
2017/02/27 Javascript
JS仿QQ好友列表展开、收缩功能(第二篇)
2017/07/07 Javascript
Angularjs的键盘事件的绑定
2017/07/27 Javascript
微信小程序scroll-x失效的完美解决方法
2018/07/18 Javascript
解决vue-router在同一个路由下切换,取不到变化的路由参数问题
2018/09/01 Javascript
ExtJs使用自定义插件动态保存表头配置(隐藏或显示)
2018/09/25 Javascript
vue实现按需加载组件及异步组件功能
2019/05/27 Javascript
[02:07]2017国际邀请赛中国区预选赛直邀战队前瞻
2017/06/23 DOTA
[46:20]TFT vs Secret Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
[07:25]DOTA2-DPC中国联赛2月5日Recap集锦
2021/03/11 DOTA
python开启摄像头以及深度学习实现目标检测方法
2018/08/03 Python
Django forms表单 select下拉框的传值实例
2019/07/19 Python
什么是Python中的匿名函数
2020/06/02 Python
python 解决selenium 中的 .clear()方法失效问题
2020/09/01 Python
Python爬虫后获取重定向url的两种方法
2021/01/19 Python
python爬虫scrapy框架之增量式爬虫的示例代码
2021/02/26 Python
英国在线汽车和面包车零件商店:Car Parts 4 Less
2018/08/15 全球购物
物业管理专业个人的自我评价
2013/11/19 职场文书
社区平安建设方案
2014/05/25 职场文书
销售顾问工作计划书
2014/09/15 职场文书
政协委员个人总结
2015/03/03 职场文书