JavaScript实现的伸展收缩型菜单代码
作者:企鹅 发布时间:2024-04-16 09:22:33
标签:JavaScript,菜单
本文实例讲述了JavaScript实现的伸展收缩型菜单代码。分享给大家供大家参考。具体如下:
这是一款真正的JavaScript伸展收缩型菜单,鼠标放上看一看,是不是很酷?鼠标划出菜单项的时候,背景会伸长。菜单没有加链接,想用的自己加,再美化一下,绝对够个 * 。
运行效果截图如下:
在线演示地址如下:
http://demo.aspxhome.com/js/2015/js-zkss-menu-codes/
具体代码如下:
<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程序设计有所帮助。


猜你喜欢
- 本文实例为大家分享了微信小程序实现星星评价效果的具体代码,供大家参考,具体内容如下代码实现wxml文件<!--pages/evalua
- 效果图:图(1)初始图图(2)点击“从右侧划出”代码如下:<!DOCTYPE html><html> <hea
- 安装软件的时候默认访问sql server账号是sa,Management Studio Express默认是使用Windows身份验证登陆
- 本文实例讲述了Python中pygame的mouse鼠标事件用法。分享给大家供大家参考,具体如下:pygame.mouse提供了一些方法获取
- 描述在linux中获取进程cmdline时遇到隐藏符号问题,如下:[root@vm010066016161 /root]#cat /proc
- Python中的内建函数和可迭代对象,迭代器求值标识id() #标识id 返回对象的唯一标识,CPython返回内存地址hash() #哈希
- go语言并没有强制一定要使用一定的工作空间和项目结构,对于小型的go程序依靠go run等命令就可以直接编译运行。然而,保持良好的工作空间和
- 有一张错误上报表,下面只将与本文相关的字段罗列如下:上报人(ReportPerson)、上报错误ID(ErrorID)、上报时间(Repor
- 前言发现本站没有一个靠谱的tp6记录行为日志的教程,于是就整理了一下自己在项目中已经投入使用的行为日志中间件的详细配置步骤供大家参考提示:先
- 1 数据库连接a.数据库的连接(ACCESS和SQL)在APS脚本中可以通过3中方式访问数据库: ∈IDC (Inte
- ES6添加了Promise对象,成功时在then中处理,失败则在catch中处理,但有时候,我们需要在无论成功或失败时都要做一些事,比如隐藏
- 最近一直在做Dnn模块的开发,过程中碰到这么一个问题,需要同时插入N条数据,不想在程序里控制,但是SQL Sever又不支持数组参数.所以只
- 变量全都是引用跟其他编程语言不同,Python的变量不是盒子,不会存储数据,它们只是引用,就像标签一样,贴在对象上面。比如:>>
- 一、输出指令ASP的输出指令<% =expression %>显示表达式的值。这个输出指令等同于使用Resp
- binlog介绍binlog,即二进制日志,它记录了数据库上的所有改变.改变数据库的SQL语句执行结束时,将在binlog的末尾写入一条记录
- 本文实例讲述了django框架实现一次性上传多个文件功能。分享给大家供大家参考,具体如下:在用django 写文件上传的时候,从reques
- 加号+, 是字符串优先.并且从左向右计算. 就是运算前后两个值,只要有一个是字符串,就会将其中一个非字符串的试图转换成字符串.
- 之前已经写过一篇关于Django外键的文章,但是当时并没有介绍如何根据外键对数据的操作,也就是如何通过主表查询子表或者通过子表查询主表的信息
- 在开发一个程序时候,与其让它运行时崩溃,不如在它出现错误条件时就崩溃(返回错误)。这时候断言assert 就显得非常有用。python as
- 问题描述我是debain 系的linux系统没遇到这个问题,在centos系统遇到的Collecting dlib Downlo