javascript伸缩型菜单实现代码
作者:lijiao 发布时间:2024-06-19 16:40:39
标签: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程序设计有所帮助。
0
投稿
猜你喜欢
- 目的:基于办公与互联网隔离,自带的office软件没有带本地帮助工具,因此在写vba程序时比较不方便(后来发现07有自带,心中吐血,瞎折腾些
- 首先选择操作系统。由于ASP属于MS(Microsoft)的东西,所以我们要选择MS的操作系统,Windows 98以上就可以(
- MatplotlibMatplotlib 是Python中类似 MATLAB 的绘图工具,熟悉 MATLAB 也可以很快的上手 Matplo
- 公布到网页上的Email经常会被一些工具自动提取,一些非法用户就会利用所提取的Email大肆发送垃圾邮件。这些工具大多都是查找链接中“mai
- 部署网站前查看一下系统是否已经安装CGI1、启动iis服务器,打开IIS服务器打开IIS服务器,点击网站,右击“添加网站”2、创建网站点击“
- 1、汉语分词的由来使用ASP开发的中小企业的网站,对于站内搜索,往往只是简单的通过SQL语句匹配数据库。对于比较短的词语搜索,这个方法是有效
- Python的from import *和from import *,它们的功能都是将包引入使用,但是它们是怎么执行的以及为什么使用这种语法
- 目录1、算数运算符:2、赋值运算符:3、比较运算符4、逻辑运算符5、 成员运算符总结大至分为以下5类运算符号算数运算符赋值运算符比
- 随着因特网的发展,在网络环境中,数据库应用渐渐向操作简单、功能实用的方向发展。本文介绍如何利用ASP技术实现对数据库进行在线维护的方法,并给
- 1. 文件夹结构指定文件夹:E:/Code/Python/test指定文件:test.txt指定文件夹下的目录及文件:文件夹a:a.txtt
- 1. 生命周期(重要)1.1 初步认识生命周期别名:生命周期回调函数、生命周期函数、生命周期钩子。生命周期是什么?Vue在关键时刻帮我们调用
- 目录前言1-下载python3.8压缩包2-解压缩安装包3-安装依赖工具4-安装python3.85-修改python2软链接6-修改yum
- 下拉菜单平常见到的都是用js来实现的,本文介绍的方法是使用纯CSS实现导航下拉菜单功能,代码符合标准,兼容性好且环保,制作下拉菜单的不错选择
- rs.open sql,conn,A,B A: ADOPenforwardonly (=0) 只读,且当前数据记录只能向下移动。 ADOPe
- # encoding: UTF-8import threadimport time# 一个用于在线程中执行的函数def func():&nb
- 什么是状态机?关于状态机的一个极度确切的描述是它是一个有向图形,由一组节点和一组相应的转移函数组成。状态机通过响应一系列事件而“运行”。每个
- 获取操作系统的当前运行状态和负载情况,是一个系统管理员的基本技能,因为这对我们日常排查故障,定位问题有着非常紧密的联系,比如查看当前系统的基
- 前言保留小数位是我们经常会碰到的问题,尤其是刷题过程中。那么在python中保留小数位的方法也非常多,但是笔者的原则就是什么简单用什么,因此
- 1.page.wx.css内容如下:<view class='classify_list'> &l
- 重置oracle序列从指定数字开始 代码如下:declare n number(10); v_startnum number(10):=1