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. java代码------计算器核心位置添加

    总结:点击等号时,什么代码 else if(str.equals("-")){ ready=true; if(c=='\0'){ num1=Double.parseDouble(j ...

  2. Linut ssh sftp服务重启

    在网上,收了半天,终于找到这个,记录一下~哈~ RedHat Linux 重启SSH /etc/init.d/sshd restart 重启SFTP /etc/init.d/vsftpd restar ...

  3. 安装配置limesurvey

    下载limesurvey地址:http://www.limesurvey.org/en/stable-release 选择下载 limesurvey200plus-build131122.zip 解压 ...

  4. [转]搭建MySQL高可用负载均衡集群

    转自:http://www.cnblogs.com/phpstudy2015-6/p/6706465.html 阅读目录 1.简介 2.基本环境 3.配置MySQL主主复制 4.中间件简述 4.1.H ...

  5. win iso download

    http://rufus.akeo.ie/ window iso download http://win.86tyu.cn/ylmf32win7.html

  6. Tkinter Cursors

      Tkinter Cursors:   Python的Tkinter的支持很多不同的鼠标光标的数字.确切的图形可能会有所不同,根据您的操作系统. 这里是大量有趣的的名单: "arrow&q ...

  7. day9-IO 番外

    同步IO和异步IO,阻塞IO和非阻塞IO分别是什么,到底有什么区别?不同的人在不同的上下文下给出的答案是不同的.所以先限定一下本文的上下文. 本文讨论的背景是Linux环境下的network IO. ...

  8. Seaborn绘图

    http://seaborn.pydata.org/index.html Seaborn其实是在matplotlib的基础上进行了更高级的API封装,从而使得作图更加容易,在大多数情况下使用seabo ...

  9. [Z] 一些关于http服务器架构设计的资料

    开始关注这块儿,先从最基础最简单的入手.这里放一些我看过的觉得可以收藏的资料,主要是网页或博客,经典书籍之类有时间再看吧: 风格之争:Coroutine模型 vs 非阻塞/异步IO(callback)

  10. Redis实战——安装

    借鉴来源:https://www.cnblogs.com/codersay/p/4301677.html redis官网地址:http://www.redis.io/ 最新版本: redis-4.0. ...