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代码--------实现随机输出100个随机数,10行,0--到9的数字

    总结:妹纸不是那么会表述,如有不妥之处,请提出来 package com.sads; //杰伦的世界 //实现在0-100个数中,随机输出数每行10个数,也就是10行10列,这些数在0---到9之间 ...

  2. 20165226 实验四 Android程序设计

    实验四 Android程序设计 实验目的 一.Android Studio的安装测试 二.Activity测试 三.UI测试 四.布局测试 五.事件处理测试 实验内容及步骤 (一)Android St ...

  3. 安装Elastix-2.4版本

    首先,下载Elastix地址:http://www.elastix.org,下载里面的2.4版本 第一步:选择安装,Enter 选择语言,默认就行 选择us,默认 选择全部 选择默认分区,点击OK 配 ...

  4. MySql——编程

    基本语法形式 语句块模式: 在mysql编程中,begin....end;基本代替了原来编程语句中的{...}语法. 但又有所区别: 一个bigin...end;块,可以给定一个“标识符”,并且可以使 ...

  5. Mysql Cluster节点类型(转载)

    mysql 自4.1.x版本开始推出mysql cluster功能.cluster简单地说,就是一组"节点"的组合.这里的节点是一个逻辑概念,一台计算机上可以存放一个节点,也可以存 ...

  6. 【CVE】CVE-2018-4304 Apple多个操作系统函数拒绝服务漏洞

    TextImpact: Processing a maliciously crafted text file may lead to adenial of serviceDescription: A ...

  7. C# 重构

    重构是在编写代码后在不更改代码的外部行为的前提下通过更改代码的内部结构来改进代码的过程. 一.何时需要重构 1.代码中存在重复的代码: 如果类中有重复的代码块,需将其提炼出一个新的独立方法,如果是不同 ...

  8. Python实践练习目录

    缘由 做中学才是最好的方法,通过这些项目来加强自己的Python掌握程度. 原则 成体系地学,不搞"题海战术" 通所有不如精一物,精一物方可通所有 走心学,忌浮躁 项目列表 字符串 ...

  9. Spring实战之装配Bean

    1.1Spring配置的可选方案 Spring容器负责创建应用程序中的bean并通过DI来协调这些对象之间的关系.但是,作为开发人员,你需要告诉Spring要创建哪些bean并且如何将其装配在一起.当 ...

  10. Python2处理字符集问题

    这篇文章主要介绍了Python2.x中文乱码问题解决方法,本文解释问题原因.给出了处理办法并讲解了编码解码的一些知识,需要的朋友可以参考下 Python中乱码问题是一个很头痛的问题. 在Python3 ...