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. date.js

    /** * 此JS文件是格式化JS中日期时间的工具类,其中包含了传入日期对象Date,格式化成想要的格式,<br> * 或者传入字符串格式的时间个,次字符串日期对应的格式可以转换为相应的日 ...

  2. Vim编辑器基本操作学习(二)

    操作符+位移 x命令可以删除一个字符,4x可以删除4个字符. dw可以删除一个word,w事实上是向后移动一个word的命令:dw可以接上一个任意一个位移命令,它将删除从当前光标开始到位移终点处的文本 ...

  3. 使用mysql-connector-java出现的错误

    如果你使用的是mysql-connector-java6.*版本,并使用c3p0连接池的话,就可能出错.因为最近在使用Maven构建项目,想着换成最新的版本试试,就是用了个mysql-connecto ...

  4. java基础循环

    一. while循环 示例1:.循环打印1到10之间的值 public class Test1 { public static void main(String[] args) { int i=1;/ ...

  5. java实现时钟方法汇总

    import java.awt.Dimension; import java.text.SimpleDateFormat; import java.util.Calendar; import java ...

  6. CocoStudio创建动画帧

    进入动画编辑器 选择“形体模式” 右键点击资源窗口的资源,可以进行删除,重命名的操作:  可以再资源窗口下方的预览窗口,查看选中的资源预览效果图: 右键点击“对象结构”,创建图层 选择“动画模式” 右 ...

  7. Nginx压力测试工具之WebBench

    Nginx压力测试工具之WebBench   在Apache中有自带的ab命令可以测试服务的压力,而nginx没有自带的命令,必须要采用第三方软件来测试,今天就简单介绍一下webbench对nginx ...

  8. VMware Workstation 12 Pro(安装CentOS7)

    之前安装了一版 Ubuntu 14.04版本,发现蛮不好用的,果断放弃,换上CentOS7版本(在远程服务器上的安装方式除了网络设置有差异,基本相同) VMware Workstation 12 Pr ...

  9. EDMX 残余表信息清理方法

    今天出现的edmx报错,怎么也无法删除的问题,解决了.1.打开edxm2.删除所有表模型3.右键,选择模型浏览器4.在实体类型查看是否还有没有删除的模型如果有,点击删除5.重新生成edxm.解决问题.

  10. xe8 单元别名

    xe8 单元别名 Unit scope F2613 Unit 'Graphics' not found. Project>Option>Unit scope names> vcl.I ...