window.onload=function(){
var aA=document.getElementsByTagName('a');
for(var i=0; i<aA.length; i++){
aA[i].onmouseover=function(){
var This=this;
clearInterval(This.time);
This.time=setInterval(function(){
This.style.width=This.offsetWidth+8+"px";
if(This.offsetWidth>=160)
clearInterval(This.time);
},30)
}
aA[i].onmouseout=function(){
clearInterval(this.time);
var This=this;
this.time=setInterval(function(){
This.style.width=This.offsetWidth-8+"px";
if(This.offsetWidth<=120){
This.style.width='120px';
clearInterval(This.time);
}
},30)
}
}
}

js实现水平伸缩菜单的更多相关文章

  1. css实现水平伸缩菜单

    ul li a{transition:width 500ms ease;} a:hover{width:*;} 高度向上延伸用height:*;margin-top:-*px;//负值实现向上

  2. JQ写简单的伸缩菜单(内附效果图和源代码)

    效果如图: JQ代码就那么几句, <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

  3. js屏蔽浏览器右键菜单,粘贴,复制,剪切,选中(转)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 用js枚举实现简易菜单效果

    用js枚举实现简易菜单效果,左侧显示菜单,右侧显示用户选择的菜单,一图胜千言,还是直接来张效果图吧: 以下是代码: <DOCTYPE html> <html> <head ...

  5. Angular.js+Bootstrap实现手风琴菜单

    说是Angular.js+Bootstrap实现手风琴菜单,其实就是用了Bootstrap的样式而已. 上一篇实现了表格+分页,接着学习实现的Demo. 主要练习自定义指令,向指令中传递参数,老规矩先 ...

  6. 下拉的DIV+CSS+JS二级树型菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. 重写JS的鼠标右键点击菜单

    重写JS的鼠标右键点击菜单 该效果主要有三点,一是对重写的下拉菜单的隐藏和显示:二是屏蔽默认的鼠标右键事件:三是鼠标左键点击页面下拉菜单隐藏. 不多说,上html代码: 1 <ul id=&qu ...

  8. 原生JS封装创建多级菜单函数

    手写一个使用原生JS封装的多级菜单的函数,满足以下几点需求. 子类层级不确定,可根据数据自动生成多级菜单. 操作便捷,只需传入一个HTML标签. 缺点: 需要满足特定的数据结构 废话不多说,展示代码. ...

  9. 纯css和js版下拉菜单

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. 数据运算+-*/,比较运算符==!=,赋值运算,逻辑运算and,or,not,成员运算in,not in,身份运算is is not,位运算&|,运算符的优先级

    取模就是返回余数. 取模的作用主要是来取奇偶数来用的,奇数干嘛,偶数干嘛. 比较运算符: 赋值运算: 逻辑运算: 赋值的时候可以多个变量同时赋值 成员运算: in就是在不在的意思. 身份运算: 位运算 ...

  2. 如何混编c++

    1.  如何混编c++ 用 Xcode4 创建一个 工程,如果在任意一个文件AAA.h的头部加入 #include<string> using  namespace  std; 编译运行, ...

  3. MySql——触发器

    触发器 什么叫触发器: 就是mysql中的一种“一触即发”的机器(机制). 其实只是预先定义好的一段代码.该段代码无需人工调用,而是会在‘预计’好的某个情形下自动执行. 通常就这几个情形: 对某个数据 ...

  4. Oracle回收站使用全攻略

    摘要:回收站(Recycle Bin)从原理上来说就是一个数据字典表,放置用户删除(drop)掉的数据库对象信息.用户进行删除操作的对象并没有被数据库删除,仍然会占用空间.除非是由于用户手工进行Pur ...

  5. 修改win7远程桌面端口号

    Windows 7/Vista/XP/2003等系统中的远程终端服务是一项功能非常强大的服务,同时也成了入侵者长驻主机的通道,入侵者可以利用一些手段得到管理员账号和密码并入侵主机.下面,我们来看看如何 ...

  6. Install MongoDB Community Edition on Ubuntu

    Install MongoDB > Install MongoDB Community Edition > Install MongoDB Community Edition on Lin ...

  7. 第十章 消息驱动的微服务: Spring Cloud Stream

    Spring Cloud Stream 是一个用来为微服务应用构建消息驱动能力的框架. 它可以基于Spring Boot 来创建独立的. 可用于生产的 Spring 应用程序. 它通过使用 Sprin ...

  8. 浪潮openStack云

  9. 「小程序JAVA实战」小程序我的个人信息-注销功能(42)

    转自:https://idig8.com/2018/09/06/xiaochengxujavashizhanxiaochengxuwodegerenxinxi-zhuxiaogongneng40/ 注 ...

  10. Spring定时器Quartz的使用

    在JavaEE系统中,我们会经常用到定时任务,比如每天凌晨生成前天报表,每一小时生成汇总数据等等,定时更新某某操作……. 我们可以使用java.util.Timer结合java.util.TimerT ...