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. Gradle: Can't load library: native-platform.dll

    Eclipse 导入 Gradle project 时总是报错:Can't load library: native-platform.dll. 解决方案: 进入 Windows -> Pref ...

  2. java内存占用问题(一)

    Nocturne 2012-12-24 java数组内存占用问题. 30 Contact[] ca = new Contact[10];   while(x<10){     ca[x]=new ...

  3. SpringBoot中RedisTemplate订阅发布对象

    解说 RedisMessageListenerContainer Redis订阅发布的监听容器,你的消息发布.订阅配置都必须在这里面实现 addMessageListener(MessageListe ...

  4. linux下thinkphp取消调试模式后找不到网页解决方案

    1.最大嫌疑是Runtime目录权限不足,导致common~runtime.php文件无法生成, 解决:1.整个Runtime目录删除,让系统重新生成; 2.给Runtime及以下的所有文件足够权限0 ...

  5. RMI原理及简单demo

    1 简介 RMI是远程方法调用的简称,它能够帮助我们查找并执行远程对象的方法.通俗地说,远程调用就象将一个class放在A机器上,然后在B机器中调用这个class的方法. 2 概念 其他机器需要调用的 ...

  6. Fiddler监控面板显示Server栏(Fiddler v5.0)

    1.点击Rules下的Customize Rules.js,会打开Fiddler ScriptEditor 2.去掉 UI.lvSessions.AddBoundColumn("Server ...

  7. Android基础之布局ConstraintLayout

    Google I/O 2016 上发布了 ConstraintLayout,据说很强大,那就一探究竟吧! gradle配置 compile 'com.android.support.constrain ...

  8. Spring定时器Quartz的使用

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

  9. VS2015编译VLC2.2.1(under WIN7-64)<转>

    概述: 感谢https://github.com/sunqueen/vlc-2.2.1.32-2013 这个工程,我的工作基本上都是基于它,我只是觉得他的工程设置不够清晰,重新做了一次.区别在于我的工 ...

  10. \\IP\e$方式访问服务器的E盘被拒绝是什么原因?

    问题:服务器本地管理员的权限,首先访问是被拒绝而不是报用户名密码错误:其次远程桌面服务器是可以访问我个人点的D.E盘的 打开默认共享方法:先在控制面板的“服务”,看SERVER服务是否启动,如果没有启 ...